WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

ファイル名や変数名、コーディング時に複数の単語を組み合わせる必要が出てきます。
しかし、コードでは「全角半角共にスペースは使用しない」という制約があります。

この制約の中、単語間の区切りを分かりやすくするための書き方がいくつかあります。

連結方法一覧

自分が確認できた連結方法の一覧です。

名前特徴別名
キャメルケース最初の単語以外の先頭を大文字にするcamelCaseローワーキャメルケース
バイキャピタライゼーション
インターキャプス
ミックストケース
スネークケース単語間をアンダーライン(_)でつなぐsnake_case 
ケバブケース単語間をハイフン(-)でつなぐkebab-caseチェインケース
パスカルケース全ての単語の先頭を大文字にするPascalCaseアッパーキャメルケース
コンスタントケース全て大文字で単語間をアンダーライン(_)でつなぐCONSTANT_CASEアッパースネークケース

別名や細かい確認に関しては、下記記事・ページを参考にしました。ありがとうございます。

どれを使うべきか?

悩ましいのが「色々連結方法があるのは分かったけど、どれを使えばいいの?」という問題です。

結論から言うと「前例がなければどれを使ってもいい」と思いますが、結局は使っている言語によって暗黙のルールが存在したり、非常に難しいです。

既存のルールに従う

例えば既にコーディングが進められていて、途中から参加した場合、既に書かれてある連結方法に合わせて書かないと、見にくいコードになってしまいます。

また、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(コンスタントケース)

こうして見比べてみると、一般的な英文に最も近い形になるのはスネークケースです。

ケバブケースも近くはなりますが、ハイフンは上下真ん中に線がくるのに対して、スネークケースはアンダースコアなので、読むのを邪魔しません。

そのため、自分は上記で説明したような制約がない場合はスネークケースを使うようにしています。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね