命名規則ガイド

camelCase vs kebab-case

camelCase は区切りを除いて大文字で境界を示し、kebab-case は小文字の単語をハイフンでつなぎます。同じ Web プロジェクトでも異なるレイヤーで共存します。

Camel Case Converter 編集チーム著公開日 2026/09/12最終レビュー 2026/09/13

クイック比較

違い	camelCase	kebab-case
例	backgroundColor	background-color
主な用途	JavaScript 識別子、object property、DOM style、application code	URL、slug、CSS 系名称、file/config、CLI 向けテキスト
単語の区切り	なし	ハイフン (-)
大文字小文字	内部語は大文字始まり	通常すべて小文字
JavaScript 識別子	利用可能	未引用では不可
典型的な Web 境界	application code	URL / CSS / text name

camelCase は JavaScript 識別子として直接使えます。CSS の background-color は JavaScript style では backgroundColor になります。

kebab-case はハイフンで境界が明確になり、URL、slug、file 名、CSS、設定で読みやすい形式です。

場面	推奨形式	理由
JavaScript 識別子 / object property	camelCase	ハイフンは未引用の JavaScript 識別子では使えませんが、camelCase はそのまま使えます。
URL・slug・多くの filename	kebab-case	大文字小文字に依存せず、ハイフンで単語境界を読みやすくできます。
CSS property と JavaScript style access	CSS は kebab-case、JavaScript は camelCase	CSS はハイフン区切り、DOM / React の style API は対応する camelCase 名を使います。
Custom element 名	ハイフンを含む名前	Custom element 名にはハイフンが必要なので、kebab-case に近い命名が platform 制約に合います。

JavaScript 識別子には camelCase、外部のハイフン名が期待される場所には kebab-case を使い、必要な境界だけ変換します。

--brand-color のような CSS custom property を機械的に camelCase 化しないでください。先頭 -- と名前自体に意味があります。
kebab-case を未引用の JavaScript 変数名に使うと、ハイフンは減算演算子として解釈されます。
URL や file の命名規則をそのまま source code 内の識別子に適用しないでください。

下に識別子を貼り付けると、対象形式と対応する命名形式を確認できます。変換はブラウザ内で実行されます。

略語を保持

入力検出: snake_case

kebab-case 出力

user-profile-image-url

camelCase

userProfileImageUrl

PascalCase

UserProfileImageUrl

snake_case

user_profile_image_url

kebab-case

user-profile-image-url

CONSTANT_CASE

USER_PROFILE_IMAGE_URL

dot.case

user.profile.image.url

path/case

user/profile/image/url

変換はブラウザ内で行われ、入力は変換サーバーへ送信されません。