自分用 Vuejsルールを書いてみた

趣味プロダクトでVuejsを触ろうと思ったが、フロント開発なんてしたことない。
命名規則が結構大事そうだったから、自分用にルールをまとめておくことにした。

自分用 Vuejsルール

単一ファイルコンポーネント

• ファイル名はパスカル
  o MyComponent.vue
  x mycomponent.vue, myComponent.vue

基底コンポーネント

• 頻繁に使われる基底コンポーネントのファイル名は、Baseで始める
  o BaseIcon.vue
  x MyIcon.vue, Icon.vue

シングルインスタンスコンポーネント

• ページごとに1回しか使われないコンポーネントは、Theで始める
  o TheHeading.vue, TheSideBar.vue
  x Heading.vue, SideBar.vue

コンポーネント名

• 複数単語
  o todo-item
  x todo

テンプレート内コンポーネント名

• パスカル(DOMテンプレート中ではケバブ)
  o MyComponent
  x mycomponent, myComponent

JS内コンポーネント名

• パスカル
  o MyComponent
  x mycomponent, myComponent

propsプロパティ名

• 定義時はキャメル
  o greetingText
  x greeting-text
• HTML(テンプレート)やJSXで使う時はケバブ
  o greeting-text
  x greetingText

ディレクティブ短縮記法

• 短縮記法を使用
  o :value, @input
  x v-bind:value, v-on:input

その他

• propsプロパティはできるだけ詳細に定義する
  • データ型は絶対
• dataプロパティはオブジェクトではなくオブジェクトを返却する関数にする
  • 1画面で複数回呼び出される場合に同一オブジェクトを参照することになる
• v-forではkeyを付与する
  • 内部的にDOM切替の際に該当keyのみに反映させてくれる(パフォーマンス向上)
• コンポーネント親子間やりとりでは$parentと$childrenを使用しない
• 状態管理はVuexを使用する