命名規則(キャメルケースとかケバブケースとか)

Vue.js の勉強を始めたら、キャメルケースとスネークケース以外にもいろいろな表記ルールがあることを知ったのでまとめておく。

変数名などに複数の単語を組み合わせた名前をつけたいとき、変数名には基本的にスペースを入れられないので、単語の区切りを何で表現するかというルールがいくつかある。

hello world という名前をつけたい場合を考える。

キャメルケース

単語の頭の文字を大文字で表記。全体の先頭の文字は、大文字の場合と小文字の場合とがある。キャメル(camel)はラクダのこと。

HelloWorld, helloWorld

アッパーキャメルケース、パスカルケース

先頭が大文字のキャメルケース。Ruby のクラス名など。

HelloWorld

ローワーキャメルケース

先頭が小文字のキャメルケース。JavaScript の変数名など。

helloWorld

スネークケース

単語の区切りを_アンダースコアで表記。Ruby の変数名など。

hello_world

Ruby の定数のように全て大文字のものは、アッパースネークケースやスクリーミングスネークケース、コンスタントケースと呼ばれる。

HELLO_WORLD

ケバブケース、チェインケース

単語の区切りを-ハイフンで表記。HTML の class 名など。-で単語をつなぐのが、串に刺した肉の「ケバブ」のようだというのが由来らしい。

hello-world