ケバブケース変換

ケバブケースとは？

ケバブケース（kebab-case、ダッシュケースとも呼ばれる）は、単語をハイフンで区切り、すべて小文字にする命名規則です。例：my-variable-name、user-profile-page。

ケバブケースと他の命名規則の比較

• ケバブケース：my-variable-name — URL、CSS、HTML属性
• キャメルケース：myVariableName — JavaScript、Java
• スネークケース：my_variable_name — Python、Ruby、データベース
• パスカルケース：MyVariableName — C#、Reactコンポーネント

camelCaseからkebab-caseへの変換

camelCaseからkebab-caseへの変換は、JavaScript変数名をCSSクラスやURL向け文字列に変えるときによく行われます。大文字の前にハイフンを挿入し、全体を小文字にします：

• myComponentName → my-component-name
• userProfilePage → user-profile-page
• backgroundColor → background-color

SEO URLのためのkebab-caseスラッグ

kebab-caseのスラッグは、ハイフンが人間にも検索エンジンにも読みやすいため、SEOフレンドリーなURLの標準形です。ページURLの作成にはURL Slug Generatorで不要語除去やバルクモードも使えます。

JavaScript・CSS・REST URLでのkebab case

JavaScriptのコードは通常 camelCase を使いますが、CSSクラス名、カスタム要素、ファイル名、RESTエンドポイントパスではケバブケースがよく使われます。

ケバブケースの使用場所

• CSSクラス名とID
• URLスラッグとファイル名
• /user-profiles のようなRESTエンドポイントパス
• HTMLデータ属性
• npmパッケージ名・Gitブランチ名・Dockerコンテナ名

関連スラッグツール

SEOスラッグの完全なワークフローにはURL Slug Generatorを、恒久的なブログURLにはPermalink Generatorをどうぞ。