コーディングにおけるハイフンとアンダースコアの使い分け

コーディングをする時に、単語間をハイフンでつなぐかアンダースコアでつなぐか（ケバブケースとスネークケース）は、コーディングをする人なら誰しも通る悩みだと思います。

今回はハイフンとアンダースコアについて細かい違いを見て、どちらを使うとより良さそうなのかの判断材料をまとめておきます。

ケバブケースやスネークケースなどに関しては過去記事をご覧ください。

Webrandum

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

https://webrandum.net/word-concatenation-method

ファイル名や変数名、コーディング時に複数の単語を組み合わせる必要が出てきます。しかし、コードでは「全角半角共にスペースは使用しない」という制約があります。この制約の中、単語間の区切りを分かりやすくするための書き方がいくつかあります。連結方法一覧自分が確認できた連結方法の一覧です。名前特徴例別名キャメルケース最初の単語以外の先頭を大文字にするcamelCaseローワーキャメルケースバイキャピタライゼーションインターキャプスミックストケーススネークケース単語間をアンダーライン（_）でつなぐsnake_case ...

読みやすさ

正直慣れな部分が大きい気がしますが、ハイフンはテキストの真ん中に、アンダースコアは名前の通り下に線が表示されます。

つまり、アンダースコアの方がベースラインの位置に線が引かれてあるため、一般的な英語に近い感覚で読めます。

ただ、ベースラインの位置に線が引かれているため、既にベースラインに線が入っているような場合は、アンダースコアが入っていることに気づきにくくなる恐れがあります。

ダブルクリック時の挙動

Macでは、文章をダブルクリックすると1単語を選択できます。

このときの挙動が、ハイフンで単語感を繋げた場合と、アンダースコアで繋げた場合とでは少し異なってきます。

左がハイフンで繋げた場合で「class」の部分をダブルクリックした状態で、右がアンダースコアで繋げた場合で「class」の部分をダブルクリックした状態になります。

このように、単語を素早く選択した場合に、丸々選択できるかどうかの挙動が変わってきます。

設計方法論や前例に合わせる

CSS設計方法論である「BEM」を使う場合はElementは「–（ハイフン2つ）」、Modifierは「__（アンダースコア2つ）」という風にルールが決まっています。

en.bem.info

BEM

https://en.bem.info

BEM

また、前例がない場合は正直ハイフンでもアンダースコアでもどちらでも良いのですが、既に他の制作者がコードを書いている場合は、それに合わせる必要も出てきます。