ケバブケースとは？ざっくりと3行で
- 複数の単語をハイフン（-）でつないで表記する書き方のことだよ
- 主にWebサイトのURLやCSSのクラス名を見やすく整理する役割があるんだ
- これを使うと、検索エンジンが単語の区切りを正しく認識してくれるからSEOにも有利だよ
【深掘り】これだけ知ってればOK！
ケバブケース（kebab-case）は、その名の通り単語がハイフンで串刺しにされたケバブのように見えることから名付けられました。WebページのURL（ドメイン以下のパス）や、デザインを指定するCSSのプロパティ名では標準的に使われています。
しかし、JavaやJavaScriptといった多くのプログラミング言語では、ハイフンが「マイナス（引き算）」の記号として扱われてしまいます。そのため、ソースコード内の変数名としてケバブケースを使うと計算式と誤認され、エラーの原因となるのです。
会話での使われ方
ここのCSSクラス名、ケバブケースで統一しておいてね
記事のURLスラッグは、SEOを意識してケバブケースにするのが基本です
ファイル名はケバブケースだけど、中の関数名はキャメルケースだから間違えないでね
【まとめ】3つのポイント
- 串刺しの具材：単語（具材）をハイフン（串）でつないで、一つのまとまりとして扱うイメージ
- 検索エンジンの道標：URL内の単語の区切りを明確にし、Googleに内容を正しく伝える役割
- 使い分けの重要性：URLやHTMLでは大活躍するが、プログラム変数ではエラーになるという注意点
よくある質問
- Qケバブケースはいつ使うのがベストですか？
- AWebサイトのURL（パーマリンク）を設定する際や、HTMLのclass属性、id属性、CSSファイルの名前をつける際に使用するのがベストです。
- Qケバブケースを失敗させないコツはありますか？
- Aプログラミング言語（JavaScriptやPythonなど）の変数名や関数名には使用せず、ファイル名やURLの設定時のみに使用するよう、明確にルールを分けることです。
- Qケバブケースの具体例は何ですか？
- A具体的には、
my-awesome-styleやabout-us、background-colorのように、すべての文字を小文字にし、単語間をハイフンでつないだものが挙げられます。
- Qケバブケースとキャメルケースとの違いは何ですか？
- Aケバブケースは
user-nameのようにハイフンでつなぎますが、キャメルケースはuserNameのように単語の先頭を大文字にしてつなぐ点が異なります。
コメント