3秒でわかる
単語の切れ目を大文字で示す命名規則。userName のように空白を使えない識別子を読みやすく保つため、JavaScript や Java で広く使われます。
もう少し詳しく
どういうものか
複数の単語をつなげて 1 つの識別子にするとき、2 語目以降の先頭を大文字にして切れ目を示す書き方をキャメルケースと呼ぶ。userName の N のように、大文字がラクダのこぶのように盛り上がって見えるのが名前の由来である。
先頭の語を小文字で始める userName を lowerCamelCase、先頭も大文字にする UserName を UpperCamelCase (別名 PascalCase) と呼び分ける。JavaScript や Java では変数名と関数名に lowerCamelCase、クラス名とコンポーネント名に UpperCamelCase を使うのが慣習になっている。
なぜ必要か
プログラムの識別子には空白を入れられない。user name と書くと 2 つの語と解釈されて構文エラーになる。かといって username とベタ書きすると、inputtext や getuserdata のように語の切れ目が読み取れず、読み違えが起きる。
区切りを表す方法は他にもスネークケース (user_name) やケバブケース (user-name) があるが、ケバブケースは多くの言語で減算演算子と衝突するため識別子には使えない。キャメルケースは追加の記号を使わずに区切りを表せる点で、文字数も短く済む。
具体例
// lowerCamelCase ── 変数と関数
const userName = "sakura";
const itemCount = 12;
function fetchUserData(id) {
return fetch(`/api/users/${id}`).then((r) => r.json());
}
// UpperCamelCase ── クラスと React コンポーネント
class ShoppingCart {}
function ProfileCard({ userName }) {
return <p>{userName}</p>;
}HTML の data- 属性は kebab-case で書くが、JavaScript から読むときは自動でキャメルケースに変換される。
<div id="box" data-user-id="42"></div>
<script>
const el = document.getElementById("box");
console.log(el.dataset.userId); // "42" ── userId とキャメルケースになる
</script>つまずきやすいところ
頭字語の扱いで揺れる。userID と userId、parseHTML と parseHtml はどちらも見かける。Google の JavaScript スタイルガイドは後者、つまり頭字語も 1 語として扱う userId を採る。チーム内でどちらかに寄せておかないと、getURLParams と getUrlParams が同居して補完が効かなくなる。
もう 1 つは Python との混同である。Python は変数と関数がスネークケース、クラスだけ UpperCamelCase という規約 (PEP 8) なので、JavaScript の感覚で def fetchUserData() と書くとレビューで指摘される。
似た用語との違い
| 記法 | 例 | 主な使い所 |
|---|---|---|
| lowerCamelCase | userName | JS/Java の変数・関数、JSON のキー |
| UpperCamelCase | UserName | クラス名、React コンポーネント |
| snake_case | user_name | Python の変数・関数、SQL の列名 |
| kebab-case | user-name | URL、CSS クラス、HTML 属性 |
| SCREAMING_SNAKE_CASE | MAX_RETRY | 定数 |
