camelCase・snake_case・kebab-caseの使い分け

camelCase、snake_case、kebab-case の使い分けは、主に名前がどこで使われるかで決まります。JavaScript と Java は camelCase（firstName）、Python、Ruby、SQL は snake_case（first_name）、CSS、HTML の属性、URL は kebab-case（first-name）を使います。言語の慣習とチームのスタイルガイドに従いましょう。文字の大文字・小文字を変えるには、無料の大文字・小文字変換ツールとURLスラッグ生成ツールで、ほとんどの作業をブラウザ上で行えます。

一目でわかる違い

形式	例	よく使われる場所
camelCase	userFirstName	JavaScript と TypeScript の変数や関数、Java のメソッド、多くのWeb APIのJSON
PascalCase	UserFirstName	多くの言語のクラス名、React のコンポーネント、C# のメソッド
snake_case	user_first_name	Python の変数や関数、Ruby、SQL の列名、多くのJSON API
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	多くの言語の定数、環境変数
kebab-case	user-first-name	CSS のプロパティやクラス名、HTML の属性、URL、ファイル名、CLI のフラグ

名前の由来は形にあります。camelCase は大文字が「こぶ」のように盛り上がり、snake_case は下線で平らに並び、kebab-case の単語はハイフンで串刺しになったように見えます。

言語ごとの違い

JavaScript と TypeScript。 変数と関数は camelCase（getUserName）、クラスと React のコンポーネントは PascalCase（UserCard）、定数はよく SCREAMING_SNAKE_CASE（MAX_RETRIES）です。getElementById や toLowerCase のように、言語の組み込み機能もこの規則に従っています。

Python。 Python の書き方の指針である PEP 8 では、関数、変数、モジュール名に snake_case、クラスに CapWords（PascalCase）、定数に大文字と下線を使います。Python で getUserName と書くこともできますが、そのコードを読むすべての Python 開発者には場違いに見えるでしょう。

CSS と HTML。 CSS のプロパティは kebab-case（background-color、font-size）で、多くのクラス名もこれに倣います（.nav-item、.card-title）。HTML の data- 属性も kebab-case で、ブラウザが JavaScript 向けに変換します。data-user-id は element.dataset.userId になります。この1行が、2つの規則が併存する理由をよく表しています。

SQL とデータベース。 列名やテーブル名は通常 snake_case（created_at、order_items）です。多くのデータベースでは、引用符で囲まれていない名前は1つの大文字・小文字に統一されるため、createdAt は引用符を毎回付けないと、いつの間にか createdat になってしまうことがあります。snake_case なら、この問題を避けられます。

URL とファイル名。 kebab-case を使いましょう。Google の URL 構造に関するガイドラインでは、単語の区切りにアンダースコアではなくハイフンを推奨しています。ハイフンは単語の区切りが明確だからです。小文字に統一すると、About.html と about.html を別のファイルとして扱うサーバーでのリンク切れも防げます。URLスラッグとはとURLスラッグのベストプラクティスもご覧ください。

JSON と API。 唯一の決まりはありません。JavaScript 中心の API では camelCase が多く、Python や Ruby のバックエンドは snake_case を返すことが多いです。API ごとに1つ選び、同じレスポンス内では混在させないようにしましょう。

どれが一番読みやすいか？

どれも、慣れれば読みやすくなります。実際の違いはいくつかあります。

• snake_case と kebab-case は単語の間に明確な区切りがあるため、長い名前や頭字語を扱うときに便利です（html_parser と htmlParser と HTMLParser）。
• camelCase は短く、余分な記号が要りません。
• kebab-case はほとんどの言語で変数名に使えません。user-name は「user マイナス name」と読まれてしまうからです。
• ダブルクリック すると、多くのエディターでは snake_case や camelCase の名前全体が選択されますが、kebab-case ではハイフンで止まることが多いです。

本当に大切なのは一貫性です。userName、user_name、UserName が混在するファイルは、どれか1つの形式で統一されたファイルより読みにくくなります。

変換の方法

データの層の間で値を移すときに、変換が必要になります。たとえば、Python API の created_at を JavaScript の createdAt にする、ページタイトルを URL にする、設定名を環境変数にする、といった場合です。

kebab-case や snake_case への変換：URLスラッグ生成ツールを使います。 単語を1行に1つずつ貼り付け、kebab-case なら ハイフン (-)、snake_case なら アンダースコア (_) を選びます。すべて小文字にし、アクセント付きの文字を通常の文字に変え、記号を取り除きます。どの記号も単語の区切りとして扱うので、user_first_name は user-first-name になり、その逆も行えます。ただし camelCase は分割されません。userFirstName は userfirstname になります。先に単語の間にスペースを入れてください。

SCREAMING_SNAKE_CASE への変換。 まずURLスラッグ生成ツールで snake_case にし、それを無料の大文字・小文字変換ツールに貼り付けて 大文字 をクリックします。逆方向では、小文字 をクリックすると MAX_RETRIES が max_retries になります。

camelCase や PascalCase への変換。 ワンクリックのボタンはありません。最も早い方法は、単語をスペースで区切って入力し、大文字・小文字変換ツールで 各単語の先頭を大文字 をクリックすることです（user first name は User First Name になります）。その後、PascalCase ならスペースを削除し、camelCase なら先頭の文字を小文字にします。

コード内の多数の名前を一度に変える。 大規模なリネームでは、エディターの正規表現による検索と置換を使います。置換の前に無料の正規表現テスターでパターンを試してください。たとえば _([a-z]) は、下線の後に続く文字を見つけます。これは、snake_case を camelCase にするときに大文字にすべき場所です。多くのエディターは、置換側で取り込んだ文字を大文字にできます。構文はエディターのドキュメントで確認してください。

変換時に注意すること

• 頭字語。 userId にするか userID にするか、HtmlParser にするか HTMLParser にするかを決め、統一しましょう。
• 数字。 address_line_2 はきれいに変換でき、addressLine2 でも問題ありません。数字を落とさないようにしてください。
• 公開されている名前。 JSON のフィールド名や URL を変えると、それを使っている人が困ります。URL にはリダイレクトを設定し、API では古いフィールド名もしばらくは使えるようにしておきましょう。

テキストを変換する

大文字、小文字、各単語の先頭を大文字にするには、無料の大文字・小文字変換ツールを使ってください。kebab-case と snake_case には、URLスラッグ生成ツールを使います。どちらもブラウザ内で動作し、貼り付けた内容が端末の外に出ることはありません。