ラクダと蛇とケバブとパスカルとアッパー？？？

目次
・ラクダ？蛇？ケバブ？・・・
・HTMLとフロントエンドのややこしい関係

●ラクダ？蛇？ケバブ？・・・

ラクダ？蛇？ケバブ？・・・これを聞いても多くの方々には一体なんのことだかわからないと思われますが、SWエンジニアを、特にjavascriptを用いてSW開発をやってると、避けて通れない結構煩わしい問題です。

よく言われる他の似たような問題としては、「ファイル名を英小文字だけで記述するか、大文字小文字を混ぜて記述するか」って問題と似たところがありますね。

OSにwindows, OSXを使っているとファイル名の大文字小文字は区別されませんが、Linux系のOSではファイル名の大文字と小文字は区別されます。昨今開発環境としてOSXやLinuxを選ばれる人が多いので、ファイル名の問題でトラブルことも多々あります。

さて、ラクダと蛇とケバブですが、変数名やタグ名に命名規則として使われることが多いです。

ラクダとは「キャメルケース」のことです。
複合語の各単語の頭文字を大文字で記述し、先頭の単語だけは頭文字を小文字にします。
ラクダのコブのように見えるからこのように呼ばれるようです。
例として

・ sampleCamelCase

みたいな。

蛇とは「スネークケース」のことです。
こっちは複合語の語間を「アンダーバー」で繋ぐ命名規則です。
蛇がうねっているように見えるからこのように呼ばれるようです。
例として

・sample_snake_case

みたいな。

ケバブとは「ケバブケース」のことです。（そのままですいません）
こっちはスネークケースの「アンダーバー」を「ハイフォン」に変更したものです。
串刺しのように見えるからこのように呼ばれるようです。
例として

・sample-kebab-case

みたいな。

他にも「アッパーケース」や「パスカルケース」なんてものもあり、どれを好むという訳ではないですが、使う所々で「使った方が可読性や通知性があがる」ものもあります。

ちなみに、

アッパーケースは、すべて大文字で表記します。複合語間を繋ぐものはアンダーバーです。

例：　UPPER_CASE

パスカルケースは、複合語の先頭も文字を大文字にする命名規則ですね。

例：PascalCase

●HTMLとフロントエンドのややこしい関係

最近、JavaScriptのフロントエンドとしてVue.jsをよく使うようになりました。

Vue.jsとは

Vue.js

で、angular, Reactと並ぶJavaScript界フロントエンドの御三家の１つですね。

初心者でも段階を踏んで学習でき、その割に高機能なので、肩に力を入れずに始めることができると思います。

Vue.jsをはじめ多くのフロントエンドではHTML要素をDOMとして扱います。
Vue.js（やReact）は仮想DOMと呼ばれる機構を用いて、高速な描画を実現しています。

DOM操作と言えばJQueryを思い出す人もいると思いますが、Vue.js等を使うとかなりスマートに記述できると感じます。

また、コンポーネント指向なので、多くの描画部品をコンポーネントと呼ばれる部品にパッケージングして、再利用性を高めています。

しかし、この「コンポーネント」の部分で、ちょっと面倒なところもあります。

スタイルガイド — Vue.js

Vue.jsのスタイルガイドからの引用ですが、以下のような記述があります。

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

ここで注釈として「DOM テンプレートの中ではケバブケース(kebab-case)です」と書かれています。

他の記述として

残念ですが、HTML は大文字と小文字を区別しないので、DOM テンプレートの中ではまだケバブケースを使う必要があります

がありました。

ふむふむ、どうやらHTMLが大文字小文字を区別しないので、PascalCaseやCamelCaseを用いると、pascalcaseとcamelcaseと区別がつかないということのようです。

具体的なプログラム部品を書かないとわかりづらいと思うので、例として

const MyComponent = {
    ・・・コンポーネントの記述
}

というコンポーネントがあったとします。

これをVueのテンプレート内に記述するとき

<div id="app">
  <MyComponent></MyComponent>
</div>

と書いてはダメだということです。

<div id="app">
  <my-component></my-component>
</div>

のようにケバブケースで書かないとならない。

じゃあ、コンポーネント定義をケバブケースで書く必要があるかというと、コンポーネント定義は

const MyComponent = {
    ・・・コンポーネントの記述
}

のままでOKです。

Vue.jsのエンジンがパスカルケースのコンポーネントをDOMテンプレート内ではケバブケースで判断してくれる、ってことのようです。

これって親切なのか、余計なお世話かわかりませんね。
定義したコンポーネントがDOMテンプレート中のどこに使われているかを「文字列検索」で検索しても、PascalCase→kebab-caseに変換されているのでヒットしようがありません。

visual studio codeのコーディング補完機能では、コンポーネント定義を検出して、DOMテンプレート内にコンポーネントを記述する際に自動的にケバブケースに変換してくれる機能もあります。

このように開発環境を使っていると補完してくれたりするのですが、ただのエディタで記述した場合はこのように補完はしてくれません。

大文字小文字の変換くらいなら、検索のオプションで無効化できますが、文字列自体が変換されちゃってるので、探しようがないのですよね。

とはいえ、いまさらHTMLが大文字小文字を区別するようになったら、もっと混乱するので、そこに手をつけるのはもう無理でしょう。

書き方って結構習慣になっているので、自分でも知らないうちにどっちかに書き方が偏ります。

visual studo codeって書いたり、VisualStudioCodeって書いたり、、、。
まあ、このくらいは大目に見ていただきましょうか。

では、今回はこの辺で。