【JavaScript命名規則まとめ】キャメルケース・スネークケースなど変数名のベストプラクティス解説

JavaScriptにおける命名規則とは？なぜ重要か

命名規則とは、変数・関数・クラスなどの識別子に一貫した名前をつけるためのルールです。
JavaScriptでは自由度が高いため、ルールを決めずに書くとコードの可読性や保守性が著しく低下します。
命名規則を統一することで、チームメンバー間での意思疎通がスムーズになり、レビューの時間短縮にもつながります。

命名スタイルの種類と特徴（キャメルケース・スネークケース・ケバブケース・パスカルケース）

JavaScriptにおいてよく使われる命名スタイルは、キャメルケース、スネークケース、ケバブケース、パスカルケースなどがあります。
それぞれに適した用途があるため、文脈に応じて使い分けることが重要です。

キャメルケース

キャメルケースの特徴

単語の区切りにアンダースコアやハイフンを使わず、2語目以降の先頭文字を大文字にするのが特徴です。
読みやすさと記述のしやすさのバランスがよく、JavaScriptをはじめとした多くの言語で標準スタイルとして採用されています。

キャメルケースの由来

単語の頭文字が盛り上がって見える様子が「キャメル（ラクダ）のこぶ」に似ていることから名付けられました。

キャメルケースの使いどころ

JavaScriptにおける最も一般的な命名スタイルで、変数名や関数名に使用されます。
GoogleやAirbnbなどのスタイルガイドでも標準とされています。

キャメルケースの記述例

JavaScript

let userName = 'Muhiro';
function getData() {
  return fetch('/api/data');
}

スネークケース

スネークケースの特徴

単語の間をアンダースコア（_）で区切る形式で、視認性が高く、命名が簡潔にまとまりやすいという特徴があります。
可読性を重視する言語や、構造化されたデータでよく利用され、他言語との相互運用性も高いです。

スネークケースの由来

アンダースコアが連なる様子が蛇のように見えるため「スネーク（蛇）ケース」と呼ばれます。

スネークケースの使いどころ

JavaScript単体では一般的ではありませんが、バックエンドとのAPI通信や外部データ構造で見られることがあります。
Pythonなど他の言語では標準的なスタイルです。

スネークケースの記述例

JavaScript

const user_name = 'muhiro';
const total_count = 32;

ケバブケース

ケバブケースの特徴

単語を小文字のままハイフン（-）でつなぐ形式で、視認性が高くURLやクラス名に多く用いられます。
JavaScriptでは利用されませんが、HTMLやCSSで標準的に使用されており、構造的に美しい命名がしやすい形式です。

ケバブケースの由来

単語をハイフンで串刺しにする構造が「ケバブ」の見た目に似ていることから命名されました。

ケバブケースの使いどころ

主にHTML属性やCSSのプロパティ名に使用されます。
JavaScriptの変数名や関数名には使用しません。

ケバブケースの記述例

HTML

SCSS・CSS

.main-container {
  background-color: #f5f5f5;
}

パスカルケース

パスカルケースの特徴

すべての単語の先頭文字を大文字にして連結する形式で、命名の視認性と明確性が高くなります。
主にクラス名やReactコンポーネントなど、構造や役割がはっきりした要素に対して使われ、意味づけの強いスタイルです。

パスカルケースの由来

プログラミング言語「Pascal」で採用されていた命名スタイルが由来です。
先頭文字を含め、すべての単語の頭文字を大文字にします。

パスカルケースの使いどころ

クラス名やReactコンポーネント名などに使用されます。
コード構造の明確化に役立ちます。

パスカルケースの記述例

JavaScript

class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

function MyComponent() {
  return <div>Hello</div>;
}

命名スタイルの比較表

命名スタイル	特徴	構文ルール	使いどころ
キャメルケース camelCase	単語の区切りに記号を使わず、2語目以降の先頭を大文字にする形式。 JavaScriptの標準スタイルで、読みやすさと書きやすさのバランスに優れる。	最初の単語は小文字、2語目以降は大文字。 userName getUserData	JavaScriptの変数名・関数名。
スネークケース snake_case	単語をアンダースコアで区切る形式。 可読性が高く、APIやバックエンドとの連携でよく使用される。	すべて小文字＋アンダースコア。 user_name total_count	APIレスポンス、外部データ構造。
ケバブケース kebab-case	単語をハイフンでつなぐ形式。 HTML属性名やCSSクラス名で標準的に使用される。	すべて小文字＋ハイフン。 main-container background-color	CSSプロパティ名・HTMLクラス名。
パスカルケース PascalCase	単語のすべての先頭文字を大文字にする形式。 クラス名やReactコンポーネントで広く使われている。	単語のすべての頭文字を大文字。 UserProfile MyComponent	JavaScriptのクラス名・Reactコンポーネント名。

定数の命名：全大文字＋アンダースコアが使われる理由

定数には MAX_COUNT や API_BASE_URL のように、全て大文字＋アンダースコアのスタイルが使われます。
これは「再代入されない値」であることを視覚的に明確にするためであり、const 宣言とともに使用されます。
コードを読むだけで「変更してはいけない値」であることがすぐに判断できるため、バグの予防にもつながります。

関数・変数・クラスの命名ベストプラクティス

関数名は動詞＋目的語

関数は「何をするか」を明示的に表現するため、動詞と目的語を組み合わせる形式が推奨されます。
コードの可読性が高まり、関数の役割が直感的に伝わるため、チーム開発でも意思疎通がしやすくなります。

推奨される命名規則：キャメルケース（getUserData・sendMessage）
最初の単語は小文字で始め、2語目以降の先頭文字を大文字にします。

変数は意味を明確に

変数は「何の値を保持しているか」が一目でわかるような具体的な命名を心がけます。
略語や曖昧な単語は避け、状態や数量、種類を表す明確な単語で構成することで、後から見ても理解しやすいコードになります。

推奨される命名規則：キャメルケース（userCount・isActive）
ブール値には is や has などの接頭語を付けると状態の明示になります。

クラスはパスカルケース

クラス名は構造的な単位としての意味を持つため、先頭大文字のパスカルケースが適しています。
他の命名スタイルと明確に区別されることで、コードの階層構造や再利用性を認識しやすくなります。

推奨される命名規則：パスカルケース（UserCard・ProductList）
すべての単語の先頭を大文字にし、単語を連結します。

命名に使えるチェックリストと自動整形ツール

• チェックリスト例
  - 命名は具体的か？
  - 文法に合った形式か？
  - 曖昧な略語を使っていないか？
• ツール例
  ESLint・Prettier などのフォーマッターは、命名規則も含めた整形ルールを自動で適用できます。
  導入することで、チーム全体でスタイルの統一ができ、レビュー工数の削減にもつながります。

この記事に関連するよくあるご質問

まとめ

いかがでしたでしょうか？
今回の記事では、JavaScriptにおける命名スタイルの違いや選び方、そしてチームで共有すべき命名の基準について詳しく解説しました。

今回のポイントをまとめますと、次のとおりです。

他にもJavaScriptに関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします！

最後までお読みいただきありがとうございました！