コーディング時にちゃんと意識したい複数語の連結方法一覧(キャメルケース・スネークケース・ケバブケース)

ファイル名や変数名、コーディング時に複数の単語を組み合わせる必要が出てきます。
しかし、コードでは「全角半角共にスペースは使用しない」という制約があります。
この制約の中、単語間の区切りを分かりやすくするための書き方がいくつかあります。
連結方法一覧
自分が確認できた連結方法の一覧です。
| 名前 | 特徴 | 例 | 別名 |
|---|---|---|---|
| キャメルケース | 最初の単語以外の先頭を大文字にする | camelCase | ローワーキャメルケース バイキャピタライゼーション インターキャプス ミックストケース |
| スネークケース | 単語間をアンダーライン(_)でつなぐ | snake_case | |
| ケバブケース | 単語間をハイフン(-)でつなぐ | kebab-case | チェインケース |
| パスカルケース | 全ての単語の先頭を大文字にする | PascalCase | アッパーキャメルケース |
| コンスタントケース | 全て大文字で単語間をアンダーライン(_)でつなぐ | CONSTANT_CASE | アッパースネークケース |
別名や細かい確認に関しては、下記記事・ページを参考にしました。ありがとうございます。
- Camel case – Wikipedia
- Snake case – Wikipedia
- 変数名や関数名の名前の付け方 – CodeAid(コードエイド)
- 命名規則「キャメルケース」「スネークケース」「ケバブケース」についてまとめてみました | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
どれを使うべきか?
悩ましいのが「色々連結方法があるのは分かったけど、どれを使えばいいの?」という問題です。
結論から言うと「前例がなければどれを使ってもいい」と思いますが、結局は使っている言語によって暗黙のルールが存在したり、非常に難しいです。
既存のルールに従う
例えば既にコーディングが進められていて、途中から参加した場合、既に書かれてある連結方法に合わせて書かないと、見にくいコードになってしまいます。
また、BEMのような命名規則を採用している場合は、Elementはアンダースコア2つ、Modifierはハイフン2つと決まっています。
こうしたルールが決まっている場合はそのルールに従う必要があります。
暗黙のルールに従う
例えば、HTMLのid属性をつける時は、キャメルケースが一般的に多く使われています。
おそらく、class名がスネークケースかケバブケースになることが多いため、あえて区別をつけるためだと思います。
また、idはJavaScriptで処理する要素につける事が多く、JavaScriptはキャメルケースが多く使用されているため、それと合わせているのかもしれません。
読みやすさに従う
読みやすさの話をしてしまうと「そんなの人による」となってしまうのですが、個人的にはスネークケースが1番読みやすいです。
例えば、「I have a pen.」という英文があったとします。
それをそれぞれの連結方法に置き換えてみます。
- i_have_a_pen(スネークケース)
- i-have-a-pen(ケバブケース)
- iHaveAPen(キャメルケース)
- I_HAVE_A_PEN(コンスタントケース)
こうして見比べてみると、一般的な英文に最も近い形になるのはスネークケースです。
ケバブケースも近くはなりますが、ハイフンは上下真ん中に線がくるのに対して、スネークケースはアンダースコアなので、読むのを邪魔しません。
そのため、自分は上記で説明したような制約がない場合はスネークケースを使うようにしています。

gulp-sass 5の「does not have a default Sass compiler」エラーを解消する
アイコンフォントをPCにインストールしている場合は、コーディング後の確認に注意
スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
Safari 12.1から外観モード(ライト/ダーク)の判定をCSSで行えるように!
Movable TypeでAssetURLやEntryPermalink・ContentPermalinkで出力されるパスを絶対パスから相対パスに変える
Dashで「Secure Input is Enabled」と表示される場合の対処法
CSSのz-indexの確認や管理を便利にする方法
GUIコンパイラのPreprosを使ってSassのコンパイルを行う
Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compiler and Sass Watcher」
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)
Obsidianを使った「自己流PKM」で行う知識トレーニング
テキストエディタ・ノートアプリ関連のショートカットキーをKeyboard Maestroで統一する
Path Finderを使ってキーボードだけでファイル操作する方法(応用編)
macOSのコマンドパレット比較!SpotlightとAlfred、Raycastどれを使えばいい?
1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」