kebab-caseをcamelCaseに変換する方法
kebab-caseの名前をcamelCaseにすぐ変換できます。変数名、関数名、列名を入力するか貼り付けると、入力しながらcamelCaseの形が表示されます。
- 上の入力欄にkebab-caseの名前（例：main-nav-item）を入力するか貼り付けます。
- camelCaseの形がすぐに表示されます：main-nav-item は mainNavItem になります。
- 結果をコピーするか、変換元と変換先で17種類の命名スタイルから選びます。
変換のしくみ
まず名前を単語に分けます。区切りは大文字、アンダースコア、ハイフン、ピリオド、空白です。次に単語をcamelCaseで書き直します：最初の単語は小文字、以降の単語は先頭を大文字にして区切り文字なし。HTTPのように大文字が続く部分は1つの単語として扱い、数字は直前の単語にくっついたままになります。
kebab-case→camelCase の例
| kebab-case | camelCase |
|---|---|
main-nav-item | mainNavItem |
font-size | fontSize |
background-color | backgroundColor |
is-open | isOpen |
data-test-id | dataTestId |
aria-label | ariaLabel |
kebab-caseとcamelCaseとは
kebab-caseはすべての単語を小文字にしてハイフンでつなぎます。URL、CSSのクラス名、HTML属性、ファイル名で使われます。
camelCaseは最初の単語を小文字で書き、以降の単語の先頭を大文字にして区切り文字なしでつなぎます。JavaScript、Java、C#、Swiftの変数名・関数名の標準です。
よくある質問
HTTPやIDのような略語はどうなりますか？
大文字の連続は1つの単語として扱います。たとえばparseHTTPResponseはsnake_caseではparse_http_responseになります。
コードの意味は変わりますか？
いいえ。名前を書き換えるだけです。その名前を使っているすべての場所も忘れずに変更してください。そうしないとコードは古い名前を探してしまいます。
どのスタイルを使えばよいですか？
言語やプロジェクトの慣習に従いましょう。JavaScriptやJavaではcamelCase、Python、Ruby、SQLではsnake_case、URLやCSSではkebab-caseが一般的です。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。