[Vue.js] ケバブケースとかキャメルケースとかパスカルケースとか

Vueでのケースの書き方って場所によって何がいいか若干悩みますよね。（私だけ？）
なので、まとめてみました。

そもそも○○○ケースって？（復習）

一言で言うと「クラス名や変数名等の名前の付け方の総称」
覚えておくべきケースをざっと説明すると。。

ケバブケース

文字と文字の区切りを-で表現するやり方。「チェインケース」とも言う。
ケバブのお肉をぶっさしている感じからきているとか。

this-case-is-god

キャメルケース

文字と文字の区切りを大文字で表現するやり方。
よく見るやつです。ラクダのこぶですね。

thisCaseIsGod

パスカルケース

文字と文字の区切りを大文字で表現＋先頭の文字も大文字にする。
それもそのはず、「アッパーキャメルケース」とも呼ばれるのだから。
これもよく見ますね。

ThisCaseIsGod

どこにどのケースを書くべきか？

基本的に下記の方針でOK

• コンポーネントは「パスカルケース」
• JavaScriptでは「キャメルケース」
• HTMLでは「ケバブケース」

記述に迷う主な例を挙げたいと思います。

コンポーネントは「パスカルケース」

<template>
  <MyComponent></MyComponent>
</template>

因みに、componentsに指定する際にパスカルケースであれば、ケバブケースでも記述できるが
ケバブケースで指定するとケバブケースでしか動かない。

<template>
  <MyComponent></MyComponent>     <!-- OK -->
  <my-component></my-component>   <!-- OK -->
  <MyComponent2></MyComponent2>   <!-- NG -->
  <my-component2></my-component2> <!-- OK -->
</template>

<script>
export default {
  components: {
    MyComponent,
    'my-component2': MyComponent2,
  }
}
</script>

props 属性は「ケバブケース」 その他は「キャメルケース」

<template>
  <MyComponent :my-data="hoge"></MyComponent>
</template>

<script>
export default {
  props: ['myData'],
}
</script>

emitは「ケバブケース」

JavaScript内だが文字列として定義しているだけで、
カスタムイベント名として使われるためケバブケース推奨

<script>
export default {
  methods: {
    hogeFunc() {
      this.$emit('my-emit')
    }
  }
}
</script>

最後に

書き終わった後に気づいたのですが、とても分かりやすい記事がありました。
参考にさせていただきます。
https://qiita.com/ngron/items/ab2a17ae483c95a2f15e