ケバブケースのすべてとそれ以上

ケバブケースは、変数名、関数名、ファイル名などを単語をハイフン (’-’) で区切る形にフォーマットする、プログラミングで使われる命名規則です。‘kebab-case’、‘hyphen-case’、‘spinal-case’ とも呼ばれます。

たとえば、人の名前を表す変数があるとき、ケバブケースでは次のように書きます。

first-name

ケバブケースではすべての文字を小文字にして、単語をハイフンで区切ります。これによりコードが読みやすくなり、特定のプログラミング言語やファイルシステムで問題を起こしうるスペースや特殊文字が名前に含まれないようにできます。

ケバブケースは、HTML や CSS でプロパティ、クラス、変数の名前付けによく使われます。

簡単な歴史

プログラミングの命名規則としての「ケバブケース」という用語は、20 世紀後半から 21 世紀初頭にかけて、主に Web 開発における重要性から人気を集めました。

Web 開発の初期、HTML と CSS ではアンダースコア、スペース、キャメルケースなどさまざまな命名規則が使われており、ブラウザーごとに一貫性が取れない状況が生まれていました。この一貫性のなさから、Web ドキュメント内の要素を命名する、より標準化された方法が求められるようになりました。

2000 年代初頭の Web リソース向け Uniform Resource Identifier (URI) の採用は、命名の一貫性の重要性をさらに強調しました。URL 内にスペースや特殊文字があるとエンコーディングの問題が起きてリンクが壊れる可能性があったため、結果としてケバブケースが URL でリソースを命名する際の好ましい規則になっていきました。

2010 年代を通じて、ケバブケースは Web 開発コミュニティで HTML 属性、CSS のクラス名、変数名向けに広く採用されました。さらに、明確で一貫した名前を作る方法として、他のプログラミング言語やファイル名の命名規則にも広がっていきました。

ケバブケースは、ほかの命名規則ほど長い歴史を持つわけではありませんが、そのシンプルさ、一貫性、Web 開発との相性の良さによって、現代では人気のある選択肢になっています。命名規則はプログラミング言語やコミュニティによって異なる場合があるため、いま扱っているプロジェクトや言語で確立されている規則に従うのがおすすめです。

使用例

ケバブケースは、特に Web 開発を中心に、さまざまな現代的なプログラミングのコンテキストで使われています。いくつかの使用例を紹介します。

HTML と CSS

<div class="user-profile">

HTML と CSS では、特定の要素にスタイルを当てるためのクラス名にケバブケースがよく使われます。

URL とルーティング

// Express.js route definition
app.get('/user-profile', (req, res) => {
  // Route handling logic
});

Express.js のような Web フレームワークでルートを定義する際にも、ケバブケースがよく使われます。URL でも一般的です。

コマンドラインオプション

my-script --option-name value

コマンドラインツールやスクリプトでは、ケバブケースがコマンドラインオプションや引数の命名に使われることがあります。

ファイル名 (Web 開発)

header-styles.css
analytics-script.js
privacy-policy.html

Web 開発では、HTML や CSS の規則と一貫性を保つために、ファイル名にケバブケースが使われることがあります。

パッケージ名 (Node.js)

npm install my-package-name

Node.js では、npm でパッケージを公開・インストールする際のパッケージ名にケバブケースがよく使われます。

HTML と XML の属性名

<button data-toggle-modal="my-modal">Open Modal</button>

ケバブケースは、HTML や XML のカスタムデータ属性で、人間にとって読みやすく一貫性のある名前を付けるために使われます。

CSS 変数

--primary-color: #3498db;

CSS 変数の命名にもケバブケースがよく使われ、可読性と保守性を高めるのに役立ちます。

フロントエンドフレームワーク

<MyComponent prop-name="value" />

Angular や React のような一部のフロントエンドフレームワークやライブラリは、JSX コンポーネントのプロパティ名にケバブケースを推奨しています。

2023-11-17 更新: この記事の以前のバージョンでは、kebab-case が JavaScript や Python の変数名や関数名に有効な命名規則であるかのように記載されていましたが、これは誤りです。誤りを指摘してくれた @Art に感謝します。