JavaScriptの巻き上げ（Hoisting）の仕組み｜let/const/varの挙動の違いとTDZの回避法

JavaScriptのプログラムを記述している際、宣言する前の変数や関数を呼び出してもエラーにならずに実行できてしまう不思議な現象に遭遇したことはないでしょうか。

これは「巻き上げ（Hoisting）」と呼ばれるJavaScript特有の性質によるものです。

巻き上げを正しく理解していないと、意図しないバグを引き起こしたり、コードの可読性を著しく低下させたりする原因となります。

特にモダンなJavaScript開発においては、letやconst、そして「一時的死角（TDZ）」の挙動を把握することが不可欠です。

本記事では、プロのエンジニアとして知っておくべき巻き上げの仕組みと、宣言方法による挙動の違いについて詳しく解説します。

JavaScriptにおける巻き上げ（Hoisting）の定義

巻き上げとは、JavaScriptエンジンがスクリプトを実行する前に、宣言部分をスコープの先頭に移動させたかのように扱う動作を指します。

物理的にコードが書き換えられるわけではありませんが、実行前の「コンパイルフェーズ（メモリ割り当てフェーズ）」において宣言がスキャンされます。

JavaScriptエンジンは、コードを一行ずつ実行する前に、まずスコープ内のすべての変数宣言と関数宣言をメモリに登録します。

この仕組みにより、開発者は宣言よりも前の行でその変数や関数を参照することが可能になります。

ただし、宣言の種類（var, let, const, function）によって、メモリに登録された直後の状態が異なる点に注意が必要です。

この状態の違いが、プログラムの実行結果に大きな影響を及ぼします。

var宣言による巻き上げの挙動と注意点

従来のJavaScriptで主流だったvar宣言は、最も顕著な巻き上げの挙動を示します。

varで宣言された変数は、スコープの先頭で宣言されたものとみなされ、同時にundefinedで初期化されます。

以下のコード例を見てみましょう。

// 宣言前に変数を利用する
console.log(message);

// 変数の宣言と代入
var message = "こんにちは、JavaScript！";

// 宣言後の利用
console.log(message);

undefined
こんにちは、JavaScript！

上記の例では、1行目の時点でmessageという変数は既にメモリ上に存在しています。

しかし、代入処理は元の行で行われるため、1行目の時点では値が確定しておらずundefinedが出力されます。 これが「宣言の巻き上げ」であり、エラーにならずに処理が続行されてしまう点がvarの大きな特徴です。

大規模な開発においてはこの挙動が原因で、変数の値が予期せずundefinedになり、デバッグを困難にすることが多々ありました。

letとconstにおける巻き上げとTDZの仕組み

モダンなJavaScript（ES6以降）で導入されたletとconstも、実は内部的には巻き上げが行われています。

しかし、varとは異なり、宣言の前にアクセスしようとするとReferenceError（参照エラー）が発生します。

この挙動の違いを理解するための鍵となるのが「一時的死角（TDZ）」という概念です。

Temporal Dead Zone（一時的死角）とは

Temporal Dead Zone（TDZ）とは、スコープの開始から変数宣言が実行されるまでの期間を指します。

letやconstで宣言された変数は、巻き上げによってメモリに確保されますが、初期化は行われません。

初期化が行われる前の変数にアクセスすることは言語仕様で禁止されています。

// スコープの開始（TDZの始まり）
try {
    console.log(userName); // ここでTDZ内の変数にアクセス
} catch (e) {
    console.error("エラー発生:", e.message);
}

let userName = "エンジニア太郎"; // ここで初期化（TDZの終わり）
console.log(userName);

エラー発生: Cannot access 'userName' before initialization
エンジニア太郎

このように、letやconstは巻き上げられているものの、「初期化が完了するまでアクセスできない状態」として保護されています。

この仕組みがあるおかげで、開発者は変数の宣言順序を意識せざるを得なくなり、安全なコードを書くことができます。

なお、constは宣言と同時に値を代入しなければならないため、TDZの影響をより強く受けることになります。

関数宣言と関数式の巻き上げの違い

関数においても、その定義方法によって巻き上げの挙動が大きく異なります。

特に関数宣言（Function Declaration）と関数式（Function Expression）の違いは重要です。

関数宣言の場合

関数宣言は、関数全体が完全に巻き上げられます。

そのため、宣言文よりも前の行でその関数を呼び出すことが可能です。

