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

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

Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う
WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の状態でログインできなくなった場合の対処法
Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方|Dart Sass入門
ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ
ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」
Font Awesome 5の基本的な使い方と、Font Awesome 4との違い
Visual Studio CodeをMarkdownエディターとして使用する
Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」
SourceTreeで環境設定の「カスタムアクション」「アップデート」「高度な設定」が選択できない
Visual Studio Codeとスニペット・ドキュメント検索アプリの「Dash」連携を行うプラグイン
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ファイル移動を補助するPath Finderの特徴的な機能「ドロップスタック」について
MacBook ProのTouch Barを完全に無効化する方法
MacとiPadを同じマウスやキーボードで操作できる「ユニバーサルコントロール」
知っていると作業が少しラクになるMacの豆知識 #1日1Tips – 2019年12月
Finderの機能拡張アプリ「TotalFinder」をインストールしてファイル操作を快適にする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
ウェブのGoogle Drive上でコピーアンドペーストのショートカットキーが使えるように!
個人ブログにコメント欄は必要なのかどうか
Chrome拡張機能の「Wappalyzer」を使ってウェブサイトの使用技術を確認する
Local by Flywheelの「Starting Local Machine…」画面から進まないときに試すこと