やあ。今日もフロントエンドの泥沼で戦っている君に、一つ深淵の話をしようか。
JavaScriptの「巻き上げ（Hoisting）」という言葉、君も一度は聞いたことがあるはずだ。でも、多くのエンジニアが「なんとなく宣言が上に移動するんでしょ？」という浅い理解で止まっている。これが大きな落とし穴なんだ。
特に、`var` と `let`/`const` の挙動の違いを正確に理解していないと、いざという時にデバッグで死ぬことになる。今日は、ブラウザのエンジンが裏側で一体何を考えているのか、その「初期化のタイミング」という核心に迫っていこう。
—
1. なぜ `var` は裏切るのか：`undefined` という名の罠
まず、`var` の挙動を振り返ろう。こいつは歴史的経緯から、コードが実行される前段階（コンパイルフェーズ）で、スコープの先頭に「とりあえず存在だけ登録する」という処理が行われる。
この時、JSエンジンは律儀に `undefined` を代入して初期化まで済ませてしまうんだ。これが「巻き上げ」の正体だ。
console.log(myVar); // -> undefined (エラーにならない！)
var myVar = “Hello, JavaScript!”;
console.log(myVar); // -> “Hello, JavaScript!”
これの何が危険か？ 実務において「変数が存在すること」と「変数が正しく初期化されていること」を混同させるからだ。本来なら「まだ定義されてないよ！」と怒られるべきミスが、ただの `undefined` としてすり抜けてしまう。これがバグの温床になる。
—
2. `let`/`const` が守る「死の領域」：Temporal Dead Zone
ES6で導入された `let` と `const` は、この `var` の甘さを完全に排除するために生まれた。こいつらは「宣言」こそスコープの先頭に巻き上げられるんだが、決定的な違いがある。
「初期化が行われるまで、その変数には一切触れさせない」
この、宣言行から初期化行までの「触れてはいけない領域」のことを、専門用語で TDZ（Temporal Dead Zone：一時的デッドゾーン） と呼ぶ。この期間にその変数にアクセスしようとすると、JSエンジンは容赦なく `ReferenceError` を投げてくる。
{
// ここから下の行までは「死の領域(TDZ)」
// console.log(myLet); // ここで触ると ReferenceError: Cannot access ‘myLet’ before initialization
let myLet = “やっと生きた”; // ここでようやく初期化が完了し、TDZを抜ける
console.log(myLet);
}
この「初期化されるまで使わせない」という強制力こそが、コードの整合性を保つための最強の防壁なんだ。
—
3. 実務で遭遇する「巻き上げ」の事故現場
たまに、「`let` だから巻き上げられない」と勘違いしているエンジニアを見かけるが、それは間違いだ。以下の例を見てくれ。
let status = “active”;
function checkStatus() {
console.log(status); // ここでエラーになるか？
let status = “inactive”; // 巻き上げのせいで、関数スコープ内のstatusを参照しにいこうとする
}
checkStatus();
// 結果: ReferenceError: Cannot access ‘status’ before initialization
これは関数内の `let status` が巻き上げられ、TDZが生成されているためだ。外側の `status` を参照する前に、「ローカルに `status` があることは知ってるよ。でもまだ初期化してないから使っちゃダメ！」というエラーが出ている。
現場では、関数の先頭で変数を定義し忘れて、後から追加した時にこのエラーにぶつかることが多い。「宣言はスコープの先頭に書く」 という古き良き原則は、モダンなJSでもやはり正義なんだ。
—
4. チーフアーキテクトからの提言：どう書くべきか
ここまで読んでくれた君ならもうわかるはずだ。現場でのベストプラクティスは極めてシンプルだ。
1. `var` は過去の遺物。 現代のコードベースで `var` を使う理由は一つもない。即座に封印しよう。
2. 基本は `const`。 書き換える必要がある場合のみ `let` を使う。この徹底だけで、コードの予測可能性は劇的に向上する。
3. スコープを小さく保つ。 巻き上げのリスクを最小化するには、変数の生存期間（ライフサイクル）を可能な限り短くすること。`{ … }` ブロックを積極的に使ってスコープを分離しよう。
実践的なコード例：クリーンなスコープ管理
// 悪い例: スコープが広すぎる
let result;
if (success) {
result = fetchData();
}
process(result);
// 良い例: ブロックスコープでTDZを意識する
if (success) {
const result = fetchData(); // 使う場所の直前で宣言
process(result);
}
// ここではもうresultは存在しないので、不要な汚染を防げる
「仕様を理解している」というのは、言語の機能を使いこなすことじゃない。言語の挙動を理解した上で、いかに「バグが入り込む隙間」をコードから排除するかだ。
巻き上げやTDZは、ただの言語仕様ではなく、君のコードを守るための「ガードレール」だと思ってほしい。明日からの開発で、少しだけ `let`/`const` の背後にあるエンジンの動きを意識してみてくれ。きっと、デバッグの質がガラリと変わるはずだ。
また何か詰まったら、いつでも聞きに来いよ。現場の最前線で待っている。
コメント