// 宣言前に関数を呼び出す
greet();

// 関数宣言
function greet() {
    console.log("関数宣言の巻き上げに成功しました。");
}

関数宣言の巻き上げに成功しました。

これは、JavaScriptエンジンが実行前に「この関数はこの名前で定義されている」という情報を完全に把握し、呼び出し可能な状態にするためです。

ライブラリの構成などで、補助的な関数を下部にまとめたい場合に便利な性質です。

関数式とアロー関数の場合

一方で、変数に関数を代入する「関数式」や「アロー関数」は、変数の巻き上げルールに従います。

もしvarを使っていればundefinedとなり、letやconstを使っていればTDZによりエラーとなります。

try {
    displayResult(); // エラーになる
} catch (e) {
    console.error("関数式のエラー:", e.message);
}

// constを使用した関数式
const displayResult = () => {
    console.log("これは実行されません");
};

関数式のエラー: Cannot access 'displayResult' before initialization

モダンな開発では、予期せぬ実行を防ぐために、関数もconstによる関数式で定義することが推奨されます。

これにより、プログラムの実行フローが上から下へと流れる自然な形に保たれます。

クラス（class）における巻き上げの注意点

ES6で導入されたクラス構文も、letやconstと同様の挙動を示します。

クラス宣言は巻き上げられますが、初期化はされません。

したがって、クラスを定義する前にnew演算子でインスタンス化しようとすると、参照エラーが発生します。

try {
    const myCar = new Car();
} catch (e) {
    console.error("クラス宣言のエラー:", e.message);
}

class Car {
    constructor() {
        this.type = "セダン";
    }
}

クラス宣言のエラー: Cannot access 'Car' before initialization

関数宣言とは異なり、クラスは必ず定義した後に使用しなければならないという制約があります。

これはオブジェクト指向設計において、型の定義が利用よりも先にあるべきだという設計思想に基づいています。

宣言方法による巻き上げの比較まとめ

ここまで解説した各宣言方法の違いを表にまとめました。

これらを比較することで、なぜvarの使用が推奨されないのかが明確になります。

この表からわかる通り、varだけが「エラーを出さずに不完全な状態でアクセスを許容する」という特異な性質を持っています。

プログラムの堅牢性を高めるためには、letやconstを基本とし、TDZの制約を積極的に利用するのが賢明です。

巻き上げに関連するトラブルを回避するための実践手法

巻き上げによる混乱やバグを防ぐためには、コーディング規約を統一することが最も効果的です。

プロの現場で実践されている具体的な回避策をいくつか紹介します。

まず第一に、var宣言の使用を全面的に禁止することが推奨されます。

現代のJavaScript開発において、varを使用しなければならない場面はほぼ存在しません。

次に、変数の宣言は必ずスコープの冒頭で行うように習慣づけましょう。

たとえletやconstを使っていても、使用する直前で宣言するより、そのブロックで使う変数を最初に提示したほうが可読性が高まります。

また、ESLintなどの静的解析ツールを導入し、宣言前の変数利用を自動的に検知できる環境を整えてください。

具体的には「no-use-before-define」というルールを有効にすることで、チーム全体で巻き上げのリスクを排除できます。

関数についても、トップレベルの関数宣言を除き、可能な限りconstを用いたアロー関数を使用することで、実行順序を厳格に管理できます。

これらの習慣を身につけることで、JavaScriptエンジン内部の複雑な動きに惑わされることなく、クリーンなコードを維持できるはずです。

まとめ

JavaScriptの巻き上げは、エンジンの内部処理として非常に重要な役割を担っています。

しかし、その挙動はvar、let、constといった宣言キーワードによって大きく異なります。

varはundefinedとして巻き上げられるため、予期せぬ挙動を招くリスクがあります。

一方で、モダンなletやconstはTDZ（一時的死角）によって保護されており、宣言前のアクセスを厳格にエラーとして処理します。

関数宣言は全体が巻き上げられるため便利ですが、大規模なプロジェクトでは実行順序を明示するためにconstによる関数式が好まれる傾向にあります。

巻き上げの仕組みを正しく理解し、適切なスコープ管理と宣言方法を選択することで、バグの少ない洗練されたコードを記述することができるでしょう。

日々の開発においては、TDZを「敵」ではなく「安全装置」として捉え、エラーが早期に発見される設計を心がけてください。