目的
仕事で知見がたまったので共有したい。
想定される読者
- Vue.jsを普段使っているひと
- とにかく早く実装したいひと
- きれいに実装したいひと
- まわりにVue使いがいないけどなぜかVue案件なひと
注意事項
効果には個人差があります。
開発メンバーのスキルや納期や規模感によります。
絶対の正解はないです。
著者のレベル感
- Vue.js半年ちょいぐらいのレベル感
- VuexとかNuxt.jsとか知らない
- バックエンドが好みなのでJSは雰囲気で書いてる
- コードの綺麗さよりも納期を優先されるところで働いています(泣)
- CSSも雰囲気で書いてる
Component編
Componentを分けない
必要な場合を除き、なるべく分けないで、書きましょう。
分けると親子の変数の受け渡し、メソッドを叩く処理を実装しなくてはならず、時間がかかります。
Componentを分ける
上記と、矛盾しますが、ひとつのComponentでつらくなってくるときがあります。
そのとき、初めて分けましょう。
ロジックが複雑なときに分ける
実装がシンプルになり、見通しがよくなります。
１画面でも複数にわけるとよいです。小さくてもロジックが複雑なときは分けるとよい
１機能１コンポーネントぐらいでもよいかも。
小さく作るとよいです。孫まで作らない
ポイントとして親子までで、孫は作らないほうがよいと思います。
孫まで作ったらVuexなどのライブラリを利用を検討したほうがよいかもしれません。
データ編
- なるべく親から子へデータを渡す。
- 入力されたデータは子から親へ渡す。
- その子コンポーネントしか使わないデータはその子コンポーネントでAPIを叩いてもってくる。
- ある程度まとめてAPIでデータをもってくるとよい。入力されたデータに動的にとかやると実装が大変になる
ライブラリ編
- importは最小限にする
- 途中でやっぱ違うなと思ってライブリを変えない。書き直しで時間がかかる。
- できるだけVue.jsでやる。
- 本当につらくなってきたら、Vuexなどを使っていく。僕は使ったことありません。
メソッド編
- できるだけ小さくメソッドをわける
- わけないほうが、簡単にかけて、読みやすければ、わけない
- 引数を少なくする。３個まで（諸説あります）
- if文は２回まで。（諸説あります）
- メソッドを早い段階で共通化しない
- ある程度、実装するメソッドがでそろってきて時間があったら共通化する
引数やif文が多くなればなるほど、ロジックが複雑になって可読性とメンテナンス性が落ちてきます。
CSS編
- scopedを使う
- CSSフレームワークを使う CSSフレームワークを使って実装して、うまくできないところだけscoped内に書いて、調整していく。
心構え編
- 早く実装できる方法を考える
- 未経験なものを使わない。
- 家で、練習してから使う
ライブラリ編
つらみが解消できるなら使ったほうがいいのですが、現実的に使ったことがあるひとがプロジェクト内にいないと学習コストが高すぎて破綻します。
最後に
やり方はひとつではないし、これも正解ではないかもしれません。
優しいマサカリをコメント欄でいただけますとうれしいです。