ケバブケースへの変換方法：URL・CSS・ファイル名での使い方
ケバブケースは小文字の語を 1 つのハイフンでつなぐ表記で、user-profile のように書きます。URL のパス、CSS のクラス名、HTML の属性、npm のパッケージ名、静的ファイル名はおおむねこの形です。
ハイフンを使う場面
ブログや多言語サイトでは、記事のタイトルを URL のパスに変えます。user profile settings は /user-profile-settings/ になります。手で書くとハイフンが 1 つ多い、末尾に残るといったことが起き、公開後に // や末尾の - が別の URL として扱われます。
もう一つは CSS のクラス名とファイル名をまとめて決める場合です。product card は product-card になり、対応する画像やアイコンも product-card-icon に揃います。スタイルシートと素材フォルダを同時に改名するときは、1 つの規則のほうが 1 件ずつ確認するより確実です。
- URL のパスとスラッグ（/user-profile/）
- CSS のクラス名、BEM のブロックと要素名
- 画像やアイコンなど静的ファイル名
- npm のパッケージ名や Git のブランチ名
変換の規則と 3 つの確認点
規則は、まず「小文字か数字 + 大文字」の境界で語を分割し、全体を小文字にし、英数字以外の連続を 1 つのハイフンにまとめ、両端のハイフンを削除するという流れです。User Profile、user_profile、userProfile はどれも user-profile になり、途中に空の要素は残りません。
確認点は 3 つです。1 つ目、ハイフンは語の間にだけ入るべきで、a--b や末尾の - が見えたら入力に連続した記号があった証拠です。2 つ目、漢字は削除されるため、日本語サイトの英語スラッグは先に翻訳が必要です。3 つ目、CSS のクラス名は数字で始められないため、2col は col-2 に直します。
- キャメルの境界を分割するので userProfile も正しく変換
- 連続した記号はまとまるが、末尾のハイフンは残ることがある
- 漢字は削除されるため、先に英訳する
- CSS のクラス名は数字で始められない（2col → col-2）
- 公開 URL では連続するハイフンを避ける
URL でハイフンが使われる理由
出典の明確な違いです。Google の検索向けドキュメントは、ハイフンを語の区切りとして扱い、アンダースコアは扱わないと説明しています。/user-profile が 2 語として読まれるのはこのためで、多くの CMS が既定でハイフンを使う理由でもあります。
限界も明確です。ハイフンは JavaScript の変数名に使えず、引き算として解釈されるため、obj['user-name'] のように文字列キーとしてしか扱えません。ファイル名としては問題ありませんが、大文字小文字の扱いは環境で異なります。URL の中ではハイフンも下線もそのままで使え、エスケープは不要です。
- Google はハイフンを区切りとして扱い、下線は扱わない
- JS の変数には使えず、obj['x-y'] で参照する
- ファイル名には使えるが、大文字小文字の区別に注意
- Python や SQL 向けは下線のツールを使う
よくある質問
URL にはハイフンと下線のどちらを使うべきですか？
ハイフンを優先してください。Google はハイフンを語の区切りとして扱い、下線は区切りとして扱わないと明示しています。そのため /user-profile のほうが 2 語として認識されやすくなります。多くのサイト制作ツールや CMS も既定でハイフンを使います。
ケバブケースは変数名にそのまま使えますか？
使えません。JavaScript、Python、Java などの識別子にハイフンは含められず、引き算として解析されます。obj['user-name'] のように文字列キーにするか、コードに入れる前に camelCase や snake_case へ変換してください。
変換結果にハイフンが 2 つ並ぶのはなぜですか？
入力にもともと連続した区切りがあったためです。a - b や a--b では、記号が 1 つにまとまったあと両側の境目が残ります。ツールは意味を判断しないので、変換後に先頭、末尾、連続するハイフンを確認し、必要なら手で削除してください。
関連ツール：ケバブケース変換