##早見表
| 記法 | 正しい例 | 推奨や補足 | |
|---|---|---|---|
| ファイル名 | パスカルケース or ケバブケース |
UserList.vueuser-list.vue
|
・複数単語にする ・親子関係の場合、親の名前を接頭辞にする ・最高レベルの単語からはじめて修飾語で終わる ・ベースコンポーネントはBase,App,Vを接頭辞にする ・単一インスタンスの場合はTheをつける |
| コンポーネントの記述 | パスカルケース or ケバブケース |
<UserList /> <user-list />
|
・HTML内 → ケバブケース ・コンポーネント内 → パスカルケース or ケバブケース |
| コンポーネントの登録 | パスカルケース | components: { UserList } |
|
| data | キャメルケース | data() { return { firstName } } |
・関数で返す(必須) |
| メソッド名 | キャメルケース | hundleClick |
|
| イベント名 | ケバブケース | create-button-click |
・末尾は不定形の動詞、名詞にすること |
| propsの受け渡し側 | ケバブケース | first-name |
|
| propsの受け取り側 | キャメルケース | firstName |
##ファイル名
・複数単語にする
・パスカルケース or ケバブケース
・親子関係の場合、親の名前を接頭辞にする
・最高レベルの単語からはじめて修飾語で終わる
・ベースとなるコンポーネントはBase,App,Vを接頭辞にする
・単一インスタンスの場合はTheをつける
###複数単語にする
❌
Todo.vue
⭕️
TodoList.vue
これは、タグ名の衝突が起きてしまう可能性があるためです。
###パスカルケース or ケバブケースにする
❌
user_list.vue //スネークケース
userList.vue //キャメルケース
⭕️
user-list.vue //ケバブケース
UserList.vue //パスカルケース
単一ファイルコンポーネント のファイル名は、すべてパスカルケース (PascalCase) にするか、すべてケバブケース (kebab-case) にするべきです。
やはり注意点としては、大文字と小文字を混合させずに統一することです。
###強い結合関係がある場合、親の名前を接頭辞にする
強く関連するコンポーネント同士では、親となるコンポーネント名を接頭辞にすることが推奨されてます。
❌
components/
├ UserList.vue
├ UserItem.vue
├ UserButton.vue
⭕️
components/
├ UserList.vue
├ UserListItem.vue
├ UserListItemButton.vue
###最高レベルの単語からはじめて修飾語で終わる
関連するコンポーネントが一目でわかるように、最も関連する名詞を接頭辞にして、その修飾を後ろに書くやり方が推奨されてます。
❌
components/
|- ClearSearchButton.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- ExcludeFromSearchInput.vue
⭕️
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
コンポーネントの数が膨大になった場合、関連するフォルダを作ってその配下に入れるやり方でもOK。
(上の例だと、serachフォルダを作って、その配下にコンポーネントを入れる)
###ベースとなるコンポーネントは接頭辞をBase, App, Vにする
❌
components/
|- VueInput.vue
|- MyButton.vue
|- Modal.vue
⭕️
components/
|- BaseInput.vue
|- BaseButton.vue
|- BaseModal.vue
-------------
components/
|- AppInput.vue
|- AppButton.vue
|- AppModal.vue
-------------
components/
|- VInput.vue
|- VButton.vue
|- VModal.vue
###単一インスタンスの場合はTheをつける
ページごとに一つしか使われないコンポーネントは、プレフィックスにTheをつけること。
❌
components/
|- VueHeader.vue
|- MySidebar.vue
⭕️
components/
|- TheHeader.vue
|- TheSidebar.vue
##単一コンポーネント内の命名規則
※ 以下、<script>タグ等は省略します。
##コンポーネントの登録(ES2015の場合)
・パスカルケース
❌
export default {
components: {
'user-list': UserList
}
}
⭕️
export default {
components: {
UserList
}
}
##コンポーネントの記述
・パスカルケース
・自己終了形式
❌
<!-- パスカルケースじゃない -->
<!-- 自己終了形式じゃない -->
<user-list></user-list>
⭕️
<UserLiset />
[補足]
ほとんどのプロジェクトでは、コンポーネント名は 単一ファイルコンポーネント と文字列テンプレートの中では常にパスカルケース(PascalCase)になるべきです。 - しかし、 DOM テンプレートの中ではケバブケース(kebab-case)です。
この記事では単一ファイルコンポーネント内での記述方法を紹介していますが、DOMテンプレート内に記述するものはケバブケースにすべきです。
正確には以下を参考に。
<!-- 単一ファイルコンポーネント、文字列テンプレート、JSX の中 -->
<MyComponent />
<!-- DOM テンプレートの中 -->
<my-component></my-component>
これは、HTMLがカスタム要素の自己終了形式を許可していないためです。
##data
・関数で返す
・プロパティはキャメルケース
❌
export default {
data: { // 関数で返してない
first-name: 'suzuki' // プロパティがケバブケースになってる
}
}
⭕️
export default {
data () {
return {
firstName: 'suzuki'
}
}
}
##メソッド名
・キャメルケース
❌
export default {
methods: {
hundle-click() { //ケバブケースになってる
console.log("clickしたよ")
}
}
}
⭕️
export default {
methods: {
hundleClick() {
console.log("clickしたよ")
}
}
}
computedなども同様
##propsの受け渡し
・渡す側 → ケバブケース(user-count)
・受け取る側 → キャメルケース(userCount)
###渡す側 → ケバブケース
❌
<UserListItem
firstName="suzuki"
last_name="itiro"
/>
⭕️
<UserListItem
first-name="suzuki"
last-name="itiro"
/>
###受け取る側 → キャメルケース
❌
export default {
props: {
first-name: String // ケバブケースになってる
last_name: String // スネークケースになってる
}
}
⭕️
export default {
props: {
firstName: String
lastName: String
}
}
##イベント名
・ケバブケース
・末尾は不定形の動詞、名詞にすること
❌
<template>
<!-- キャメルケースになってる -->
<button @click="this.$emit('CreateButtonClick')"></button>
<!-- 末尾が不定形の動詞で終わってない -->
<button @click="this.$emit('click-on-create-button')"></button>
</template>
⭕️
<template>
<button @click="this.$emit('create-button-click')"></button>
</template>
##まとめ
ざっくりとしたイメージですが、
迷ったら以下のように考えると自然な形になるのかなと思います。(後は適宜使い分けていただけると！)
・ファイル名 → パスカルケース
・HTML内 → ケバブケース
・JS内 → キャメルケース
公式
https://vuejs.org/v2/style-guide/
https://jp.vuejs.org/v2/style-guide/index.html
Qiita参考
https://qiita.com/isuke/items/3572e3b1c3677961f127
https://qiita.com/suin/items/e4d6a0e0d4912fbf9b77