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）/ 🟢 初期化済（値あり）
ホイスティングの全パターン
// 1. var宣言: 宣言がホイストされる（値はundefined）
console.log(x); // undefined（エラーにならない！）
var x = 10;
// 2. let/const宣言: ホイストされるがTDZ（一時的デッドゾーン）
// console.log(y); // ❌ ReferenceError!
let y = 10;
// 3. function宣言: 関数全体がホイストされる
greet(); // ✅ "Hello!" （宣言前に呼べる）
function greet() { console.log("Hello!"); }
// 4. function式/アロー関数: ホイストされない
// sayHi(); // ❌ TypeError: sayHi is not a function
const sayHi = () => console.log("Hi!");
// 5. class宣言: ホイストされるがTDZ
// const obj = new MyClass(); // ❌ ReferenceError!
class MyClass {}実務での結論：const/let を使い、関数は使う前に定義する。これだけでホイスティングの問題は起きません。varとfunction宣言のホイスティングは「古いコードを読むとき」に知っておくと便利です。