Vue スタイルガイドに当てはまらないが、合理的だと思われるスタイル #Vue.js

Vue には公式スタイルガイドがある。スタイルガイドとはコーディングのスタイルのガイドだ。例えば具体的には、キャメルケースなのかケバブケースなのか、といったことがある。

しかし、公式スタイルガイドでは不便なところがあるので、今回のスタイルを提案したい。
以下のコードのようになる。

App.vue

<template>
  <div id="app">
    <HelloWorld 
      :superValue="'test value'"
      :IDTest="10101"
    />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

<style>
</style>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ superValue }} {{ IDTest }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: { superValue: String, IDTest: Number},
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style scoped>
</style>

以下二つの項目について検討したい。

こちらは公式と同じスタイルを本記事でも採用した。
https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended

こちらは本記事では異なるスタイルを採用した。
https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

Component の名称のケーシングについて

Single File Component では <HelloWorld/> というケバブケース以外のものを使っていい。これは公式通りである。

props の名称のケーシングについて

強い推奨の項目だが、本記事では採用しなかった。

公式スタイルガイドでは以下のように書くことになる。受ける側は公式通りである。
直感的にわかると思うが、この場合、ハイフンが増える。

<HelloWorld 
   :super-value="'test value'"
   :i-d-test="10101"
/>

<script>
export default {
  name: "HelloWorld",
  props: { superValue: String, IDTest: Number},
};
</script>

これを本記事ではこうすることを提唱したい。このスタイルは React, JSX と同じスタイルで、Vue でも問題なく動作する。

<HelloWorld 
    :superValue="'test value'"
    :IDTest="10101"
/>

このスタイルの合理性について

まず JavaScript と HTML の name casing について検討したい。

JavaScript においては、変数名は基本的にキャメルケース (const camleCase) である。クラスの場合には、先頭が大文字のキャメルケースになる class CamelCase {}

コンポーネントは Class 扱いされているのか、Vue においても React においても、先頭が大文字のキャメルケースになる <CamelCase/>

問題は props である、React では基本的にキャメルケースだが、Vue スタイルガイドではケバブケースである。しかし、受け取るときにはどちらもキャメルケースである。

ケバブケースにすることによって、props を変数とは別のケーシングに書き換える手間が多く発生する。これが必要がない、という合理性がキャメルエースにはある。