記事一覧へ戻る
読了 約 5

キャメル / スネーク / ケバブ / パスカル - 命名規則の使い分け完全ガイド

#development

執筆: デジタル道具屋 編集部 / コードレビュー担当

複数言語のプロジェクトをまたがって開発する中で、コードレビューと命名規則ガイドラインの策定に関わってきた編集チームです。

本記事の執筆方針と編集ポリシーについてはAbout ページをご覧ください。

導入:「命名規則がバラバラ」がチーム生産性を落とす

男の子
男の子
「博士、コードレビューで『命名統一しろ』ってまた指摘されたんだぜ。userIduser_id って一緒の意味じゃんかよ!」
博士
博士
「意味は同じでも、混在するとバグの温床になるのじゃ。JSON.parse(text).user_id と書くつもりが userId と書いてしまい、データが取れない。デバッグに 30 分溶けるパターンじゃよ。」
女の子
女の子
「言語やコンテキストごとに『正解』が違うのが厄介なのよね。Python は snake_case、JavaScript は camelCase、URL は kebab-case、環境変数は UPPER_SNAKE_CASE、と。」

1. 主要な命名規則と語源

名前主な使用先
camelCaseuserNameJS/TS, Java, Swift の変数・関数
PascalCaseUserProfileクラス、React コンポーネント、型名
snake_caseuser_namePython, Ruby, DB カラム名
kebab-caseuser-profileURL、CSS クラス、HTML 属性、ファイル名
SCREAMING_SNAKE_CASEAPI_BASE_URL定数、環境変数
Train-CaseX-Request-IdHTTP ヘッダー名
博士
博士
「キャメルは『ラクダのこぶ』のように凸が並ぶ形、スネークは『下線でつなぐ蛇のような形』が由来じゃ。ケバブは串に刺さった具材、というわけじゃな。」

2. 「どこで何を使うか」の実務早見表

レイヤごとの推奨命名規則
  • JavaScript / TypeScript の変数・関数:camelCase(fetchUserList
  • クラス・型・React コンポーネント:PascalCase(UserCard
  • 定数・環境変数:SCREAMING_SNAKE_CASE(NEXT_PUBLIC_API_URL
  • DB のテーブル・カラム名:snake_case(created_at
  • URL・スラッグ:kebab-case(/user-profile
  • CSS クラス:kebab-case(hero-banner)または BEM(hero__title--large
  • HTML 属性・カスタムデータ属性:kebab-case(data-user-id
  • ファイル名:kebab-case が無難(user-profile.tsx)。ただし React 系は PascalCase ファイル名も多い
  • HTTP ヘッダー:Train-Case(X-Request-Id

3. 「API の JSON 命名」問題

男の子
男の子
「API の JSON のキーって camelCase? snake_case? 毎回迷うんだぜ。」
博士
博士
「これはチーム文化と利用言語による、というのが正直なところじゃ。」

Twitter(X)API や GitHub API の旧版は snake_case、Stripe や AWS の新世代 API は camelCase が多い印象です。 日本国内では、Rails 由来のサービスが snake_case を使い続けている例も多いです。

選定の指針

  • クライアントが JS/TS のみ → camelCase(フロントで変換不要)
  • クライアントが Python・Ruby も含む → snake_case(多数派が幸せ)
  • どちらでも構わないなら、チーム内で1つに統一することが最優先

両方を共存させたい場合、サーバー側で snake_case ↔ camelCase の自動変換ミドルウェアを使う手もあります。 ただし「URL のクエリパラメータが snake_case で、レスポンスは camelCase」のようなチグハグは避けましょう。

4. 国際化・記号の扱い

日本語をそのまま使うべきか

URL スラッグは ASCII の kebab-case が無難です。/about-us のように。 Unicode URL(/会社情報)は技術的には可能ですが、SNS 共有時にパーセントエンコードされて見づらくなります。

略語の大文字化

parseHTMLparseHtml か、悩みどころです。Google JavaScript Style Guide は「最初の文字以外は通常の小文字扱い」を推奨:XmlHttpRequest ではなく xmlHttpRequestparseHtml です。

女の子
女の子
「私のチームでは userIdapiUrlhtmlContent と完全に小文字統一する派よ。parseHTMLString って書くと、parseHTMLstring なのか parse HTML string なのか境界が不明瞭になっちゃうから。」

5. 一括変換ツールで一気に揃える

既存コードや CSV のヘッダーを一括変換したい場合は、大文字・小文字変換ツールが便利です。 文章入力からクリック1つで camelCase / snake_case / kebab-case / PascalCase / SCREAMING_SNAKE_CASE に変換できます。

関連: スラッグ生成(日本語タイトルから URL 用 slug を作成)、Diff ツール(命名統一前後の差分確認)。

🚨 現場の失敗あるある

DB は snake_case、API レスポンスは camelCase、しかし途中の Repository 層で snake_case のまま返している箇所が残っており、 フロントで user.created_atuser.createdAt が混在 — というプロジェクトを何度か見ています。 型定義(TypeScript)を導入し、API スキーマを正にして自動生成する仕組みを早めに入れると、 こうした命名の漏れが圧倒的に減ります。

参考にした一次情報

本記事の内容は、以下の公式仕様や一次情報を参照して執筆しています。

この記事の内容を実際に試す

解説した内容は、以下のツールでブラウザ上から無料で試せます。