kebab-case 変換ツール

Q: 略語はどう扱われますか？

`getHTTPResponseCode` は `get-http-response-code` になります。

Q: 複数行でも使えますか？

はい、各行は個別に変換されます。

camelCase、snake_case、通常のテキストを CSS クラス、URL、ファイル名向けの kebab-case（ダッシュケース）に変換。略語と数字に対応し、行ごとに処理します。

入力

例: userAccountId → user-account-id

出力

各行は個別に変換されます。単語はスペース、記号、_ - . / と camelCase の境界で区切られます。XML のような略語はまとまったまま、数字は直前の単語に付きます。

kebab-caseとは？

このツールは、識別子やフレーズを kebab-case（ダッシュケースとも呼ばれます）に変換します。小文字の単語をハイフンでつなぐ形式で、CSS のクラス、HTML の属性、CLI のフラグ、URL のパスに使われます。

kebab-caseの使い方

入力欄にテキストを入力または貼り付けます。1 行に 1 つの識別子またはフレーズです（または サンプルを読み込む をクリックします）。
変換されたテキストが出力欄にすぐに表示されます。
コピー をクリックして結果をコピーします。

例

入力

getHTTPResponseCode

出力

get-http-response-code

kebab-caseを使うべき場面

CSS のクラス名、コンポーネントのファイル名、コマンドラインのオプションに使います。アクセント付きのタイトルから SEO 向けの URL を作るには、ダイアクリティカルマークを除去するスラッグジェネレーターのほうが適しています。

kebab-caseの仕組み

入力は単語に分割され、すべての単語が小文字にされ、- で連結されます。単語は、スペース、句読点、区切り文字 _ - . /、識別子内の大文字小文字の切り替わりで分割されます。fooBar → foo + Bar となり、連続する略語はまとまったままです（XMLHttpRequest → XML + Http + Request）。数字は直前の単語に付き（Request2Go → Request2 + Go）、単語内のアポストロフィは削除され（don't → dont）、あらゆる文字体系の文字（é、ñ、キリル文字、ギリシャ文字など）に対応します。各行は個別に変換されます。