Vue.jsのコンポーネント名のすすめ

Vue.jsのコンポーネントの命名の際に、個人的に必ず意識していることをいくつかまとめました。
コンポーネント名を検討する際に参考にしていただけると幸いです。

単一ファイルコンポーネント名はパスカルケース（ケバブケース）に

自分はパスカルケースを好んで使用しています。が、大文字と小文字を区別しないファイルシステム上で問題を起こす可能性を考慮してケバブケースも許容されています。

components
├─ TodoItem.vue
└─ todo-item.vue

コンポーネント名は複数単語に

HTML要素とのバッティング防止のために、コンポーネント名は常に複数単語にすることが推奨されています。

export default {
  name: 'TodoItem',
}

場合によっては、コンポーネント名を複数単語にしにくいこともありますが、基底コンポーネントや単一インスタンスのコンポーネントといった考え方を取り入れることで、それを解消することができます。

基底コンポーネント

名前の通り、アプリケーションに一貫したスタイルやルールを適用する基礎として定義されます。これらのコンポーネント名はすべてBase、App、Vなどのプレフィックスで始まるべきです。アプリケーション内で統一していればどれを使用しても問題ないですが、個人的にはBaseを好んで使用しています。

例）BaseButton、BaseIconなど

また、プレフィックスを用いることで、エディタ上でアルファベット順に並べたときに基底コンポーネント同士が隣り合い、識別しやすくなります。

components
├─ BaseButton.vue
└─ BaseIcon.vue

単一インスタンスのコンポーネント

ページ内で1回しか使われないコンポーネントを単一インスタンスのコンポーネントと呼び、1つしか存在しえないことを示すためにTheというプレフィックスで始めます。これはアプリケーションに対して固有のため、プロパティを受け入れることはありません。（バリエーションが存在しないはず）プロパティを追加する必要が発生した場合、それは単一インスタンスではなく再利用可能なコンポーネントとすることを検討するべきです。

components
├─ TheHeader.vue
└─ TheSidebar.vue

単語の順番を意識する

基底コンポーネントの項目でもありましたが、コンポーネント名の単語の順番を意識することで、ファイルを識別しやすくなります。コンポーネント名は、一般的な単語から初めて、修飾語で終わることを推奨します。

components
├─ CardHoge.vue
├─ CardFuga.vue
└─ CardPiyo.vue

略語を使用しない

略語を使用しないことによるタイプの労力は、エディタによる自動補完によって解消できます。ファイル名に限らずですが、略語は使わないようにしましょう。