Vue.js の勉強を始めたら、キャメルケースとスネークケース以外にもいろいろな表記ルールがあることを知ったのでまとめておく。
変数名などに複数の単語を組み合わせた名前をつけたいとき、変数名には基本的にスペースを入れられないので、単語の区切りを何で表現するかというルールがいくつかある。
hello world
という名前をつけたい場合を考える。
キャメルケース
単語の頭の文字を大文字で表記。全体の先頭の文字は、大文字の場合と小文字の場合とがある。キャメル(camel)はラクダのこと。
HelloWorld
, helloWorld
アッパーキャメルケース、パスカルケース
先頭が大文字のキャメルケース。Ruby のクラス名など。
HelloWorld
ローワーキャメルケース
先頭が小文字のキャメルケース。JavaScript の変数名など。
helloWorld
スネークケース
単語の区切りを_
アンダースコアで表記。Ruby の変数名など。
hello_world
Ruby の定数のように全て大文字のものは、アッパースネークケースやスクリーミングスネークケース、コンスタントケースと呼ばれる。
HELLO_WORLD
ケバブケース、チェインケース
単語の区切りを-
ハイフンで表記。HTML の class 名など。-
で単語をつなぐのが、串に刺した肉の「ケバブ」のようだというのが由来らしい。
hello-world