UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

ファイル名や変数名を付けるとき、複数の単語を繋げるために区切り文字を使うことがあります。
その際、「ハイフン（-）」と「アンダースコア（_）」のどちらを使うべきか、迷ったことはありませんか？

これらは見た目が似ており、どちらを使っても問題ないように思えるかもしれません。
しかし、使われる文脈によって、どちらか一方が推奨されていたり、技術的な意味合いが異なったりすることがあります。

今回は、このハイフンとアンダースコアの使い分けについて、いくつかの場面ごとに整理してみます。

ハイフンとアンダースコアの使い分け

URLにおける使い分け

ウェブサイトのURLでは、一般的にハイフンの使用が推奨されます。

これは主にSEO（検索エンジン最適化）の観点からの理由です。
Googleなどの検索エンジンは、URL内のハイフンを単語の区切り（スペース）として認識します。
例えば、「new-post.html」というURLは、「new post」という2つの単語として解釈されます。

一方で、アンダースコアは単語を連結させる文字として認識されることがあります。
「new_post.html」は、「newpost」という一つの単語として解釈されてしまう可能性があります。

そのため、検索エンジンにページの内容を正しく理解させるためには、ハイフンを使う方が良いとされています。
実際に多くのウェブサイトのURLがハイフン区切りになっています。

プログラミングにおける使い分け

プログラミングの世界では、命名規則（ケース）が言語やコミュニティによって異なります。

アンダースコア（スネークケース）

単語をアンダースコアで繋げる方法は「スネークケース」と呼ばれます。
PythonやRuby、PHP、データベースのテーブル名などで、変数名や関数名によく使われます。
例： user_name, calculate_total_price

ハイフン（ケバブケース）

単語をハイフンで繋げる方法は「ケバブケース」と呼ばれます。

多くのプログラミング言語では、ハイフンが引き算の演算子として解釈されてしまうため、変数名や関数名に使うことはできません。

user-name と書くと、user という変数から name という変数を引く、という意味になってしまいます。

ただし、CSSのクラス名や、HTMLのカスタムデータ属性など、一部の特定の場面ではケバブケースが一般的に使われます。

ファイル名における使い分け

ファイル名については、明確なルールはありませんが、ウェブサイトで公開するファイル（画像、CSS、JavaScriptファイルなど）の場合は、URLの慣習に合わせてハイフンを使うのが一般的です。

それ以外のファイルでは、アンダースコアも広く使われています。
ここで最も重要なのは、プロジェクトやチーム内でどちらかに統一し、一貫性を保つことです。

ファイルによって区切り文字が異なると、混乱を招き、ファイル管理が煩雑になる原因になります。

PCの挙動から考える

user-nameと書かれたテキストをダブルクリックするとき、macOSの場合はクリックした単語だけが選択されます。
例えば、「user」部分をダブルクリックした場合は「user」、「name」部分をダブルクリックすると「name」が選択されます。

それに対して、user_nameと書かれたテキストをダブルクリックすると「user_name」すべてが選択されます。

このように、ハイフンだと明確な区切りになりますが、アンダースコアの場合はテキストすべてを選択することになります。

「image-main」と「image_main」だと、ハイフンの方があとから「main」の部分だけを修正して回るのはラクになります。

命名規則から考える

一時期ウェブコーディングで流行っていたBEMという命名規則では、アンダースコアとハイフンが混ざった特殊なルールが採用されていました。

BEMは下記3つの基本概念があり、それらを組み合わせて命名します。

• Block
  • UIを構成する独立した部品（headerやmenu、button、cardなど）
  • 単体で意味を持ち、他の要素から独立して再利用できる
• Element
  • Blockの中に属する部品
  • 「__」でBlock名につなげる（menu__itemやcard__titleなど）
• Modifier
  • BlockやElementの状態やバリエーション
  • 「--」でつなげる（button--large、card_title--highlighted）
  • 色や大きさ、状態を表現する

BEMではElementにアンダースコア2つ、Modifierにハイフン2つを使うので、それを転用することもできます。
具体的には「状態違いにはハイフン、それ以外はアンダースコアで区切る」といったルールです。

まとめ

普段あまり意識しないかもしれませんが、ハイフンとアンダースコアは単なる区切り文字ではなく、それぞれに特徴があります。

次にファイルや変数に名前を付ける機会があれば、「今どの文脈で作業しているか」を一度立ち止まって考えてみてはいかがでしょうか。
その小さな意識が、分かりやすく、メンテナンス性の高い成果物につながるはずです。

---

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！