この記事では『命名規則』について、
- キャメルケース・パスカルケース・スネークケース・コンスタントケース・ケバブケース・トレインケースの違い
- JavaScriptにおける一般的な命名規則
などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。
命名規則
アプリを開発する際、「クラス名」「変数名」「オブジェクトのプロパティ名やメソッド名」「HTMLのIDやクラス名」など様々な場面で命名することがあります。命名規則がバラバラだと、コードを読む際に可読性が悪くなるため、各プロジェクトや組織で命名規則を決めることが必要です。
命名規則には主に以下の6種類あります。下表に各命名規則の特徴をまとめます。
| 名称 | 例 | 説明 |
| キャメルケース ローワーキャメルケース | currentUserItem | ・先頭の単語は小文字で書き始める。 ・先頭以外の単語の最初が大文字である。 |
| パスカルケース アッパーキャメルケース | CurrentUserItem | ・先頭の単語は大文字で書き始める。 ・先頭以外の単語の最初が大文字である。 |
| スネークケース ローワースネークケース | current_user_item | ・各単語をアンダースコア(_)でつなぐ。 ・各単語は全て小文字である。 |
| コンスタントケース アッパースネークケース スクリーミングスネークケース | CURRENT_USER_ITEM | ・各単語をアンダースコア(_)でつなぐ。 ・各単語は全て大文字である。 |
| ケバブケース ローワーケバブケース | current-user-item | ・各単語をハイフン(-)でつなぐ。 ・各単語は全て小文字である。 |
| トレインケース アッパーケバブケース | Current-User-Item | ・各単語をハイフン(-)でつなぐ。 ・各単語の最初は大文字である。 |
これから各命名規則について順番に詳しく説明します。
キャメルケース・ローワーキャメルケース
キャメルケース(camelCase)は先頭の単語は小文字、先頭以外の単語の最初は大文字にする命名規則です。PHPやJavaScriptなどの関数で使われることが多い命名規則です。キャメルケースはローワーキャメルケースとも呼ばれています。
キャメルケースの要点
- 例：
currentUserItem - 先頭の単語(
current)は小文字で書き始める。 - 先頭以外の単語(
user,item)の最初は大文字にしてつなげる。
パスカルケース・アッパーキャメルケース
パスカルケース(PascalCase)は各単語の最初を大文字にする命名規則です。クラス名などで使われることが多い命名規則です。パスカルケースはアッパーキャメルケースとも呼ばれています。
パスカルケースの要点
- 例：
CurrentUserItem - 先頭の単語(
current)は大文字で書き始める。 - 先頭以外の単語(
user,item)の最初も大文字にしてつなげる。
「キャメルケース」と「パスカルケース」の違い
先頭の単語が小文字か大文字であるかが違います。
- 先頭の単語が小文字：キャメルケース(例：
currentUserItem) - 先頭の単語が大文字：パスカルケース(例：
CurrentUserItem)
スネークケース・ローワースネークケース
スネークケース(snake_case)は各単語をアンダースコア(_)でつなぎ、全て小文字で表現する命名規則です。Pythonの関数名やDBなどで扱われる値で使われることが多い命名規則です。スネークケースはローワースネークケースとも呼ばれています。
スネークケースの要点
- 例：
current_user_item - 各単語(
current,user,item)をアンダースコア(_)でつなぐ。 - 各単語は全て小文字である。
コンスタントケース・アッパースネークケース
コンスタントケース(CONSTANT_CASE)は各単語をアンダースコア(_)でつなぎ、全て大文字で表現する命名規則です。コンスタントケースはアッパースネークケースやスクリーミングスネークケースとも呼ばれています。
コンスタントケースの要点
- 例：
CURRENT_USER_ITEM - 各単語(
current,user,item)をアンダースコア(_)でつなぐ。 - 各単語は全て大文字である。
「スネークケース」と「コンスタントケース」の違い
単語が小文字か大文字であるかが違います。
- 単語が小文字：スネークケース(例：
current_user_item) - 単語が大文字：コンスタントケース(例：
CURRENT_USER_ITEM)
ケバブケース・ローワーケバブケース
ケバブケース(kebab-case)は各単語をハイフン(-)でつなぎ、全て小文字で表現する命名規則です。HTMLのクラス名やファイル名などで使われることが多い命名規則です。ケバブケースはローワーケバブケースとも呼ばれています。
先ほど説明したスネークケースは各単語をアンダースコア(_)でつないでいましたが、ケバブケースはハイフン(-)でつなぎます。
ケバブケースの要点
- 例：
current-user-item - 各単語(
current,user,item)をハイフン(-)でつなぐ。 - 各単語は全て小文字である。
トレインケース・アッパーケバブケース
トレインケース(Train-Case)は各単語をハイフン(-)でつなぎ、各単語の最初を大文字で表現する命名規則です。トレインケースはアッパーケバブケースとも呼ばれています。
トレインケースの要点
- 例：
Current-User-Item - 各単語(
current,user,item)をハイフン(-)でつなぐ。 - 各単語の最初は大文字である。
「ケバブケース」と「トレインケース」の違い
各単語の最初が小文字か大文字であるかが違います。
- 各単語の最初が小文字：ケバブケース(例：
current-user-item) - 各単語の最初が大文字：トレインケース(例：
Current-User-Item)
JavaScriptにおける一般的な命名規則
一例として、JavaScriptにおける一般的な命名規則を以下に示します。
- クラス名
- パスカルケースが一般的です。
- 例:
ClassName
- メソッド名・関数名
- キャメルケースが一般的です。
- 例:
methodName
- 定数名
- コンスタントケースが一般的です。
- 例:
CONSTANT_VALUE
- 変数名・プロパティ名
- キャメルケースが一般的です。
- 例:
variableName
- コンポーネント名
- パスカルケースが一般的です。
- 例:
ComponentName
プロジェクトやチームによっては異なる命名規則を採用していることもあります。
本記事のまとめ
この記事では『命名規則』について、以下の内容を説明しました。
- キャメルケース・パスカルケース・スネークケース・コンスタントケース・ケバブケース・トレインケースの違い
- JavaScriptにおける一般的な命名規則
お読み頂きありがとうございました。