ケバブケースとは？プログラミングの命名規則を解説

ざっくりと

ケバブケースとは、ハイフンでつなげる命名規則です。

ケバブケースとはハイフンで複数の単語をつなげる命名規則である。なぜならば、コードが読みやすく、理解しやすくするためだ。

例えば、変数名を「user-name」のように作成するということだ。そして、このような命名規則は主にプログラミングで使用される。

つまり、コードの可読性を高めるためのツールである。だから、特にプログラマーにとっては重要なルールとなる。

プログラマー
プログラマーは、ケバブケースを頻繁に使う。なぜなら、読みやすく、特にHTMLやCSSでは一般的な記法だからだ。例えば”create-user-form”という変数名。
Webデザイナー
Webデザイナーもまた、ケバブケースを使うことがある。なぜなら、CSSのクラス名やID名を作るときに使われるからだ。例えば”header-menu-item”というクラス名。
データサイエンティスト
データサイエンティストは、時折ケバブケースを使う。なぜなら、データのラベルやファイル名を作るときに、見やすく、理解しやすい命名をするためだ。例えば”data-clean-up”というファイル名。

ケバブケースの名前の由来は、複数の単語をつなげるハイフンが、串刺しのケバブのように見えるからです。

Twitterは、ケバブケースをよく使う。なぜなら、ハッシュタグを作る時にスペースをハイフンに置き換えるからだ。例えば”#summer-vacation”というハッシュタグ。

Bootstrapは、ケバブケースで知られている。なぜなら、CSSのクラス名を作る際にケバブケースを使用しているからだ。例えば”nav-bar”というクラス名。

GitHubもまた、ケバブケースを使う。なぜなら、レポジトリの名前をつけるときにケバブケースを使用するからだ。例えば”my-awesome-project”というレポジトリ名。

スネークケースは、ケバブケースに似ている。なぜなら、両方とも単語を連結するが、スネークケースはアンダースコアを使うからだ。例えば”user_details”。

キャメルケースもケバブケースに似ている。なぜなら、単語を連結するが、キャメルケースは最初の単語以外の単語の先頭を大文字にするからだ。例えば”UserDetails”。

パスカルケースは、キャメルケースと同じく単語を連結するが、すべての単語の先頭を大文字にするからだ。例えば”UserDetails”。

キャメルケースは、ケバブケースの反対語である。なぜなら、単語の間にハイフンを使わず、単語の先頭を大文字にするからだ。例えば”userDetails”。

スネークケースもまた、ケバブケースの反対語と言える。なぜなら、単語の間にハイフンではなくアンダースコアを使うからだ。例えば”user_details”。

パスカルケースは、ケバブケースの反対語となる。なぜなら、全ての単語の先頭を大文字にし、ハイフンを使わないからだ。例えば”UserDetails”。

Q.「新しく作る関数の名前はどうするべきかな？」
A.「ケバブケースを使うとわかりやすいよ。たとえば、”calculate-sum”のように使うといいよ。」

Q.「この新しいCSSクラス名、どうしよう？」
A.「ケバブケースを使って、機能を示す名前にすると良い。例えば、”main-content”や”navigation-menu”のように。」

Q.「このセクションのURLはどうすれば良い？」
A.「ケバブケースを使うと簡潔で読みやすいURLになるよ。例えば、”how-to-apply”や”about-us”のようにね。」

ケバブケースを使用する時の注意点は大文字と小文字を混在させないことである。なぜならばケバブケースは原則として小文字だけを使うからだ。

例えば”Send-Message”ではなく、”send-message”である。そして、ハイフンを二つ続けて使用しないこと。だから、単語と単語を一つのハイフンで繋ぐようにしましょう。

ケバブケースとスネークケースの違いは、ケバブケースは単語の間をハイフン-でつなぐのに対して、スネークケースはアンダースコア_でつなぐことです。