Vue.js スタイルガイドのすヽめ - いがにんのぼやき

概要

この記事は Vue.js #3 Advent Calendar 2018 の 10 日目の記事です。

この記事ではVue.jsのスタイルガイドを今一度皆さんにすすめたいと思います。

jp.vuejs.org

Vue.jsのスタイルガイドって？

Vue.jsでコードを書くときに命名や記述順序など細かい設計で議論を呼ばないように公式で公開されているスタイルガイドです。
HTML、JavaScriptのスタイルの言及ではなくVue.jsのスタイルの言及のみを行っています。
例えば、これから紹介するコンポーネントのファイル名だったりプライベートなプロパティ名の命名規則なんかが明記されています。

現実的なことが書いてある

このスタイルガイドは細かいことは議論をスキップできるという意味でいいのものです。
加えて特にいいポイントが、公式が現実的な解を示しているというところです。
この現実的な解というのは例えば昨今のエディタを意識していたりといったことです。

例えば密結合コンポーネントの名前の詳細な説明をみて欲しいです。

このスタイルは親コンポーネントと密結合した子コンポーネントは、親コンポーネントの名前をプレフィックスとして含めるというものです。
その中で以下のような記述があります。（一部省略）

この問題を、子コンポーネントを親コンポーネントの名前を元に命名したディレクトリの中に入れることで解決したいと思うかもしれません。
例えば:

components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue

これは推奨されません。以下のような結果を生むからです:
同じような名前のファイルがたくさんできてしまい、コードエディタ上で素早くファイルを切り替えるのが難しくなります。
ネストしたサブディレクトリがたくさんできてしまい、エディタのサイドバーでコンポーネントを参照するのに時間がかかるようになります。

これの正しい例としては下記のようになります。

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

このスタイルガイドではこのように、現代のエディタに合わせて開発をしやすいように現実的な解答をしていたりします。

また、コンポーネント名における単語の順番にあるようにコンポーネント名はそのコンポーネントとして重要な単語を最初にするということも書いてあります。

例えば検索関連のコンポーネントでは、以下のような自然言語のようなコンポーネント名ではなく

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

以下のように何に関するコンポーネントなのかを最初に明記するということを推奨しています。

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue