ReferenceError: 未定義の変数

解説

このレッスンで分かること

• この記事では「ReferenceError: 未定義の変数」を デバッグ基礎 の現場で使える形で整理します
• ReferenceError とは をおさえれば、現場で迷ったときに立ち戻れる
• よくある原因 をおさえれば、現場で迷ったときに立ち戻れる
• エラーメッセージの読み方 をおさえれば、現場で迷ったときに立ち戻れる
• 解決のコツ をおさえれば、現場で迷ったときに立ち戻れる

解説

ReferenceError とは

宣言されていない変数を参照したときのエラーを理解し、修正します。本レッスンでは、ReferenceError の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

ReferenceError とは

ReferenceError は、存在しない変数を参照しようとしたときに発生します。

解説

ReferenceError は「呼んだ名前の変数が、現在の スコープ から見えない」サイン。タイポか宣言漏れか、スコープ外参照かのいずれかに必ず当てはまります。

よくある原因

1. 変数名のタイポ — mesage vs message
2. 宣言忘れ — let や const を書き忘れた
3. スコープ外 — ブロック内で宣言した変数を外から参照

エラーメッセージの読み方

「mesage が定義されていない」= その名前の変数が存在しない

解説

エラーが指す行ではなく「指している名前」を最優先で読みます。タイポなら数秒で直り、スペルが正しければ次に スコープ を疑う、という順序が最短ルートです。

解決のコツ

1. エラーメッセージの変数名をよく見る
2. 正しいスペルで 宣言 されているか確認
3. 変数の スコープ を確認（どこで宣言したか）

現場でよくある具体例

1. 現場ケース 1 — 「本番だけ落ちる」謎エラーが、環境変数の NODE_ENV 違いで設定ファイルを切り替えていなかったことが原因。二分探索でコミットを絞り 30 分で解決
2. 現場ケース 2 — フロントの無限ローディングは、useEffect 依存配列に毎レンダー新しい関数を渡していた。React DevTools のレンダー回数で気づけた
3. 現場ケース 3 — DB の遅いクエリは EXPLAIN でフルスキャン発覚。複合インデックス追加で 300 倍速く。「測ってから直す」の典型例

次にとるべきアクション

1. 直近 1 週間で詰まったエラーを 1 つ思い出す — そのエラーに「ReferenceError: 未定義の変数」で学んだアプローチを適用してみる
2. デバッグメモのテンプレを自分用に作る — 現象・再現手順・仮説・検証結果の 4 項目を markdown で固定化する
3. console.log だけで解いていた問題に DevTools のブレークポイントを使う — ステップ実行を 1 回でも体験する

次のレッスン

次は TypeError: undefined のプロパティ参照 で、宣言されていない変数を参照したときのエラーを理解し、修正します を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

1. 参照：未定義変数 の要点を自分の言葉で説明できる
2. このレッスンの最小コード (または操作手順) を見ずに書ける
3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. 参照：未定義変数 とは何か、1 文で説明してください。

関連レッスン

• TypeError: is not a function
• TypeError: null参照エラー
• mapのreturn忘れ

参考にした出典

• MDN Web Docs「Debugging JavaScript」 — ブラウザ DevTools を使ったデバッグ手順（出典: Mozilla, https://developer.mozilla.org/ja/docs/Tools/Debugger）
• Google Chrome DevTools 公式ドキュメント — ブレークポイント・パフォーマンスタブ等の正式仕様（出典: Google, https://developer.chrome.com/docs/devtools/）
• IEEE Software「Why Programs Fail」 — 不具合発見と修正プロセスに関する古典研究（出典: Andreas Zeller, Morgan Kaufmann, 2009, https://ieeexplore.ieee.org/）

解説

学習を加速したい方へ

デバッグの基礎ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータル で実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。