コーディング

「キャメルケース」「スネークケース」「ケバブケース」とは

「キャメルケース」「スネークケース」「ケバブケース」とは

キャメルケース、スネークケース、ケバブケースとは?

CSSのクラス名やプログラミングの変数名をつけるときのルールです。

それぞれの書き方を紹介します。

キャメルケース

単語をつなげたとき、文字の1文字目を大文字にする書き方です。

キャメルケースには2種類あります。

「ローワーキャメルケース」と「アッパーキャメルケース(パスカルケース)」です。

ローワーキャメルケース

単語をつなげたとき、一番先頭の文字は小文字、それ以降の単語の1文字目は大文字にする方法です。

たとえば「news」と「area」という2つの単語を組み合わせる場合、

newsの先頭 “n” → “N”
areaの先頭 “a” → “A”

にします。
例えば・・・

  • 「newsArea」
  • 「topContentsBox」
  • 「campaignEntryButton」

アッパーキャメルケース(パスカルケース)

単語をつなげたとき、全ての単語の先頭を大文字にするにする方法です。

別名パスカルケースとも呼びます。

ローワーキャメルケースとの違いは一番先頭の文字が大文字であることです。
例えば・・・

  • 「NewsArea」
  • 「TopContentsBox」
  • 「CampaignEntryButton」

小文字のなかに大文字が入ってデコボコしているのがラクダ(camel)のように見えることからキャメルケースと呼ばれています。

スネークケース

単語と単語をアンダースコア(アンダーバー)でつなぐ書き方です。
例えば・・・

  • 「news_area」
  • 「top_contents_box」
  • 「campaign_entry_button」

ヘビの姿に似ていることからスネークケースと呼ばれています。

ケバブケース

単語と単語をハイフンでつなぐ書き方です。
例えば・・・

  • 「news-area」
  • 「top-contents-box」
  • 「campaign_-entry-button」

ケバブの肉を串刺しにしている様子に似ていることからケバブケースと呼ばれています。

おまけ:アッパーケース

そのほかにアッパーケースと呼ばれるものもあります。
全て大文字かつ、単語と単語をアンダーバーでつなぐ書き方です。
例えば・・・

  • 「NEWS_AREA」
  • 「TOP-CONTENTS-BOX」
  • 「CAMPAIGN_ENTRY_BUTTON」

スポンサーリンク

-コーディング
-

© 2020 まめしばweb Powered by AFFINGER5