JavaScript

Uncaught ReferenceError: Cannot access 'x' before initialization

let/constの宣言前にアクセスしている

こんな症状

変数を使った行で「Cannot access 'x' before initialization」と表示される。let/constで宣言した変数を、宣言より前の行で使っているのが原因だよ。

まず試す

エラーの変数名を検索し、その let/const 宣言を『使う行より前』に移動する。

// ❌ 宣言前に使用
console.log(color);
let color = "red";

// ✅ 宣言を先に
let color = "red";
console.log(color);

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓宣言より上の行で使っている
→ let/const の宣言を使用行より前に移す。
✓関数の中で外と同じ名前を let 宣言している
→ 関数内の宣言が外の変数を隠す（シャドーイング）。外の変数を使いたいなら関数内の名前を変える。
✓var に戻したくなった
→ var は巻き上げで undefined になるだけでバグの温床。戻さず宣言位置を直す。

なぜ起きる？

let/constで宣言した変数を、宣言行より前で使おうとしているよ。これはTDZ（Temporal Dead Zone）と呼ばれる仕組みで、let/constの変数は宣言行に到達するまでアクセスできないんだ。わかりにくいのは「関数の中で同じ名前の変数を宣言している」ケースで、関数の外に同名の変数があっても、関数内のlet宣言が優先されて（シャドーイング）、その宣言行より上ではこのエラーになるよ。varと違ってlet/constは巻き上げられても初期化されないのがポイントだよ。

✕ エラーが起きるコード

let color = "red";

function paint() {
  console.log(color);  // ← ここでエラー
  let color = "blue";  // 関数内の宣言が外のcolorを隠す
}
paint();
// Uncaught ReferenceError: Cannot access 'color' before initialization

✓ 直したコード

let color = "red";

function paint() {
  const newColor = "blue";  // 名前を変えれば外のcolorも使える
  console.log(color, newColor); // red blue
}
paint();

✅ 直ったか確認

保存して再読み込み。エラーが消え、変数が期待した値を表示すればOK。

🆘 まだ直らないときは

クラスのメソッドやモジュールの循環参照でも起きることがある。読み込み順も確認しよう。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

Uncaught SyntaxError: Identifier 'x' has already been declared — 同じ変数名を2回宣言している
Uncaught TypeError: Assignment to constant variable. — constで宣言した変数に再代入しようとした
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
Uncaught TypeError: Cannot read properties of undefined (reading 'length') — undefinedに対して.lengthを読んでいる
Uncaught TypeError: Cannot set properties of null (setting 'textContent') — nullに対してプロパティを設定しようとしている

🔗 別カテゴリの関連エラー

📖 この問題を学べるレッスン

JSレッスン2：変数とデータ型で根本から理解する →

✏️ 手を動かして練習

このテーマの図解ドリルで実際に書いて確認する →

📝 関連ブログ記事

プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説

📖 関連する用語

🚀 JSレッスン2：変数とデータ型で根本解決しよう！

このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。

JSレッスン2：変数とデータ型へ →