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

URL: https://webrandum.net/hyphen-underscore/
公開日: 2019-07-29
更新日: 2019-07-29
カテゴリー: コーディング
出典: Webrandum（著者: サイトウ マサカズ）

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

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

ケバブケースやスネークケースなどに関しては[過去記事](https://webrandum.net/word-concatenation-method/)をご覧ください。

[コーディング時にちゃんと意識したい複数語の連結方法一覧（キャメルケース・スネークケース・ケバブケース）](https://webrandum.net/word-concatenation-method)

## 読みやすさ

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

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

![ベースラインの位置比較](https://webrandum.net/mskz/wp-content/uploads/2019/07/image_1-23.png)

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

## ダブルクリック時の挙動

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

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

![ダブルクリック時の挙動](https://webrandum.net/mskz/wp-content/uploads/2019/07/image_3-13.png)

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

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

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

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

[BEM](https://en.bem.info)

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