テキストをkebab-case（ケバブケース）に変換する

テキストをkebab-caseに変換する

kebab-case（dash-caseまたはlisp-caseとも呼ばれる）はすべてのスペースと区切り文字をハイフン（-）に置き換え、すべての文字を小文字にします。単語が串に刺さった肉のように見えることから「ケバブケース」と呼ばれます。

基本的な変換

入力:  User First Name
出力:  user-first-name

入力:  backgroundColor
出力:  background-color

入力:  MAX_RETRY_COUNT
出力:  max-retry-count

kebab-caseが使用される場所

CSSクラス名とプロパティ

/* CSSプロパティは本質的にkebab-case */
.user-profile-card {
  background-color: #f0f0f0;
  font-size: 16px;
  border-radius: 8px;
  max-width: 600px;
}

URLスラッグ

https://example.com/blog/how-to-learn-javascript
https://example.com/products/wireless-bluetooth-headphones

kebab-caseはURLスラッグの推奨形式です。ハイフンは検索エンジンによって単語区切りとして扱われ、SEOが向上します。

HTMLデータ属性

<div data-user-id="42" data-is-active="true"></div>

CLIフラグと引数

npm install --save-dev
docker run --restart=on-failure
git log --oneline --no-merges

SEOへの影響

Googleはハイフンを単語区切りとして扱いますが、アンダースコアは結合子として扱います：

"my-blog-post"  → Googleの解釈: "my", "blog", "post"（3つの別個の単語）
"my_blog_post"  → Googleの解釈: "my_blog_post"（1つの結合された単語）

これがURLスラッグにkebab-caseが強く推奨される理由です。

エッジケース

• 単一単語: "hello" → "hello"。
• 既にkebab-case: そのまま通過します。
• 頭字語: "XMLParser" → "xml-parser"。
• 数字: "step2Next" → "step-2-next" または "step2-next"。