JavaScript | 変数名のルールとよく使われる命名記法

JavaScript

2020.04.052025.10.22

1) 「変数名（識別子）」って何？
2) JavaScriptでの基本ルール（絶対守る）
3) よく使われる命名スタイル（どれを使うか）
4) 実務での「どれを使うか」簡単ガイド
5) 良い例・悪い例（すぐ分かる）
6) 命名のベストプラクティス（初心者向けチェックリスト）
7) よくある疑問に簡単回答
8) すぐ使える短いルール（初心者用）
練習

1) 「変数名（識別子）」って何？

変数名（識別子）は、プログラム内で値を覚えておくためのラベルです。
例：age、userName、totalPrice — これらは値を指す名前です。
変数名は読みやすさ・整理のしやすさに直結するので、最初に覚えておくと後で楽になります。

2) JavaScriptでの基本ルール（絶対守る）

使える文字：英字（A–Z, a–z）、数字（ただし先頭には使えない）、アンダースコア _、ドル記号 $、そして Unicode の文字（日本語など）も技術的には使える。
先頭に数字はNG：5box はエラー。box5 はOK。
大文字と小文字は区別される：userName と UserName は別物。
予約語は使えない：var, let, function, if, for などは名前にできない（言語が特別扱いする語）。
-（ハイフン）は使えない：user-name は - を演算子と解釈されるため識別子には使えない。

（技術的には日本語も使えますが、共同開発やツールの互換性のため英語の半角英数字が一般的です。）

3) よく使われる命名スタイル（どれを使うか）

初心者にとって重要なのは「一貫して使うこと」。代表的スタイル：

camelCase（キャメルケース） — userName, totalScore
→ 変数・関数で多用。最も一般的。
PascalCase（パスカルケース、UpperCamel） — UserName, TotalScore
→ クラス・コンストラクタの名前に使う（class User {}）。
snake_case（スネークケース） — user_name, total_score
→ Pythonなどでよく使われるが、JSではあまり主流じゃないプロジェクトもある。
UPPER_SNAKE_CASE（定数） — MAX_SIZE, DEFAULT_TIMEOUT
→ 完全に変更しない“定数”を表すときに使うことが多い。
kebab-case（ケバブケース） — my-component
→ ファイル名やHTMLのクラス名などで使うことが多い（ただしJSの変数名には使えない）。

4) 実務での「どれを使うか」簡単ガイド

変数・関数：camelCase（例：let userAge = 20; function calculateTotal() {}）
クラス（コンストラクタ）：PascalCase（例：class UserAccount {}）
本当に不変（アプリ中で定数）：UPPER_SNAKE_CASE（例：const MAX_USERS = 100;）
真偽値（boolean）は is / has / can を頭につけると読みやすい：isActive, hasPermission。

5) 良い例・悪い例（すぐ分かる）

// 悪い（分かりにくい・慣習に反する）
let a = 10;
let user_name = "Ken";    // JSではあまり一般的で混在すると見にくい
let User = {};            // 先頭大文字はクラスを期待させるので避けたい（混乱の元）
let 5count = 3;           // 先頭が数字 → 文法エラー
let user-name = "A";      // '-' が演算子になってエラー

// 良い（読みやすい・慣習に従う）
let count = 3;
let userName = "Ken";     // camelCase を使用（変数／関数向け）
class User { }            // PascalCase：クラス名
const MAX_COUNT = 100;    // 定数は大文字スネーク
let isLoggedIn = false;   // boolean は is / has がわかりやすい

// 悪い（分かりにくい・慣習に反する）
let a = 10;
let user_name = "Ken";    // JSではあまり一般的で混在すると見にくい
let User = {};            // 先頭大文字はクラスを期待させるので避けたい（混乱の元）
let 5count = 3;           // 先頭が数字 → 文法エラー
let user-name = "A";      // '-' が演算子になってエラー

// 良い（読みやすい・慣習に従う）
let count = 3;
let userName = "Ken";     // camelCase を使用（変数／関数向け）
class User { }            // PascalCase：クラス名
const MAX_COUNT = 100;    // 定数は大文字スネーク
let isLoggedIn = false;   // boolean は is / has がわかりやすい

JavaScript

6) 命名のベストプラクティス（初心者向けチェックリスト）

意味のある名前にする（score は OK、s はダメ）。
関数は動詞（calculateTotal()、getUser()）。
Booleanは質問文風（isOpen、hasItems）。
一貫性を保つ：プロジェクトで camelCase を採るならそれで統一。
略しすぎない：num は OK、でも n2 や x1 は避ける。
ツールを使う：ESLint（命名ルールやコード品質をチェック）や Prettier（整形）を導入すると強制できる。

7) よくある疑問に簡単回答

Q: const の定数も camelCase でいい？
A: 小規模なら camelCase でも問題ないが、変更しない“設定値”やライブラリでは UPPER_SNAKE_CASE が一般的に見分けやすいです。
Q: 日本語の変数名はダメ？
A: 技術的には可能。ただし共同開発や将来の保守を考えると英語の半角英数字が無難です。
Q: _（アンダースコア）や $ は何に使う？
A: _ は「内部用」や「一時変数」に使われることがある。$ はライブラリ（例: jQueryの$）やDOM要素を表す命名に使う慣習があります。