camelCase とは
camelCase(キャメルケース)は、単語をスペースなしでつなげる書き方です。最初の単語は小文字のまま、2つ目以降の単語はすべて大文字で始めます。
first nameはfirstNameになりますtotal_order_countはtotalOrderCountになりますis-logged-inはisLoggedInになります
プログラミング言語では名前にスペースを使えないため、どこで単語が区切れているかを示す方法が必要です。camelCase はそれを大文字で表します。
ツールがテキストを読み取る仕組み
ツールは単語の区切りを見つけてから、それらをつなげます。区切りとして扱うのは次のものです。
- スペースとタブ
- アンダースコア、ハイフン、ドット、スラッシュ
- 小文字の直後の大文字。たとえば
UserNameは「User」と「Name」として読み取ります
そのうえで最初の単語を小文字にし、残りの単語の先頭を大文字にして、区切り文字を取り除きます。アポストロフィは削除されるので、「don’t stop」は dontStop になります。数字は残ります。
全角スペースも区切りとして扱われるので、日本語入力のまま「user first name」と入力しても userFirstName になります。一方、日本語の単語はそのまま残ります(「user 名前 id」は user名前Id)。また、全角の英字は全角のまま出力されるため、変数名に使う場合は英単語を半角で入力してください。
各行は個別に処理されます。データベースのフィールドの列や JSON のキーの一覧も、一度に変換できます。
| 入力 | 出力 |
|---|---|
| user first name | userFirstName |
| order_total_amount | orderTotalAmount |
| background-color | backgroundColor |
| GetUserById | getUserById |
| API response code | apiResponseCode |
camelCase が使われる場所
- JavaScript と TypeScript:変数、関数、オブジェクトのプロパティ
- Java、Kotlin、Swift:変数名とメソッド名
- JSON:多くの Web API のキー
- C#:ローカル変数と引数
- CSS in JavaScript:
background-colorの代わりにbackgroundColor
ほかの言語では別のスタイルが好まれます。Python と Ruby の変数にはスネークケース(snake_case)が使われ、ほとんどの言語のクラス名にはパスカルケース(PascalCase)が使われます。
よくある変換
snake_case から camelCase へ。 Python や SQL のバックエンドから JavaScript のフロントエンドにデータを渡すときに便利です。フィールド名を貼り付けて、リストごと変換してください。
kebab-case から camelCase へ。 CSS のプロパティや HTML の属性はハイフンを使いますが、JavaScript から読むには camelCase が必要です。たとえば data-user-id は dataUserId になります。
普通の単語から camelCase へ。 「is email verified」のような説明を入力すると、そのまま使える変数名になります。