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

##早見表

|  | 記法 | 正しい例 | 推奨や補足 |
|:-:|:-:|:-:| :-- |
| ファイル名 | パスカルケース<br>or<br>ケバブケース  | `UserList.vue`<br>`user-list.vue`  | **・複数単語にする**<br>**・親子関係の場合、親の名前を接頭辞にする**<br>**・最高レベルの単語からはじめて修飾語で終わる**<br>**・ベースコンポーネントはBase,App,Vを接頭辞にする**<br>**・単一インスタンスの場合はTheをつける**<br>
|  コンポーネントの記述 |  パスカルケース or ケバブケース | `<UserList />` `<user-list />`  |  **・HTML内 → ケバブケース**<br>**・コンポーネント内 → パスカルケース 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の場合)

**・パスカルケース**

❌

```js
export default {
  components: {
    'user-list': UserList
  }
}
```

⭕️

```js
export default {
  components: {
    UserList
  }
}
```


##コンポーネントの記述
**・パスカルケース**
**・自己終了形式**

❌

```vuejs
<!-- パスカルケースじゃない -->
<!-- 自己終了形式じゃない -->
<user-list></user-list>
```

⭕️

```vuejs

<UserLiset />
```


**[補足]**

> ほとんどのプロジェクトでは、コンポーネント名は 単一ファイルコンポーネント と文字列テンプレートの中では常にパスカルケース(PascalCase)になるべきです。 - しかし、 DOM テンプレートの中ではケバブケース(kebab-case)です。

この記事では単一ファイルコンポーネント内での記述方法を紹介していますが、**DOMテンプレート内に記述するものはケバブケースにすべきです。**

正確には以下を参考に。

```vue

<!-- 単一ファイルコンポーネント、文字列テンプレート、JSX の中 -->
<MyComponent />
<!-- DOM テンプレートの中 -->
<my-component></my-component>
```
これは、**HTMLがカスタム要素の自己終了形式を許可していないためです。**

##data
**・関数で返す**
**・プロパティはキャメルケース**


❌

```js

export default {
  data: { // 関数で返してない
    first-name: 'suzuki' // プロパティがケバブケースになってる
  }
}
```

⭕️

```js

export default {
  data () {
    return {
      firstName: 'suzuki'
    }
  }
}
```

##メソッド名
**・キャメルケース**

❌

```js

export default {
  methods: {
    hundle-click() { //ケバブケースになってる
      console.log("clickしたよ")
    }
  }
}
```

⭕️

```js

export default {
  methods: {
    hundleClick() {
      console.log("clickしたよ")
    }
  }
}
```
`computed`なども同様


##propsの受け渡し
**・渡す側　→ ケバブケース(user-count)**
**・受け取る側 → キャメルケース(userCount)**

###渡す側 → ケバブケース

❌

```vue

<UserListItem
  firstName="suzuki"
  last_name="itiro"
/>
```


⭕️

```vue

<UserListItem
  first-name="suzuki"
  last-name="itiro"
/>
```

###受け取る側 → キャメルケース
❌

```js
export default {
  props: {
    first-name: String // ケバブケースになってる
    last_name: String // スネークケースになってる
  }
}
```

⭕️

```js
export default {
  props: {
    firstName: String
    lastName: String
  }
}
```

##イベント名
**・ケバブケース**
**・末尾は不定形の動詞、名詞にすること**

❌

```vue

<template>
  <!-- キャメルケースになってる -->
  <button @click="this.$emit('CreateButtonClick')"></button>
  <!-- 末尾が不定形の動詞で終わってない -->
  <button @click="this.$emit('click-on-create-button')"></button>
</template>
```

⭕️

```vue
<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