JavaScriptの変数命名規則｜リーダブルコードを実現するための推奨ルールと実例集

2026年5月7日2026年5月8日

基礎知識

JavaScriptのプログラムを記述する際、多くのエンジニアが最も頭を悩ませるのは「ロジックの構築」ではなく、実は「変数や関数の名前付け」であると言われています。

名前はコードの意図を伝えるための最も重要なドキュメントであり、適切な命名規則に従うことは、開発チーム全体の生産性を向上させるだけでなく、数ヶ月後の自分自身を助けることにも繋がります。

本記事では、2026年現在のモダンな開発現場で求められるJavaScriptの命名規則と、リーダブルコードを実現するための具体的なテクニックを詳しく解説します。

目次 [ close ]

JavaScriptにおける命名の基本原則

JavaScriptには、言語仕様として定められたルールと、コミュニティやプロジェクトで一般的に採用されている慣習(コーディング規約)の2種類が存在します。

まずは、エラーを出さないための最低限のルールと、可読性を高めるための標準的なスタイルを確認しましょう。

識別子に使用できる文字と制限

JavaScriptの変数名(識別子)には、以下の文字を使用することができます。

英字 (a-z, A-Z)
数字 (0-9)
アンダースコア (_)
ドル記号 ($)

ただし、数字から始めることはできません。また、JavaScriptの予約語 ( if, for, class, const など) も変数名として使用できません。

モダンなJavaScriptで採用される3つのケース

JavaScriptでは、用途に応じて以下の3つの記述スタイルを使い分けるのが一般的です。

キャメルケース (camelCase): 最初の単語を小文字で始め、以降の単語の先頭を大文字にする形式。JavaScriptの変数や関数名において、最も標準的なスタイルです。
パスカルケース (PascalCase): すべての単語の先頭を大文字にする形式。主にクラス名やReactコンポーネント名に使用されます。
アッパースネークケース (UPPER_SNAKE_CASE): すべて大文字で記述し、単語間をアンダースコアで繋ぐ形式。再代入されない定数に使用されます。

カテゴリ	スタイル	例
変数・関数	camelCase	`userName`, `calculateTotalValue()`
クラス・コンポーネント	PascalCase	`UserSession`, `UserProfileCard`
定数 (マジックナンバー回避)	UPPER_SNAKE_CASE	`MAX_RETRY_COUNT`, `API_ENDPOINT_URL`

リーダブルコードを実現する命名の推奨ルール

単に文法的に正しいだけでなく、「その変数が何を保持しているのか」が一目で理解できる名前を付けることが重要です。

意味のある具体的な名前を付ける

抽象的な名前( data, info, item など)は、スコープが極めて狭い場合を除き避けるべきです。

JavaScript

// 良くない例
const d = new Date();
let val = 10;
const data = { id: 1, name: "Alice" };

// 良い例
const currentDateTime = new Date();
let maxUserLimit = 10;
const userProfile = { id: 1, name: "Alice" };

特に data という名前は、コンピュータで扱う情報のすべてが「データ」であるため、実質的に何も説明していないことになります。

customerData や orderHistory のように、具体的で限定的な名称を選択してください。

型を推測できる接頭辞を活用する

JavaScriptは動的型付け言語であるため、変数名からその値の「型」が推測できると、デバッグやコードレビューの効率が飛躍的に高まります。

真偽値 (Boolean)

真偽値には、質問を投げかけるような接頭辞を付けます。

is: 状態を表す ( isReady, isLoggedIn )
has: 所持・存在を表す ( hasPermission, hasItems )
can: 可能かどうかを表す ( canExecute, canUpdate )
should: 推奨される動作を表す ( shouldRedirect, shouldRefresh )

JavaScript

const isLoggedIn = true;
const hasAdminAccess = false;

if (isLoggedIn && hasAdminAccess) {
  // 管理者向けの処理を実行
  console.log("Welcome, Administrator.");
}

配列 (Array)

配列は複数の要素を持つため、複数形にするか、末尾に List や Collection を付けるのが定石です。

JavaScript

// 複数形
const users = ["Alice", "Bob", "Charlie"];

// Listを付ける
const productList = ["Apple", "Orange", "Banana"];

// map関数などでのイテレーション
users.forEach((user) => {
  console.log(user);
});

実行結果

Alice
Bob
Charlie

否定形を避けたポジティブな命名

条件分岐において、否定形を重ねた名前( isNotValid, hasNoData )は、論理の反転 (!) が加わった際に、二重否定となって直感的な理解を妨げます。

JavaScript

