Vue.js スタイルガイド 分野別簡易リファレンス

こちらは Vue.js #2 Advent Calendar 2018 の 24 日目です。

スタイルガイドについて

本家 Vue.js スタイルガイドはこちら

これは、「Vue.js はこのように (書くべき|書いたほうがいい)ですよー」というものをまとめた、大変ありがたいドキュメントです。

公式が書いているソースコードは全てこれに則って書かれています（そのはずです）。そして、全世界の Vue.js ユーザもこれになるべく近い形でコーディングするべきです。

ESLint プラグイン

こちらもありがたいことに、全てではないものの、スタイルガイドに則っているかをチェックしてくれる ESLint プラグインがあります。

機械的にチェックできるものは機械にやらせましょう！

今回のアドベントカレンダーで、プラグインのコラボレーターの方が記事を書かれています。チェケラ！

この記事を書くきっかけ

コンポーネント外・テンプレートから呼ばれないメソッドの命名規則について、一部のローカルルールで「メソッド名の先頭に_をつける」というものがあるかと思います。

そちらを採用しようとしたところ、実は Vue.js スタイルガイドで禁止されていたため、「これは案外知られていない・意外なルールがあるのでは？」と思いました（しかも優先度 A）。

スタイルガイドを広めるということと、「今北一業」で一覧できるリファレンスがあると捗るなと感じたので、自分で書いてしまえと思った次第です。

また、さらっと調べた限りでは公式と同じ書き方をしているページしか見つけられなかったので、自分なりにわかりやすく、分野別に編集したものを書いてみようと思います。

簡易リファレンス

内容（優先度） としています。

自分がぱっと見で理解できるように書いたので、分かりづらい部分もあるかと思いますが、ご了承ください。（逆に「自分ならこう書く！」といったリファレンスを作るのもありです！）
※ 一部複数箇所に出てくる内容もあります。

コンポーネント・ファイル

命名規則

• コンポーネント名は常に複数単語にする（A）
• ファイル名はパスカルケース（もしくはケバブケース）にすべき（B）
• 基底コンポーネントは専用のプレフィックスをつけるべき（Base App V など）（B）
• インスタンスが一つしか存在しないなら、プレフィックスに The をつけるべき（B）
• 密結合のコンポーネント名は、親コンポーネントの名前をプレフィックスにつけるべき（B）
• コンポーネント名は「最高レベル」の単語から始めるべき（Template, Page 名など）（B）
• コンポーネント名に略語を使用すべきではない（B）

その他

• 1 コンポーネント 1 ファイル（B）
• 単一ファイルコンポーネントでは、<template> <script> <style> は一貫した順序にし、<style> は最後に記述すると良い（C）

テンプレート

タグ

• コンポーネントは、DOM テンプレート以外の場所では自己終了形式で書くべき（B）
• DOM テンプレートではケバブケースを利用すべき。DOM テンプレートと JS/JSX 以外の場所ではパスカルケースを利用しても良い（B）

プロパティ（属性）

• v-for にはインデックス以外の key を指定する（A）
• HTML の属性値はクォートすべき（B）
• プロパティ名は、定義時はキャメルケース、テンプレートなどではケバブケースを利用すべき（B）
• 複数の属性がある場合は、それぞれを複数行に分けて書くべき（B）
• ディレクティブの短縮記法は、使う・使わないを統一すべき（B）
• コンポーネントの属性の記述順を統一すると良い（C）
  • 記述順の一覧は公式を参照
• 同じタグを使用している v-if, v-else-if, v-else には key を指定する（D）

その他

• テンプレート内で複雑な式を利用すべきではない（B）

JavaScript

データ

• コンポーネントのdataを関数にする（A）
• v-for と v-if を同じ要素に使わず、computed でフィルタする（A）
• 複雑な算出プロパティは、複数の算出プロパティに分割すべき（B）
• 親子間のやり取りはプロパティとイベントを利用する（D）
• グローバルの状態管理は Vuex を利用する（D）

命名規則等

• propsはできるだけ（最低でもtypeは）詳細を定義する（A）
• プライベートなプロパティは $_ プレフィックスをつける（A）
• コンポーネントは、DOM テンプレート以外の場所では自己終了形式で書くべき（B）
• DOM テンプレートではケバブケースを利用すべき。DOM テンプレートと JS/JSX 以外の場所ではパスカルケースを利用しても良い（B）
• JS/JSX 内ではパスカルケースを利用すべき（B）
• プロパティ名は、定義時はキャメルケース、テンプレートなどではケバブケースを利用すべき（B）
• コンポーネント / インスタンスオプションの記述順を統一すると良い（C）
  • 記述順の一覧は公式を参照
• ファイルの行数が増えた場合は、コンポーネント / インスタンスオプションのうち複数行になるものは、空行を入れると良い（C）

CSS

• <style scoped> を使用する（ライブラリ作成時を除く）（A）
• <style scoped> 中で要素（タグ）セレクタは使用しない（D）

まとめ

誰が見てもわかりやすく書くために、できるだけ公式のスタイルガイドに則った開発をしていきましょう！