camelCase・snake_case・kebab-case:命名規則ガイド

「コンピュータサイエンスで難しいことは 2 つだけ:キャッシュの無効化と命名だ。」命名は何と呼ぶかだけでなく、どのスタイルで書くかも重要です。言語やエコシステムごとに好まれる規則が異なり、混在させるとコードが雑に見えます。実用的なガイドをどうぞ。

同じ文字列を各命名規則で。 the lord of the rings: return of the king を大文字小文字変換に通した結果:

camelCase   theLordOfTheRings:ReturnOfTheKing
PascalCase  TheLordOfTheRings:ReturnOfTheKing
snake_case  the_lord_of_the_rings:_return_of_the_king
kebab-case  the-lord-of-the-rings:-return-of-the-king

コロンの行方に注目してください。camel と Pascal では残り、snake と kebab では消えます。後者は語以外の文字をすべて区切りとして扱うからです。これが実務上の指針です。snake と kebab がファイル名や URL に向くのは、まさに句読点を捨てるからで、camel と Pascal は与えたものをそのまま保ちます。

主なスタイル

• camelCase — 先頭は小文字、以降の各語頭は大文字:myVariableName。JavaScript や Java などで変数・関数の既定。
• PascalCase(UpperCamelCase)— 各語頭を大文字:MyVariableName。クラス・型・React コンポーネントに使用。
• snake_case — すべて小文字、アンダースコアで連結:my_variable_name。Python と Ruby の変数・関数の標準。データベースのカラム名でも一般的。
• kebab-case — すべて小文字、ハイフンで連結:my-variable-name。URL・CSS クラス・ファイル名に使用。(多くの言語では識別子に使えません。ハイフンがマイナスと解釈されるためです。)
• CONSTANT_CASE(SCREAMING_SNAKE_CASE)— すべて大文字とアンダースコア:MAX_RETRY_COUNT。慣例的に定数・環境変数に使用。

どの言語がどれを使う?

命名規則は「このコードに馴染んでいる」ことの強い signal です:

• JavaScript / TypeScript — 変数・関数は camelCase、クラス・型は PascalCase、真の定数は CONSTANT_CASE。
• Python — 関数・変数は snake_case、クラスは PascalCase、モジュール定数は CONSTANT_CASE(PEP 8)。
• Go — 公開名は PascalCase、非公開は camelCase。
• CSS — クラス名(.main-nav)やカスタムプロパティ(--brand-color)は kebab-case。
• URL・ファイル名 — 読みやすく URL に安全なため kebab-case が好まれます(/blog/my-post)。

Title Case vs Sentence case

コードではなく文章に適用する 2 つのスタイルもあります:

• Title Case は各単語の頭文字を大文字にします——見出し向け(「A Naming Conventions Guide」)。
• Sentence case は行全体の最初の文字だけを大文字にします——より自然に読めるため、UI ラベルや見出しで人気が高まっています。

スタイル間の変換

名前をあるスタイルから別のスタイルへ変換することはよくあります——例えばデータベースのカラム created_at(snake_case)を API の JSON フィールド createdAt(camelCase)に変える、など。手作業は面倒でミスも起きやすいものです。

当サイトの大文字小文字変換ツールならワンクリックです。名前や語句を貼り付けると、UPPERCASE、lowercase、Title Case、Sentence case、camelCase、PascalCase、snake_case、kebab-case、CONSTANT_CASE の間で即座に切り替えられます。

4 つのスタイルを並べました。私たちの大文字小文字変換ツールの出力そのままです:

入力	camelCase	PascalCase	snake_case	kebab-case
user first name	userFirstName	UserFirstName	user_first_name	user-first-name
HTTP response code	httpResponseCode	HttpResponseCode	http_response_code	http-response-code
iPhone 15 Pro Max	iPhone15ProMax	IPhone15ProMax	i_phone_15_pro_max	i-phone-15-pro-max
XMLHttpRequest	xmlhttpRequest	XmlhttpRequest	xmlhttp_request	xmlhttp-request

いくつかのコツ

• プロジェクト内で一貫させる。 どの規則を選ぶかより、全体で統一することのほうが大切です。
• 言語の慣用に従う。 JavaScript で snake_case(あるいは Python で camelCase)を書くと、そのコードは浮いて見えます。
• CONSTANT_CASE は控えめに — 真の定数と環境変数だけに。

スタイルが整えば、コードは最初からそこに属していたかのように読めます。次に名前を作り直すときは、無料の大文字小文字変換ツールをお試しください。

このうち 2 行は警告を含みます。HTTP response code は httpResponseCode になります。略語が http に平坦化されるのは、多くのスタイルガイドが識別子で実際に望む形ですが、これは中立な変換ではなく 1 つの決定です。iPhone 15 Pro Max は i_phone_15_pro_max に。変換器は iPhone 内部の切り替わりで分割し、i_ が孤立して残ります。機械的な再キャスティングは普通の語には信頼できます(user-first-name)が、略語やブランド名が絡んだ瞬間に信頼できなくなります。実行したら読み返してください。