// 読みにくい例
const isNotComplete = false;
if (!isNotComplete) {
  // 完了しているのか、していないのか混乱しやすい
}

// 読みやすい例
const isComplete = true;
if (isComplete) {
  // 完了していることが一目でわかる
}

「肯定的な名前」をベースに命名し、否定が必要な場合はコード上の ! 演算子で表現するのがベストプラクティスです。

スコープとコンテキストに応じた使い分け

変数の寿命や役割に応じて、命名の「詳細度」を調整することも大切です。

短い変数名が許容されるケース

一般的に短い変数名は推奨されませんが、スコープが極めて限定的である場合に限り、慣習的に使用されるものがあります。

ループのカウンタ: i, j, k
数学的な座標: x, y, z
例外オブジェクト: e, err
アロー関数の引数(ごく短距離で使用する場合): v (value), k (key)

JavaScript

// ループカウンタの例
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// エラーハンドリングの例
try {
  // 処理
} catch (err) {
  console.error(err.message);
}

これら以外の場所で let a = 1; のような命名を行うと、後からコードを読む開発者がその変数の役割を特定するために、定義場所までスクロールして戻らなければならなくなります。

プライベートプロパティの表現

クラス内で外部から直接参照されるべきではないプロパティには、いくつかの慣習があります。

#プリフィックス: モダンなJavaScript (ECMAScript 2022以降) では、言語レベルでプライベートフィールドがサポートされており、変数名の先頭に # を付けます。
アンダースコア (_): 以前からの慣習として、プライベートであることを明示するために _ を先頭に付けることがあります (ただし、これは言語的なアクセス制限ではありません)。

JavaScript

class BankAccount {
  #balance = 0; // 言語レベルのプライベート変数

  constructor(initialAmount) {
    this.#balance = initialAmount;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
console.log(account.getBalance());
// console.log(account.#balance); // 文法エラーになる

実行結果

TypeScript環境下での命名戦略

2026年現在、JavaScript開発の主流はTypeScriptへと移行しています。

型定義が存在する環境では、変数名に型情報を冗長に含める必要がなくなります。

ハンガリアン記法の廃止

かつては strName, numAge, objUser のように、変数名の頭に型を明示する「ハンガリアン記法」が流行した時期もありました。

しかし、TypeScriptではエディタのホバー機能や静的解析によって型が自明であるため、これらは推奨されません。

TypeScript

// 冗長な命名 (TypeScriptでは不要)
let userNameString: string = "Taro";

// 洗練された命名
let userName: string = "Taro";

むしろ、型名と変数名が重複して冗長になる場合は、より意味にフォーカスした名前を付けます。

TypeScript

// 重複感のある例
const userObject: User = await fetchUser();

// すっきりとした例
const currentUser: User = await fetchUser();

避けるべきアンチパターン

多くの開発現場で「読みづらい」と判断される典型的なパターンをまとめました。

1. 魔法の数字(マジックナンバー)をそのまま使う

コードの中に唐突に現れる数字は、その意味が不明です。

これらには名前を付けた定数として定義しましょう。

JavaScript

// アンチパターン
if (userAge >= 20) {
  // 処理
}

// 推奨
const ADULT_AGE_THRESHOLD = 20;
if (userAge >= ADULT_AGE_THRESHOLD) {
  // 処理
}

2. 似たような名前の乱立

data1, data2, tempA, tempB といった連番やアルファベットによる区別は、バグの温床となります。

3. 単語の省略しすぎ

calculateOriginalPrice を calcOrigPrc と省略すると、初見で意味を理解するのに時間がかかります。

現代のIDE(統合開発環境)は強力な補完機能を備えているため、長くなってもいいので「明確さ」を優先すべきです。

4. 専門用語やスラングの使用

プロジェクトのドメイン(業務領域)に合わない、独自の比喩やスラングを変数名に使うのは避けましょう。

例えば、削除フラグを isDead と呼ぶのではなく、標準的な isDeleted を使用します。

命名に迷った時の処方箋

どうしても適切な名前が思い浮かばない場合は、以下の手順を試してみてください。

声に出して説明してみる: 「これは、ユーザーがログインに失敗した回数を数えるための変数です」と説明できるなら、そこから単語を抽出します (loginFailureCount)。
AIToolsの活用: 2026年の開発環境では、GitHub CopilotなどのAIツールが文脈に応じた適切な名前を提案してくれます。提案された名前が前述の原則に従っているか確認して採用しましょう。
辞書・類語辞典を引く: get だけでなく fetch, retrieve, acquire など、動作のニュアンスに最適な動詞を探します。