ケバブケース
ケバブケース（英: Kebab Case）は、プログラミングにおける命名規則の一つであり[1][2][3][4]、一つの識別子の単語間をハイフン-で繋ぎ、各単語の頭文字を小文字にする形式で構成される（例：kebab-case）。各単語の頭文字を大文字にする形式はトレインケース（英: Train Case）と呼ばれる。この形式は、チェインケース（英: Chain Case）とも呼ばれ[5][6][注釈 1]、特にフロントエンド開発やウェブデザインの分野で広く用いられている[3][11]。具体的には、HTML及びCSSにおけるクラス名やID名の指定において頻繁に使用される。「ケバブケース」という名前は、文字列がトルコの料理「ケバブ」の「串に刺さった肉」のように見えることによるものである[12][13]。
ケバブケースは、視認性と一貫性に優れており、コードの可読性を向上させる効果がある[14][15][16][17]。ハイフン-で単語を分けることで、長い名前でも容易に識別可能となり、コードの構造が直感的に理解しやすくなる。また、この命名規則はURLのフラグメント識別子[18][19]やデータ属性[20][21]の命名にも適しており、Web標準に適合しているため[22][23][24][25]、広範なアプリケーションで有用である。
ケバブケースはWeb技術の進化と共に普及したものであり[26][27]、特にJavaScript[12]やCSS[28]のフレームワークが普及する中でその使用頻度が増加した。これは、SEO（検索エンジン最適化）における有効性[10][29]やブラウザ互換性[26][30]の観点からも支持されており、Web開発における標準的な命名規則の一つとして定着している。
この命名規則の利点は、特にHTMLやCSSの命名においてコードの可読性を向上させる点にある。特にチーム開発においては、統一されたコーディングスタイルを確立するための重要な要素となり得る[11][26]。さらに、ハイフン-の使用により、コードレビューやデバッグ作業の効率も向上する[2][31]。
ケバブケースは、そのシンプルさと明瞭さから、多くのプログラミング環境で採用され続けている。本ページでは、ケバブケースの定義から始まり、その歴史、利点と欠点、適用範囲や適用例、標準及びベストプラクティスについて詳述する。
定義[編集]
先述の通り、ケバブケースはプログラミングにおける命名規則の一つであり[1][2][3][4]、一つの識別子の各単語の間をハイフン-で繋ぎ、各単語の頭文字を小文字にする形式で構成される（例：kebab-case）。この形式は、別名チェインケースとも呼ばれる[5][6]。ケバブケースの特徴は、視認性と一貫性に優れている点である。ハイフン-で単語を区切ることにより、長い名前でも容易に識別可能となり、コードの可読性が向上する[14][15][16][17]。
この命名規則は、URLのフラグメント識別子[18][19]やデータ属性[20][21]の命名にも適しており、Web標準に適合しているため[22][23][24][25]、広範なアプリケーションで利用されている。ケバブケースは、特にCSS[28]において多用されており、例えば「background-color」や「font-size」といったプロパティ名は、ケバブケースの典型的な使用例である。加えて、ケバブケースはSEO（検索エンジン最適化）においても有効であり[10][29]、検索エンジンがハイフン-を単語の区切りとして認識するため、ウェブページの可読性と検索エンジンのインデックス精度が向上する。
ケバブケースは、その明瞭さとシンプルさから、多くのプログラミング環境で採用されており、特にJavaScript[12]やCSS[28]のフレームワークの普及と共に、その重要性が増している。従って、ケバブケースは現代のWeb開発における標準的な命名規則の一つとして認識されている。
歴史[編集]
以下にケバブケースの歴史を示すが、ここで示すのは「ケバブケースのスタイル」についての歴史であり、「ケバブケース」という呼称が用いられ始めた時期については情報がない。
1970年代～1980年代：ケバブケースの黎明期[編集]
ケバブケースの歴史は、インターネットとWeb技術の進化と密接に関連している[1][31][32][33]。初期のコンピュータサイエンスやプログラミングにおいては、命名規則は主に可読性と一貫性を維持するために使用されていた。ケバブケースの起源は、1970年代から1980年代にかけてのコンピュータサイエンスの黎明期に遡ることができる。この時期、プログラマーは単語間の区切りとしてスペース を使用できない環境でコーディングを行う必要があり、その代替としてアンダースコア_やハイフン-が用いられるようになった。
1990年代：Web技術の標準化とケバブケースの普及[編集]
1990年代に入り、World Wide Webの普及と共に、Web開発の需要が急速に拡大した[2][3][11][26]。この過程で、HTMLやCSSといったWeb技術の標準化が進み、可読性の高い命名規則の必要性が一層高まった。特に、ウェブページのスタイルを定義するCSSにおいては、クラス名やID名を分かりやすくするために、ケバブケースが広く採用されるようになった。この時期において、ケバブケースは、チェインケースという別名でも知られるようになった。
2000年代：JavaScriptフレームワークの台頭とさらなる普及[編集]
ケバブケースの普及は、JavaScriptフレームワークの台頭と共にさらに加速した[3][34][35][36]。2000年代には、React、Angular、Vue.jsといったフレームワークが登場し、フロントエンド開発の効率と規模が大きく向上した。これらのフレームワークにおいても、CSSクラスやHTML要素の命名にケバブケースが採用され、開発者間での一貫性と可読性の向上が図られた。
現代：SEOとベストプラクティスとしてのケバブケース[編集]
ケバブケースはSEO（検索エンジン最適化）においても重要な役割を果たすようになった[2][37][38][39]。検索エンジンがウェブページを解析する際、ハイフン-を単語の区切りとして認識するため、ケバブケースはウェブページの可読性と検索エンジンのインデックス精度を向上させる効果がある。このため、ウェブサイトのパフォーマンスを向上させるためのベストプラクティスとしても、ケバブケースが推奨されるようになった。
利点[編集]
ケバブケースは、プログラミングにおいていくつかの顕著な利点を持つ命名規則である。これらの利点は、コードの可読性向上、一貫性の確保、SEO効果、チーム開発の効率化に寄与している。以下に、ケバブケースの具体的な利点について詳述する。
視認性と可読性の向上[編集]
ケバブケースの最も顕著な利点は、視認性と可読性の向上である[2][3][11][26]。ハイフン-で単語を区切ることにより、長い名前や複雑な命名も一目で理解しやすくなる。これにより、開発者がコードを読みやすくなり、保守性が向上する。例えば、「background-color」や「font-size」のようなCSSプロパティ名は、単語間の区切りが明確であり、直感的に理解しやすい。
一貫性の確保[編集]
ケバブケースは、コードの一貫性を維持するための効果的な手段である[2][31][32][33]。同一プロジェクト内で命名規則が統一されることにより、開発者間での理解が容易になり、コードレビューやデバッグの効率が向上する。また、一貫性のある命名規則は、コードベースの規模が大きくなるほどその効果が顕著になる。プロジェクト全体でケバブケースを採用することで、コードの整合性と品質が保たれる。
SEO（検索エンジン最適化）効果[編集]
ケバブケースはSEO（検索エンジン最適化）においても有益である[2][37][38][39]。検索エンジンは、ハイフン-を単語の区切りとして認識するため、ケバブケースを使用することでウェブページの解析効率が向上し、検索エンジンのインデックス精度が高まる。これにより、ウェブサイトの検索順位が向上し、ユーザーのアクセスが増加する可能性がある。特に、URL構造にケバブケースを採用することは、SEOのベストプラクティスの一つとされている。
チーム開発の効率化[編集]
チーム開発において、統一された命名規則は極めて重要である[2][31][32][33]。ケバブケースは、そのシンプルさと明瞭さから、開発チーム内での合意形成が容易であり、コードの一貫性を保つための有効な手段となる。統一された命名規則により、チームメンバー間のコミュニケーションが円滑になり、プロジェクトの進行がスムーズになる。また、新規メンバーがプロジェクトに参加する際にも、統一された命名規則があることで、コードベースの理解が迅速に行える。
以上のように、ケバブケースは視認性の向上、一貫性の確保、SEO効果、チーム開発の効率化といった多くの利点を提供する命名規則である。これらの利点により、ケバブケースは現代のプログラミングにおいて重要な役割を果たしている。
欠点[編集]
ケバブケースは、数多くの利点を持つ命名規則であるが、一方でいくつかの欠点も存在する。これらの欠点は、特定のプログラミング環境や用途において制約となる場合があり、慎重に検討する必要がある。以下に、ケバブケースの主な欠点について詳述する。
プログラミング言語との非互換性[編集]
ケバブケースは、全てのプログラミング言語で使用できるわけではない[1][31][32][33]。特に、変数名や関数名にハイフン-を使用できない言語（例：Java、Python、C++等）では、ケバブケースを採用することができない。これにより、プロジェクト内で使用する言語やツールに応じて命名規則を統一することが困難になる場合がある。この点で、スネークケースやキャメルケースに比べて汎用性が低いと言える。
タイピングの手間とミスの増加[編集]
ケバブケースでは、単語間にハイフン-を挿入する必要があるため、タイピングの手間が増加する。特に、ハイフン-の位置を間違えたり、誤ってスペース を入力してしまうと、コードが正しく機能しなくなる可能性がある[1][31][32][33]。このようなミスは、特に長い名前を使用する際に発生しやすく、コードの信頼性に影響を及ぼすことがある。
一部ツールやシステムでのサポート不足[編集]
ケバブケースは、全てのツールやシステムでサポートされているわけではない[31][32][33][40]。特定のコード解析ツールや自動生成ツールでは、ケバブケースを適切に処理できない場合がある。これにより、ツールとの互換性問題が発生し、開発プロセスに影響を与える可能性がある。また、一部のファイルシステムでは、ファイル名にハイフン-を含むことが制約となる場合があり、ファイル管理においても注意が必要である。
読みやすさの問題[編集]
ケバブケースは視認性と可読性の向上に寄与するとされるが、ハイフン-が多用されることでかえって読みづらく感じる場合もある[1][31][32][33]。特に、長い名前や複数の単語が連なる場合、ハイフン-が頻繁に現れることで視覚的な負担が増すことがある。このため、ケバブケースを使用する際には、命名の長さや構造にも配慮する必要がある。
以上のように、ケバブケースには特定のプログラミング環境や用途においていくつかの欠点が存在する。これらの欠点を理解し、適切に対処することで、ケバブケースを効果的に利用することができる。開発プロジェクトにおいては、これらの利点と欠点を総合的に評価し、最適な命名規則を選択することが重要である。
適用範囲[編集]
ケバブケースは、その視認性と一貫性の利点から、特定のプログラミング分野や用途において広く採用されている命名規則である。以下に、ケバブケースが適用される主要な分野及び用途について詳述する。
フロントエンド開発[編集]
ケバブケースは、特にフロントエンド開発において広く使用されている[3][11][26][41]。HTML及びCSSのクラス名やID名の命名において、ケバブケースは標準的な形式とされている。これにより、スタイルシートの構造が明確になり、複数の開発者が共同で作業する際の一貫性が保たれる。また、JavaScriptフレームワーク（例：React、Angular、Vue.js）においても、コンポーネントやプロパティの命名にケバブケースが推奨されており、コードの可読性が向上する。
Web標準技術[編集]
ケバブケースは、Web標準技術においても広く採用されている[2][11][26][38]。例えば、URLのフラグメント識別子やデータ属性（data-*属性）において、ケバブケースを用いることで、構造が明確になり、ウェブページの可読性が向上する。また、SEO（検索エンジン最適化）においても、ハイフン-を単語の区切りとして認識するため、ケバブケースを用いることが推奨されている。
コンテンツ管理システム（CMS）[編集]
多くのコンテンツ管理システム（CMS）においても、ケバブケースは標準的な命名規則として採用されている[42][43][44][45]。WordPressやJoomla!等のCMSでは、テーマやプラグインの開発において、ケバブケースが使用されることが多い。テーマやプラグインのコードで一貫してケバブケースが使用されることで、開発者が異なるプロジェクト間で作業する際の効率が向上する。
スタイルガイド及びベストプラクティス[編集]
多くの企業やプロジェクトでは、スタイルガイドやベストプラクティスとしてケバブケースの使用を推奨している[2][31][32][33]。これにより、プロジェクト全体で統一された命名規則が確立され、コードの可読性と保守性が向上する。特に、大規模なプロジェクトやチーム開発においては、ケバブケースを用いることで、命名規則の一貫性を保つことが容易になる。
モバイルアプリケーション開発[編集]
モバイルアプリケーション開発においても、ケバブケースは適用されることがある[46][47][48][49]。特に、ハイブリッドアプリケーションやプログレッシブウェブアプリケーション（PWA）において、HTMLやCSSの命名規則としてケバブケースが使用されることが多い。これにより、ウェブとモバイルの両方で一貫した命名規則を適用することができ、開発効率が向上する。
以上のように、ケバブケースはフロントエンド開発、Web標準技術、コンテンツ管理システム、スタイルガイド及びベストプラクティス、モバイルアプリケーション開発といった多岐に渡る分野において広く適用されている。これらの分野において、ケバブケースはコードの一貫性と可読性を向上させるための有効な手段となっている。
適用例[編集]
ケバブケースは、様々な具体的な用途においてその利点を発揮する命名規則である。以下に、具体的な適用例を挙げ、ケバブケースがどのように活用されているかを詳述する。
HTMLとCSSにおけるクラス名とID名[編集]
ケバブケースは、HTML及びCSSにおいてクラス名やID名の命名に広く用いられている。
例えば、以下のようなコードが典型的な適用例である。
<div class="container">
<header class="main-header">
<h1 class="site-title">My Website</h1>
</header>
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item" id="first-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
上記の例では、クラス名「main-header」やID名「first-item」にケバブケースが使用されており、コードの可読性と一貫性が保たれている。
JavaScriptにおけるデータ属性の使用[編集]
ケバブケースは、JavaScriptにおけるデータ属性（data-*属性）の命名にも適用される。
以下の例は、データ属性を使用したHTMLとJavaScriptコードの一部である。
<button id="submit-button" data-user-id="12345" data-action="submit-form">Submit</button>
上記はHTML部分、以下がJavaScript部分である。
document.getElementById('submit-button').addEventListener('click', function(event) {
var userId = event.target.getAttribute('data-user-id');
var action = event.target.getAttribute('data-action');
console.log('User ID:', userId);
console.log('Action:', action);
});
この例では、「data-user-id」や「data-action」といったデータ属性にケバブケースが用いられている。これにより、属性名が一目で理解でき、コードの可読性が向上している。
URL構造の最適化[編集]
ケバブケースは、SEO（検索エンジン最適化）の観点からも有効であり、URLの構造に用いられることが多い。
以下に適切なURL構造の例を示す。
https://www.example.com/products/electronic-devices
このURLでは、「electronic-devices」という部分にケバブケースが使用されており、検索エンジンが各単語を適切に認識し、インデックス化することができる。
コンテンツ管理システム（CMS）におけるテーマとプラグイン[編集]
ケバブケースは、コンテンツ管理システム（CMS）においてもテーマやプラグインの命名に広く利用されている。例えば、WordPressのテーマファイルやプラグインファイルにおいて、ケバブケースを使用することで、ファイル名やクラス名が一貫し、他の開発者がコードを理解しやすくなる。
以下にWordPressのテーマファイルの例を示す。
/*
Theme Name: My Custom Theme
Description: A custom theme for my website.
Author: John Doe
Version: 1.0
*/
function my_custom_theme_setup() {
add_theme_support('custom-logo');
add_theme_support('post-thumbnails');
register_nav_menus(array(
'primary-menu' => __('Primary Menu', 'my-custom-theme'),
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
この例では、「custom-logo」「post-thumbnails」「primary-menu」「my-custom-theme」等のテーマ名や関数名にケバブケースが使用されており、コードの一貫性が保たれている。
スタイルガイドに基づくプロジェクト[編集]
多くの企業やプロジェクトでは、スタイルガイドに基づいてケバブケースを採用している。スタイルガイドは、プロジェクト全体で統一された命名規則を確立するためのドキュメントであり、ケバブケースはその中で推奨される命名規則の一つである。
以下にスタイルガイドの例を示す。
# Coding Style Guide
## Naming Conventions
- **Class Names**: Use kebab-case for CSS class names.
- Example: `.main-header`, `.nav-item`
- **ID Names**: Use kebab-case for HTML ID names.
- Example: `#submit-button`, `#user-profile`
- **Data Attributes**: Use kebab-case for custom data attributes.
- Example: `data-user-id`, `data-action`
このスタイルガイドでは、ケバブケースが推奨されており、これに従うことでプロジェクト全体の命名規則が統一され、コードの可読性と保守性が向上する。
標準及びベストプラクティス[編集]
ケバブケースは、その一貫性と可読性の高さから、多くの標準及びベストプラクティスにおいて推奨される命名規則の一つである。以下に、ケバブケースが推奨される標準及びベストプラクティスについて詳述する。
コーディング標準における位置付け[編集]
ケバブケースは、多くのコーディング標準において推奨されている[2][11][26][50]。特に、HTML及びCSSの命名規則に関する標準では、クラス名やID名の命名にケバブケースが用いられることが一般的である。これにより、コードの一貫性が保たれ、複数の開発者が協働する際の理解が容易になる。
例えば、以下のようなコーディング標準が存在する（ここでは、例の中で「kebab-case」という語を用いているが、実際にはこの語は用いられず、「ケバブケースのスタイル」を表現していることも多い）。
# HTML and CSS Coding Standards
## Class and ID Naming
- Use kebab-case for class and ID names.
- Class names should be descriptive and concise.
- Avoid using underscores or camelCase for class and ID names.
このような標準に従うことで、プロジェクト全体のコードベースが統一され、可読性と保守性が向上する。
大規模プロジェクトにおけるベストプラクティス[編集]
大規模なプロジェクトでは、ケバブケースを使用することがベストプラクティスとされることが多い[2][31][32][33]。これは、コードの一貫性を維持するためであり、特に多人数の開発チームにおいてその効果が顕著である。
以下にケバブケースが推奨される理由を挙げる。
- 一貫性の確保：全てのクラス名やID名が同じ命名規則に従うことで、コードベースの一貫性が保たれる。
- 可読性の向上：ハイフン
-で区切られた単語は直感的に理解しやすく、コードの可読性が向上する。 - 保守性の向上：統一された命名規則により、コードの保守作業が容易になる。
フレームワークとライブラリのガイドライン[編集]
多くのJavaScriptフレームワークやCSSライブラリにおいても、ケバブケースが推奨されている[3][51][52][53]。例えば、Vue.jsやAngular等のフレームワークでは、コンポーネント名やカスタムディレクティブの命名にケバブケースを使用することが推奨されている。
以下にVue.jsの公式ガイドラインの一部を示す。
# Vue.js Style Guide
## Component name casing in templates
In most projects, component names should always be PascalCase in Single-File Components and string templates
- but kebab-case in in-DOM templates.
このようなガイドラインに従うことで、フレームワーク内での命名規則が統一され、開発者間のコラボレーションが円滑になる。
ドキュメントとスタイルガイドの作成[編集]
プロジェクトにおいて、ケバブケースを使用するためのドキュメントやスタイルガイドを作成することもベストプラクティスの一つである[2][31][32][33]。これにより、新規メンバーがプロジェクトに参加する際にも、一貫した命名規則を迅速に理解し、適用することができる。
以下にスタイルガイドの一例を示す。
# Project Style Guide
## Naming Conventions
- **Class Names**: Use kebab-case for CSS class names.
- Example: `.main-header`, `.nav-item`
- **ID Names**: Use kebab-case for HTML ID names.
- Example: `#submit-button`, `#user-profile`
- **Data Attributes**: Use kebab-case for custom data attributes.
- Example: `data-user-id`, `data-action`
このようなスタイルガイドにより、プロジェクト全体での命名規則が統一され、コードの品質が向上する。
以上のように、ケバブケースはコーディング標準、ベストプラクティス、フレームワークのガイドライン、及びプロジェクトのスタイルガイドにおいて広く推奨されている命名規則である。これにより、コードの一貫性と可読性が向上し、開発効率が高まることが期待される。
命名規則一覧[編集]
| 名称 | 英語表記 | 説明 | 表記例 |
|---|---|---|---|
| スネークケース | Snake Case | 単語間をアンダースコア（_）で繋ぐ形式。
|
example_variable
|
| スクリーミングスネークケース | Screaming Snake Case | 単語間をアンダースコア（_）で繋ぎ、全て大文字にする形式。
|
EXAMPLE_VARIABLE
|
| キャメルケース | Camel Case | 各単語の頭文字を大文字にし、単語を連結する形式（最初の単語のみ頭文字が小文字）。.NETの文脈で使用。 | exampleVariable
|
| ローワーキャメルケース | Lower Camel Case | キャメルケースと同じ形式だが、フレームワークや言語に依存しない表現。 | exampleVariable
|
| パスカルケース | Pascal Case | 各単語の頭文字を大文字にし、単語を連結する形式（キャメルケースと似ているが、最初の単語の頭文字も大文字）。.NETの文脈で使用。 | ExampleVariable
|
| アッパーキャメルケース | Upper Camel Case | パスカルケースと同じ形式だが、フレームワークや言語に依存しない表現。 | ExampleVariable
|
| ケバブケース | Kebab Case | 単語間をハイフン（-）で繋ぎ、各単語の頭文字を小文字にする形式。
|
example-variable
|
| トレインケース | Train Case | 単語間をハイフン（-）で繋ぎ、各単語の頭文字を大文字にする形式。
|
Example-Variable
|
| ドットケース | Dot Case | 単語間をドット（.）で繋ぐ形式。
|
example.variable
|
| ローワーケース | Lower Case | 全て小文字で単語を連結する形式。 | examplevariable
|
| アッパーケース | Upper Case | 全て大文字で単語を連結する形式。 | EXAMPLEVARIABLE
|
脚注[編集]
注釈[編集]
出典[編集]
- ^ a b c d e f Crockford, Douglas (2008-05-08) (英語). JavaScript: The Good Parts: The Good Parts. "O'Reilly Media, Inc.". ISBN 978-0-596-55487-3
- ^ a b c d e f g h i j k l m n Duckett, Jon (2011-11-08) (英語). HTML and CSS: Design and Build Websites. John Wiley & Sons. ISBN 978-1-118-00818-8
- ^ a b c d e f g h Duckett, Jon (2020-08-19) (英語). JavaScript and JQuery: Interactive Front-End Web Development (2020). Independently Published. ISBN 979-8-6767-5452-5
- ^ a b Bowers, Michael; Synodinos, Dionysios; Sumner, Victor (2012-01-24) (英語). Pro HTML5 and CSS3 Design Patterns. Apress. ISBN 978-1-4302-3781-5
- ^ a b “ケバブケースとは - IT用語辞典”. IT用語辞典 e-Words. 2024年7月2日閲覧。
- ^ a b c “ケバブケース（チェインケース）とは 意味/解説 - シマウマ用語集”. makitani.net (2022年3月6日). 2024年7月2日閲覧。
- ^ “ケバブケース | 広告デザイン業界用語辞典”. 2024年7月3日閲覧。
- ^ Place, Programming. “ケバブケース | Programming Place Plus 用語集”. Programming Place Plus. 2024年7月3日閲覧。
- ^ “ケバブケースとは - IT用語辞典”. IT用語辞典 e-Words. 2024年7月3日閲覧。
- ^ a b c “チェーンケース(ケバブケース)とは？基本概念を紹介と解説 | THE SIMPLE”. the-simple.jp (2023年5月3日). 2024年7月2日閲覧。
- ^ a b c d e f g Robbins, Jennifer Niederst (2012-08-14) (英語). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. "O'Reilly Media, Inc.". ISBN 978-1-4493-1927-4
- ^ a b c “Kebab case - MDN Web Docs Glossary: Definitions of Web-related terms | MDN” (英語). developer.mozilla.org (2023年9月8日). 2024年7月2日閲覧。
- ^ “kebab case” (英語). WordSense Dictionary. 2024年7月2日閲覧。
- ^ a b Feliciotti, Andy (2023年11月17日). “Kebab Case: What It Is and How It Works” (英語). SmartWP. 2024年7月2日閲覧。
- ^ a b “What is Kebab Case? Explained With Examples – Tuple”. www.tuple.nl. 2024年7月2日閲覧。
- ^ a b “Snake Case VS Camel Case VS Pascal Case VS Kebab Case – What's the Difference Between Casings?” (英語). freeCodeCamp.org (2022年11月29日). 2024年7月2日閲覧。
- ^ a b “Naming Conventions to improve code readability” (英語). Codeforces. 2024年7月2日閲覧。
- ^ a b “URL Best Practice: Hyphens, Underscores, or No Separators?” (英語). www.woorank.com. 2024年7月2日閲覧。
- ^ a b “What Is A Website URL? Definition, Types, And Examples” (英語). elementor.com (2022年4月10日). 2024年7月2日閲覧。
- ^ a b “data-* - HTML: HyperText Markup Language | MDN” (英語). developer.mozilla.org (2023年9月8日). 2024年7月2日閲覧。
- ^ a b “Naming convention / Methodology / BEM”. en.bem.info. 2024年7月2日閲覧。
- ^ a b “hyphens - CSS: Cascading Style Sheets | MDN” (英語). developer.mozilla.org (2023年7月18日). 2024年7月2日閲覧。
- ^ a b “File Naming Conventions”. web.simmons.edu. 2024年7月2日閲覧。
- ^ a b “hyphens - CSS: Cascading Style Sheets | MDN” (英語). developer.mozilla.org (2023年7月18日). 2024年7月2日閲覧。
- ^ a b “Managing hyphenation with CSS | Openweb.eu.org”. openweb.eu.org. 2024年7月2日閲覧。
- ^ a b c d e f g h Meyer, Eric; Weyl, Estelle (2023-05-30) (英語). CSS: The Definitive Guide. "O'Reilly Media, Inc.". ISBN 978-1-0981-1758-0
- ^ “Evolution of the Web: from Web 1.0 to 4.0”. ResearchGate. 2024年7月2日閲覧。
- ^ a b c “Google HTML/CSS Style Guide”. google.github.io. 2024年7月2日閲覧。
- ^ a b “Do you use dashes in your URLs?” (英語). SSW.Rules. 2024年7月2日閲覧。
- ^ “Why you should make kebab case a URL naming convention best practice”. www.theserverside.com. 2024年7月2日閲覧。
- ^ a b c d e f g h i j k McConnell, Steve (1993) (英語). Code Complete: A Practical Handbook of Software Construction. Microsoft Press. ISBN 978-1-55615-484-3
- ^ a b c d e f g h i j Martin, Robert C. (2008-08-01) (英語). Clean Code: A Handbook of Agile Software Craftsmanship. Pearson Education. ISBN 978-0-13-608325-2
- ^ a b c d e f g h i j Thomas, David; Hunt, Andrew (2019-07-30) (英語). The Pragmatic Programmer: Your journey to mastery, 20th Anniversary Edition. Addison-Wesley Professional. ISBN 978-0-13-595691-5
- ^ Banks, Alex; Porcello, Eve (2020-06-12) (英語). Learning React: Modern Patterns for Developing React Apps. "O'Reilly Media, Inc.". ISBN 978-1-4920-5169-5
- ^ Freeman, Adam (2017-07-12) (英語). Pro Angular. CreateSpace Independent Publishing Platform. ISBN 978-1-5487-8566-6
- ^ “Vue.js: Up and Running [Book]” (英語). www.oreilly.com. 2024年7月2日閲覧。
- ^ a b Dover, Danny; Dafforn, Erik (2011-03-29) (英語). Search Engine Optimization (SEO) Secrets. John Wiley & Sons. ISBN 978-0-470-55418-0
- ^ a b c Enge, Eric; Spencer, Stephan; Stricchiola, Jessie (2015-08-17) (英語). The Art of SEO: Mastering Search Engine Optimization. "O'Reilly Media, Inc.". ISBN 978-1-4919-0365-0
- ^ a b Kent, Peter (2020-01-09) (英語). SEO For Dummies. John Wiley & Sons. ISBN 978-1-119-57957-1
- ^ Fowler, Martin; Beck, Kent; Brant, John; Opdyke, William; Roberts, Don (2012-03-09) (英語). Refactoring: Improving the Design of Existing Code. Addison-Wesley. ISBN 978-0-13-306526-8
- ^ Antonio, Cassio de Sousa (2015-12-29) (英語). Pro React. Apress. ISBN 978-1-4842-1260-8
- ^ Williams, Brad; Damstra, David; Stern, Hal (2012-12-17) (英語). Professional WordPress: Design and Development. John Wiley & Sons. ISBN 978-1-118-60438-0
- ^ Tiggeler, Eric (2014) (英語). Joomla! 3 Beginner's Guide. Shroff Publishers & Distr. ISBN 978-93-5110-662-3
- ^ Lefebvre, Yannick (2017-07-26) (英語). WordPress Plugin Development Cookbook. Packt Publishing Ltd. ISBN 978-1-78829-949-7
- ^ Beaird, Jason; Walker, Alex; George, James (2020-09-04) (英語). The Principles of Beautiful Web Design. SitePoint Pty Ltd. ISBN 978-1-0981-2474-8
- ^ Wargo, John M. (2020-02-18) (英語). Learning Progressive Web Apps. Addison-Wesley Professional. ISBN 978-0-13-648567-4
- ^ Ater, Tal (2017-08-08) (英語). Building Progressive Web Apps: Bringing the Power of Native to the Browser. "O'Reilly Media, Inc.". ISBN 978-1-4919-6162-9
- ^ Collins, Mark (2015-06-29) (英語). Pro HTML5 with Visual Studio 2015. Apress. ISBN 978-1-4842-1147-2
- ^ Wroblewski, Luke (2011) (英語). Mobile First. A Book Apart. ISBN 978-1-937557-02-7
- ^ Harris, Andy (2017-07-05) (英語). Html5 and Css3 All-In-One for Dummies. CreateSpace Independent Publishing Platform. ISBN 978-1-5485-8795-6
- ^ Learning Vue.js 2: Learn How to Build Amazing and Complex Reactive Web Applications Easily. Packt Publishing. (2016-12-13)
- ^ Freeman, Adam (2020-06-12) (英語). Pro Angular 9: Build Powerful and Dynamic Web Apps. Apress. ISBN 978-1-4842-5998-6
- ^ Bertoli, Michele (2017-01-13) (英語). React Design Patterns and Best Practices. Packt Publishing Ltd. ISBN 978-1-78646-830-7
