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

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


Movable Typeでコメントアウトして出力時に無視する方法
Apacheのテストページを非表示にする方法
Vue CLIでGA4を導入する方法
Nuxt.jsでVuexストア連携を行う方法|Nuxt.jsの基本
EJSのincludeで別ファイルを読み込むときの画像パスを指定する方法
Visual Studio CodeでToDoコメントを一覧で表示する拡張機能「Todo Tree」
Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compiler and Sass Watcher」
Nuxt.jsでコンポーネントを作成してコードの共通化を行う|Nuxt.jsの基本
CSSやJavaScriptでスクロールバーの横幅を取得する方法
Google Chromeでinput要素の補完機能を使うと背景に色がついてしまう問題
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