kebab-caseとは？定義・例・使用場面
4 分で読了
kebab-caseは、単語を小文字にしてハイフンで区切る命名規則です：my-variable-name、background-color、user-profile-page。
kebab-caseが使われる場面
| コンテキスト | 例 |
|---|---|
| CSSプロパティ | background-color、font-size |
| CSSクラス名（BEM） | .nav-bar__menu-item |
| HTML属性 | data-user-id |
| URLスラッグ | /blog/what-is-kebab-case |
| CLIフラグ | --output-dir、--no-cache |
| npmパッケージ名 | react-router-dom |
| Lisp/Clojure | get-user-name |
kebab-case vs 他の命名規則
| 規則 | 例 |
|---|---|
| kebab-case | my-variable-name |
| camelCase | myVariableName |
| snake_case | my_variable_name |
| PascalCase | MyVariableName |
なぜ多くの言語でkebab-caseが使えないのか？
ハイフンはほとんどのプログラミング言語で演算子（減算）です。my-varはmyマイナスvarと解釈されます。そのためkebab-caseはハイフンが演算子にならない文脈（CSS、HTML属性、URL、設定ファイル）に限定されます。
kebab-caseに変換
kebab-caseコンバーターで任意のテキストを即座に変換できます。ケースコンバーターハブもお試しください。