JavaScriptにおいて、変数や関数の名前を決定する「命名」という作業は、単なるラベル付けではありません。
それはプログラムの意図を表現し、コードの読み手である自分自身やチームメンバーに対するコミュニケーションそのものです。
複雑化する現代のWebフロントエンド開発やサーバーサイドNode.js開発において、一貫性のある命名ルールを採用することは、保守性と可読性を劇的に向上させる鍵となります。
本記事では、モダンJavaScriptにおける最新の命名慣習と、クリーンなコードを書くための具体的なテクニックを詳しく解説します。
JavaScriptにおける命名規則の重要性
プログラミングの世界には「名前が付けられるものはすべて、その役割を明確にすべきである」という原則があります。
特にJavaScriptは柔軟な型システムを持つ言語であるため、名前から型や役割を推測できることが非常に重要です。
コードは書く時間よりも読まれる時間の方が長い
ソフトウェア開発の現場では、新しいコードを書く時間よりも、既存のコードを読み、デバッグし、拡張する時間の方が圧倒的に長いと言われています。
不適切な名前は、開発者の認知負荷を高め、バグの温床となります。
例えば、data や obj といった曖昧な名前は、その変数が何を含んでいるのかを理解するために、コードを遡って追跡しなければなりません。
チーム開発における共通言語としてのルール
複数の開発者が関わるプロジェクトでは、命名規則は「共通言語」として機能します。
プロジェクト全体で統一されたルールがあれば、他人が書いたコードであっても、違和感なく読み進めることができます。
これはコードレビューの効率化にも直結し、技術負債の蓄積を防ぐことにつながります。
基本的な命名ルールと識別子の制限
JavaScriptで変数や関数を定義する際には、言語仕様上のルールと、慣習上のルールの両方を理解しておく必要があります。
使用可能な文字と制約
JavaScriptの識別子（変数名、関数名など）には、以下の文字を使用できます。
- 英文字（A-Z, a-z）
- 数字（0-9）
- アンダースコア（_）
- ドル記号（$）
ただし、数字を先頭に使うことはできません。また、JavaScriptの予約語（let, const, class, function など）をそのまま変数名として使用することも禁止されています。
大文字と小文字の区別
JavaScriptはケースセンシティブ（大文字・小文字を区別する）な言語です。
userName と Username は別の変数として扱われます。
この性質を利用して、後述するキャメルケースなどの書き分けを行うのが一般的です。
モダンJavaScriptの主要なケーススタディ
現代のJavaScript開発では、対象の性質に応じていくつかの異なるケース（記述様式）を使い分けます。
| 命名スタイル | 記述方法 | 主な用途 |
|---|---|---|
| キャメルケース (lowerCamelCase) | 最初は小文字、単語の区切りを大文字にする | 変数、関数、メソッド |
| パスカルケース (UpperCamelCase) | 最初も区切りも大文字にする | クラス、コンポーネント、コンストラクタ |
| スネークケース (snake_case) | 単語間をアンダースコアで繋ぐ | JavaScriptでは稀（APIレスポンスなど） |
| スクリーミングスネークケース (SCREAMING_SNAKE_CASE) | 全て大文字、単語間をアンダースコアで繋ぐ | 定数（再代入不可・不変の値） |
キャメルケースの活用
JavaScriptにおいて最も標準的なのがキャメルケースです。
// 変数名の例
const userFirstName = "Taro";
let currentLoginCount = 5;
// 関数名の例
function fetchUserRecord(userId) {
// 処理内容
}パスカルケースの活用
クラス名や、ReactなどのUIライブラリにおけるコンポーネント名にはパスカルケースを使用します。
class UserDataValidator {
constructor(data) {
this.data = data;
}
}
function UserProfileCard() {
// UIコンポーネントの処理
}定数におけるスクリーミングスネークケース
プログラムの実行中に決して変わることのない「マジックナンバー」や設定値には、一目で定数だとわかる名前を付けます。
const MAX_RETRY_ATTEMPTS = 3;
const API_BASE_URL = "https://api.example.com/v1";変数の種類に応じた具体的な命名テクニック
名前を見れば、その変数がどのようなデータ型であり、どのような役割を担っているのかが推測できる状態が理想的です。
Boolean型（論理値）の命名
真偽値を保持する変数には、is, has, can, should といった助動詞を頭に付け、問いかけるような形にします。
これにより、条件分岐（if文）での可読性が向上します。
const isActive = true; // 状態：有効かどうか
const hasPermission = false; // 所有：権限を持っているか
const canEdit = true; // 可能：編集できるか
const shouldUpdate = false; // 義務：更新すべきかこのように命名することで、if (isActive) のように英文として自然に読めるようになります。
配列（Array）の命名
複数の要素を持つ配列には、複数形の名詞を使用するのが一般的です。
const users = ["Alice", "Bob", "Charlie"];
const prices = [100, 250, 500];
// 反復処理での利用例
users.forEach(user => {
console.log(user);
});userList や userArray といった、型名を名前に含める方法は現代ではあまり推奨されません。
単に複数形にするだけで、それがコレクション（集まり）であることを十分に示せるからです。
関数（Function）の命名
関数は「動作」を表すため、原則として動詞から始めるようにします。
get...：値を取得するset...：値を設定するfetch...：データを取得（非同期通信）するhandle...：イベントを処理するvalidate...：検証する
async function fetchCustomerOrders(customerId) {
// 通信処理
}
function validateEmailAddress(email) {
// バリデーション論理
}モダンJavaScript特有の命名パターン
ECMAScriptの進化に伴い、新しい構文に対応した命名慣習も定着してきました。
クラス内のプライベートフィールド
JavaScriptのクラスにおいて、外部から直接アクセスさせたくないプライベートなプロパティには、言語仕様として # プレフィックスを使用します。
class BankAccount {
#balance = 0; // プライベートフィールド
deposit(amount) {
this.#balance += amount;
}
get balance() {
return this.#balance;
}
}以前は _balance のようにアンダースコアを付けて「プライベートっぽく」見せる慣習がありましたが、現在は言語標準の # を使うのが正しいアプローチです。
非同期処理（Promise/async-await）
非同期処理を行う関数に対しては、その関数の戻り値が Promise であることを意識させる名前を付けます。
かつては ...Async というサフィックス（接尾辞）を付けるルールもありましたが、現代では動詞（fetch, requestなど）によって非同期であることを示唆するのが一般的です。
分割代入（Destructuring）での命名
オブジェクトからプロパティを取り出す際、元のプロパティ名が文脈に合わない場合は、リネーム機能を活用して適切な名前を付け直します。
const { data: userProfile, loading: isProfileLoading } = useUserProfile();
// userProfile を使用して描画これにより、汎用的な data という名前を、より具体的な userProfile として扱うことができ、コードの明瞭性が増します。
避けるべき命名アンチパターン
クリーンコードを実現するために、以下の命名は避けるべきです。
1文字だけの変数名
ループのカウンター変数（i, j）などの極めて限定的なスコープを除き、1文字の変数は避けるべきです。
// 悪い例
const d = new Date();
const u = getUser();
// 良い例
const today = new Date();
const currentUser = getUser();型情報を名前に含める（ハンガリアン記法）
かつてのプログラミングでは、strName や arrUsers のように型を名前に含める手法がありましたが、現代のJavaScript（特にTypeScript併用環境）では不要です。
エディタのホバー機能で型を確認できるため、名前は「意味」に集中すべきです。
冗長な命名
オブジェクトのプロパティ名に、オブジェクト名そのものを含める必要はありません。
// 悪い例
const user = {
userName: "Taro",
userAge: 25
};
// 良い例
const user = {
name: "Taro",
age: 25
};
console.log(user.name); // user.userName よりも自然コーディング規約とツールの活用
個人の意識に頼るだけでなく、仕組みによって命名規則を維持することも大切です。
ESLintによる自動チェック
ESLint を導入することで、チームで決めた命名規則を自動的に検証できます。
例えば、camelcase ルールを有効にすれば、スネークケースで変数を作った際に警告を出すことができます。
TypeScriptの導入
JavaScriptに静的型システムを導入するTypeScriptは、命名の悩みを大きく軽減します。
関数の引数や戻り値に型が付くことで、名前に過剰な情報を詰め込む必要がなくなり、より簡潔で本質的な命名が可能になります。
AIアシスタントとの対話
2026年現在の開発環境では、AIによるコード補完が当たり前になっています。
適切な命名を行うことは、AIに対して正確な文脈を伝えることでもあります。
AIが良い変数名を提案し、人間がそれを精査するというサイクルを回すことで、命名の質をより高めることができます。
まとめ
JavaScriptの変数命名規則は、単なる形式的なルールではなく、「コードの意図を正確に伝えるための設計」そのものです。
- 基本はキャメルケースを使用し、クラスにはパスカルケース、定数にはスクリーミングスネークケースを適用する。
- 真偽値には
is,hasなどの助動詞を付け、配列には複数形を用いる。 - 関数名は動詞から始め、その動作を明確にする。
- 1文字の名前や冗長な表現といったアンチパターンを避け、ESLintなどのツールで一貫性を保つ。
これらの原則を意識することで、あなたのコードは劇的に読みやすくなり、将来の自分やチームにとっての大きな資産となるはずです。
クリーンなコードは、まずクリーンな名前から始まります。
日々の開発の中で、一つひとつの変数に「最高の名前」を与える習慣を身につけていきましょう。