text / case

ケバブケース / スネークケース 変換

camelCase・PascalCase・ スペース区切りなど、あらゆる表記からkebab-case /snake_case に変換します。

使い方

01
  1. 「kebab-case」または「snake_case」タブを選択してください
  2. テキストエリアに変換したい文字列を入力すると、リアルタイムで結果が表示されます
  3. 入力は _・-・ スペース・ドット・大文字の境界で自動的に分割されます
  4. すべて小文字に統一してから区切り文字で結合します
  5. 「コピー」ボタンで変換結果をクリップボードにコピーできます

実装コード

02

コアの tokenize() 関数で単語に分解してからjoin() で結合するだけ。 外部ライブラリ不要でそのままコピーして利用できます。

// 入力を単語トークン配列に分解（複数記法に対応）
function tokenize(input: string): string[] {
  return input
    .replace(/([a-z\d])([A-Z])/g, '$1 $2')    // camelCase 分割
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2') // HTMLParser → HTML Parser
    .split(/[\s\-_.]+/)
    .filter(Boolean)
    .map((w) => w.toLowerCase())
}

export function toKebabCase(input: string): string {
  return tokenize(input).join('-')
}

export function toSnakeCase(input: string): string {
  return tokenize(input).join('_')
}

よくある使用例・注意点

03
CSS クラス名・HTML 属性には kebab-case
CSS のプロパティ名（background-color, font-size）や HTML の data 属性（data-user-id）は kebab-case が標準です。JavaScript の camelCase な変数名を CSS クラス名に変換するときに使えます。
Python・Ruby・DB カラム名には snake_case
Python の変数・関数名（get_user_name）、Ruby の変数名、SQL のカラム名（user_id, created_at）は snake_case が慣例です。TypeScript のキャメルケース識別子を変換するときに便利です。
URL スラッグ・ファイル名には kebab-case
Web の URL パス（/my-page-title）やブログ記事のスラッグ、CSS ファイル名（button-primary.css）には kebab-case が広く使われます。SEO の観点でも単語を - で区切ることが推奨されます。
環境変数・定数には SCREAMING_SNAKE_CASE
このツールは小文字の snake_case に変換します。環境変数のような大文字定数（MAX_RETRY_COUNT）が必要な場合は、出力結果を手動で大文字に変換してください。
略語（Acronym）の扱い
HTMLParser のような連続大文字は html + parser と分割されます。変換結果は html-parser（kebab）/ html_parser（snake）になります。略語部分の大文字を維持することは現在の実装では対応していません。

関連ツール

04
キャメル・パスカルケース変換全角・半角変換文字数カウンターURLエンコード

ソースコード

05

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →