キャメルケースへの変換方法：つまずきやすい 4 つの点
ローワーキャメルケースは、最初の語を小文字、続く語の頭文字を大文字にして区切りを省く表記です。JavaScript の変数や多くの JSON フィールドの既定で、API の項目名を揃えるとき最初に直す部分でもあります。
まとめて変換したくなる場面
API は user_name を返し、フロント側は userName を使い、デザインファイルでは User Name と書かれている。3 つや 5 つなら手で直せますが、40 個続けて直すと必ず一つ漏れます。漏れた名前は画面に出るエラーではなく、実行時の undefined として後から見つかります。
もう一つは表から名前を作る場合です。表計算の見出し、CSV の列名、英語のフレーズ一覧を変数名や型のフィールドに変えるとき、まずまとめて変換し、そのあと略語と数字を人が確認するほうが、1 件ずつ手入力するより安定します。
- snake_case の API 項目をフロント用の camelCase に揃える
- 表の見出しから変数名や型のフィールドをまとめて作る
- 同じ批次の名前を 1 つの表記に統一する
- 学習や練習で命名の候補をすぐ得たいとき
変換の内部で起きていること
API は user_name を返し、フロント側は userName を使い、デザインファイルでは User Name と書かれている。3 つや 5 つなら手で直せますが、40 個続けて直すと必ず一つ漏れ、実行時の undefined として後から見つかります。
注意点は、キャメルケースの区切りを認識しないことです。もともと userProfile を入れると、小文字化した時点で区切りがなくなり、userprofile につぶれます。userID は userid、APIKey は apikey となり、略語の大文字情報は失われるため、変換後に手で戻す必要があります。
- 入力は先にスペースかハイフン区切りに揃える
- すでにキャメルケースの名前は区切りを手で入れる
- ID、URL、API などの略語は変換後に戻す
- 数字は隣の語に吸収される（3d model → 3dModel）
- 漢字は英数字ではないため削除される
命名規約に唯一の正解はない
手順は 2 つだけです。全体を小文字にし、「英数字以外の連続した文字と直後の 1 文字」を大文字に置き換えます。スペース、ハイフン、下線、ピリオド、括弧はすべて消え、user profile も user-profile も user_profile も userProfile になります。
注意点は、キャメルケースの区切りを認識しないことです。userProfile を入れると小文字化の時点で区切りがなくなり、userprofile につぶれます。userID は userid、APIKey は apikey となり、略語は変換後に手で戻します。
- ツールの出力よりプロジェクトの lint 設定を優先する
- 1 つのプロジェクト内では 1 つの表記に統一する
- 略語の大文字小文字はチームの規約に合わせる
- 変換後に既存の名前と重複していないか検索する
よくある質問
キャメルケースとパスカルケースの違いは何ですか？
camelCase は userName のように最初を小文字にし、PascalCase は UserName のように各語を大文字にします。JavaScript では変数やメソッドに前者、クラスやコンポーネントに後者を使うことが多く、選択は言語とチームの規約で決まります。
userProfile が userprofile になったのはなぜですか？
変換が先に全体を小文字化し、そのあと英数字以外の文字で区切るためです。userProfile には区切りがないのでキャメルの境目が認識されず、1 語として扱われます。語を残したい場合は user profile か user_profile に直してから変換してください。
JSON の項目名が camelCase と snake_case で混ざるのはなぜですか？
言語やサービスの慣習が違うためです。JavaScript の界隈は camelCase、Python や Ruby の界隈や Stripe などの API は snake_case を使います。連携先のドキュメントに合わせ、1 つのデータの中で混在させないでください。
関連ツール：キャメルケース変換