JS Hoisting / Scope ビジュアライザー
var・let・const の巻き上げとスコープを1ステップずつ実行して可視化。
1console.log(x); // undefined
2var x = 1;
3console.log(x); // 1
ステップ 1 / 4
【初期化フェーズ】var x の宣言がスコープ先頭に巻き上げられ、undefined で初期化されました
スコープ変数表
🌐 グローバルスコープ
| 変数名 | 値 | 種別 | フェーズ |
|---|---|---|---|
x | undefined | var | 🟡 宣言済 |
Console
（出力なし）
なぜこうなる？
var で宣言された変数はスコープの先頭に「宣言だけ」が移動し、undefined で初期化されます。これが「巻き上げ（ホイスティング）」です。値の代入は元の位置で実行されます。
使い方
- 上部のプリセットボタンで学習したいシナリオを選んでください
- 「次へ ▶」ボタンを押してステップを進めると、スコープ変数表とコンソール出力がリアルタイムに更新されます
- コードパネルの「元のコード」「巻き上げ後（擬似）」タブを切り替えると、JavaScript エンジンが内部的にどう解釈しているかを確認できます
- スコープ変数表の色に注目：🔴 TDZ（アクセス不可）/ 🟡 宣言済（undefined）/ 🟢 初期化済（値あり）