亡霊としてのvar：巻き上げ（Hoisting）がもたらすアーキテクチャの脆弱性
JavaScriptを長年書いていると、時折「なぜこんな挙動をするのか」という霧の中に迷い込むことがある。その霧の正体の一つが、`var`の巻き上げ（Hoisting）だ。
現代のモダンな開発現場では「`const`と`let`を使え」という教条が浸透しているが、なぜそれが単なる好みの問題ではなく、アプリケーションの堅牢性を担保するための防衛策なのか。ブラウザの実行エンジンとメモリ管理の観点から、この「亡霊」の正体を暴いていこう。
1. 巻き上げのメカニズム：実行コンテキストとメモリの確保
JavaScriptエンジン（V8など）がコードを実行する際、まずソースコードを解析し、スコープ内に存在する変数の宣言をメモリ上に確保する「フェーズ」が存在する。これが巻き上げの正体だ。
`var`で宣言された変数は、その関数スコープの先頭に生成され、同時に`undefined`で初期化される。つまり、コードが一行も実行される前に、エンジンは「ここに変数がある」と認識し、メモリ空間にその場所を予約してしまうのだ。
// 開発者が意図しない挙動の典型例
function processData() {
console.log(myVar); // -> undefined (エラーにはならない)
if (true) {
var myVar = “Hello, World!”;
}
console.log(myVar); // -> “Hello, World!”
}
このコードにおいて、`if`ブロックの外側で`myVar`が参照できてしまうのは、`var`が「ブロックスコープ」を無視し、関数スコープ全体を支配下に置いてしまうからだ。メモリ上では、ブロックの内外に関わらず、関数が呼ばれた瞬間に`myVar`というシンボルが`undefined`として登録されている。
2. 非同期処理と競合：アーキテクチャの爆弾
この特性が最も牙を剥くのは、非同期処理（PromiseやsetTimeout）と組み合わせたときだ。ループ内で非同期処理を行う際、`var`を使っていると、クロージャが変数の「値」ではなく「参照」を共有してしまう。
for (var i = 0; i < 3; i++) {
setTimeout(() => {
// ここで参照される i は、ループ終了後の最終値 3 に固定されている
console.log(`Index: ${i}`);
}, 100);
}
// 期待値: 0, 1, 2
// 実際の挙動: 3, 3, 3
上級エンジニアなら即座に「クロージャでスコープを切り分けろ」と反応するだろう。だが、そもそも`let`を使用していれば、エンジン側がループの反復ごとに独立したスコープを作成し、変数の生存範囲を適切に管理してくれる。`var`の巻き上げを回避するために過剰なクロージャを生成することは、メモリ消費の無駄であり、ガベージコレクション（GC）の負荷を増大させる要因となる。
3. なぜ「堅牢なアプリ」にはvarが不要なのか
現代のWebアプリケーションにおいて、フロントエンドのコードは複雑性を極めている。状態管理（State Management）において、意図しない場所で変数が書き換えられる「変数の汚染」は、デバッグ困難なバグの温床だ。
- スコープの不透明性: `var`はどこからでもアクセスできるため、コードの可読性を下げ、副作用を予見不能にする。
- メモリ効率: `var`の生存期間は不必要に長く、エンジンがいつそのメモリを解放できるか判断しにくい。
- レンダリング負荷: 非同期の競合や予期せぬ値の更新が、React等の仮想DOMの再レンダリングをトリガーし、パフォーマンスを劣化させるケースは後を絶たない。
究極の回避策：Temporal Dead Zone (TDZ) の活用
`let`と`const`が導入された最大の意義は、「初期化されるまでアクセスを許さない」というTemporal Dead Zone（一時的死域）を設けたことにある。
// console.log(a); // ReferenceError: Cannot access ‘a’ before initialization
let a = 10;
この「あえてエラーを出す」挙動こそが、エンジニアに対する「設計ミスを今すぐ修正せよ」という最強のフィードバックなのだ。実行時に黙って`undefined`を返し、後で「なぜか値が取れない」という深い沼にハマるよりも、開発段階で即座に落ちてくれた方が、アプリケーションの健全性は遥かに高い。
結論：コードの意図をブラウザに伝える
技術選定において「なぜそれを使うか」を説明できない技術は、負債となる。`var`の巻き上げを理解することは、JavaScriptエンジンがどのようにあなたのコードを解釈し、メモリを割り当てているかを理解することと同義だ。
私たちは、単に動くコードを書くのではない。「コードの意図をエンジンと後続のエンジニアに正確に伝える」ために書くのだ。`const`と`let`を使い、ブロックスコープを厳密に制御する。この小さな規律が、数万行規模のアプリケーションを安定させるための、揺るぎない土台となる。
過去の遺産としての`var`を葬り去り、型安全で予測可能な現代的なアーキテクチャへと舵を切る。それが、伝説のフロントエンド・アーキテクトが辿り着くべき境地である。
コメント