Help us understand the problem. What is going on with this article?

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

早見表

記法 正しい例 推奨や補足
ファイル名 パスカルケース
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.vu

⭕️

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

ngron
目がしんどい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした