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