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

ファイル名や変数名、コーディング時に複数の単語を組み合わせる必要が出てきます。
しかし、コードでは「全角半角共にスペースは使用しない」という制約があります。
この制約の中、単語間の区切りを分かりやすくするための書き方がいくつかあります。
連結方法一覧
自分が確認できた連結方法の一覧です。
| 名前 | 特徴 | 例 | 別名 |
|---|---|---|---|
| キャメルケース | 最初の単語以外の先頭を大文字にする | 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(コンスタントケース)
こうして見比べてみると、一般的な英文に最も近い形になるのはスネークケースです。
ケバブケースも近くはなりますが、ハイフンは上下真ん中に線がくるのに対して、スネークケースはアンダースコアなので、読むのを邪魔しません。
そのため、自分は上記で説明したような制約がない場合はスネークケースを使うようにしています。

JavaScriptで配列内から特定条件の要素を探す方法
Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う
Visual Studio Codeで読み込んだCSSで設定されているclass名の入力補完をしてくれる拡張機能「HTML CSS Support」
Vue CLI 3でfaviconの設定をする方法
Visual Studio Codeでコメントを色分けして管理する「Better Comments」
CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法
SourceTreeのカスタムアクションを使って差分ファイルだけをまとめる方法
Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する