個人でプロダクトを作る上で得た知見
以前、個人プロダクトを作った話を書いたけど、それを通じて得た知見を記しておきたいと思う。
目的重要
プロダクトの目的というよりは、なぜ個人開発をするのかという目的設定。 もう2018年なので別にコードとか書かなくてもIFTTTとかGASとかでも自動化をやれる時代になってきた。
ので、「なんでわざわざVPS借りてまでやるんだっけ？」に対する回答がないと一瞬でやる気が2になる危険性がある。 単純な趣味でチョー楽しいからやってるとかでもいいと思う。(というかそういう人はまずここで困らないと思うけど)
今回の自分の開発目的は「自分の生産性に関係するものを作る」と「Webアプリケーション開発の大まかな全体像を学ぶ」と設定した。
Done is better than perfect
近頃ではもう散々議論し尽くされてて今更言及するのもアレだけど、実質はこれが一番大事のように思う。 一人でサービスを作るときはできるだけ敷居を低くする。あと適当なご褒美も用意すると尚良し。 特にGUI周りはとりあえず動く、を最優先にして良いし(サーバサイドメインの場合)、個人開発なのにフロントエンドのテストを自動化しすぎたりしないほうがいい。
「要件に合わせて、ある程度柔軟にアーキテクチャ変えられるぐらいの地力」みたいなのがないうちはなるべく守ったほうが良い。さもなくば心が折れかねない。
とはいえクソコードを書き散らすのが是であるわけではないので加減が難しい。
例えばTSだったらインターフェイスはちゃんと定義するとか、tsconfig.jsonのオプションである程度セキュアな設定にしておく、とか基準は設けたほうがいいだろう。
サンプルではない、活きたコードは経験値を上げてくれる
活きたコードというのは、要は書いて捨てるだけのものではないコードのこと。
実装したいものがある->調べる->実装する->ハマる->どうにかして直す
このループは一定まで思いの外経験値が上がる模様。 もちろんチュートリアルみっちりやるのもいいけど、レベルを上げながらやる、という選択もなしでは無い。
ちなみに今回の例でいうと、あまりNode.jsに詳しくない状態で作り始めたのでfirebaseへの非同期アクセスが完了する前にレスポンスが返っちゃってエラーみたいなのによくハマった。
ハマったおかげでPromiseの書き方もそこそこ分かるようになったので悪いことばかりじゃない。
でも非同期処理は人間には難しい気がする。
一度に複数の新しいことを勉強しすぎない
これはインフラ周り、特にDockerを導入するときに陥りかけた記憶がある。 問題が起きた時に、原因の切り分けがすごく難しくなるので、周りに詳しい人がいない限りはやらないほうがいいと思った。
ちなみにどういうところでハマったかというと、1コンテナ=1プロセスで運用するのが基本のところを、なんとか1つにまとめようとして2日ぐらい詰まってた。 (参考にしてた記事で1つのコンテナに複数プロセスを動かす、みたいなのをやっていた)
よく分からなかったので、
- 多少でもDockerをサンドボックスで一度検証してから導入する
- 最低限Dockerfile書いてNode.jsのイメージから立ち上げられること
- WebApp, nginx, redisのそれぞれのコンテナを立ち上げて適切にルーティングできていること
をローカルで試した。ここから導き出される答えは、
- まずはベストプラクティスに従う
- インターネットで見たからといってそのままやろうとしない
ベストプラクティスは知っておいて損はない。
トレンドの技術はさわりだけでも一通り触れておくと全然違うのかもしれない。
実装編
なるべくレールに乗る
フロントエンドあるある：BootstrapプラグインやjQueryプラグインを欲を出してカスタマイズしようとして死ぬほどハマる。つらい。
「このjQueryプラグインより、ぼくのかんがえたさいきょうのGUIのほうが強いんだぞ！」みたいなのは大抵UXに寄与しないので、やめよう。やりたかったらちゃんと自分で作ろう。
あと、セキュリティ周りもなるべくベストプラクティスに乗っかったほうがいい。よく言われるけどハッシュアルゴリズムを自作するとかもってのほかで、バグや脆弱性が含まれた時のリスクがとんでもなく高い。
実環境は早めに試せる状態にしておく
国民全員が無料で自由に使えるVPSを用意しておいてほしい
ログは画面のどっかで常に流れるようにしておく
画面のどっかというのがミソで、自分はTerminalの別タブで流してたのでよくWebpackのビルドがこけてるのに気がつかなかった悲しい思い出がある。
JavaScript編
JavaScript、それは人類の叡智ーー
assetsファイルに対する容量の警告が厳しい
webpackではファイル単体で512kbを越えると警告される模様。厳しい。jQueryは重い。3.x系は軽いらしいので時間見つけて移行していくつもり。
jQueryのイベントハンドラは急速に肥大化する
動的に作った要素に対するイベントハンドラの記述が煩雑。Windows Formアプリケーションかと思った。 「なんかこうすると動く」「なんかこうすると動かない」みたいな知見が多い。つらい。
動的に生成した要素に対するイベントリスナがめんどくさい。$("#parent").on('click', 'child', (event) => {});みたいなやつ。
親も動的に生成されてたらdocumentのイベント購読とかする必要がある。
標準のjQueryとBootstrapでできないことを実装しようとすると途端に難易度が上がる。 そういうことをしたくなったら多分ReactなりVueなり何らかのフレームワーク入れたほうがいい。（次なんか作るときは多分Vueあたり入れます)
console.logに頼りすぎない
DevToolやVSCodeを使ったら一瞬で終わるようなデバッグをconsole.logでしてはいけない。
おわりに
なんだかんだでプロダクト作るのは結構楽しい。睡眠時間が削れるけど。
