【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】 #Vue.js

早見表

	記法	正しい例	推奨や補足
ファイル名	パスカルケース or ケバブケース	`UserList.vue` `user-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