こんにちは！フロントエンドからNode.jsの深層まで、JavaScriptのエンジンが奏でるコードの鼓動を日々追いかけているチーフアーキテクトです。
今回は、多くの開発者が最初に躓き、そしてJavaScriptの本当の美しさに魅了される扉である「実行コンテキスト」と「クロージャ」の内部構造について、ブラウザのDevToolsを片手に徹底解剖していきましょう。
ネットを検索すれば「変数を閉じ込める機能です」といった表面的な説明は山のように出てきますが、V8エンジンがメモリのヒープ上でどう変数環境（Variable Environment）を構築しているのか、その手触りまで理解している人は意外と少ないものです。
ここをクリアすれば、JavaScriptのメモリ管理とスコープの挙動はあなたの完全な掌中に入ります。さあ、一緒に深淵を覗いてみましょう。
—
1. そもそも「実行コンテキスト」って何をしているの？
私たちが書いたJavaScriptのコードがブラウザに読み込まれ、実行されるとき、JavaScriptエンジン（V8など）の内部では「実行コンテキスト（Execution Context）」という目に見えない実行環境の箱が次々と作られています。
イメージとしては、ロシアの民芸品「マトリョーシカ」を思い浮かべてみてください。
一番外側にある「グローバル実行コンテキスト」の中に、関数が呼び出されるたびに入れ子状の「関数実行コンテキスト」がポンポンと生成されていきます。
この箱の中には、主に以下の3つの大切な情報が詰まっています。
1. 変数環境（Variable Environment）: `var` で宣言された変数や関数宣言。
2. 語彙的環境（Lexical Environment）: `let` や `const` で宣言された変数、そして「どこに書かれているか」というスコープの情報。
3. this の値: このコンテキストの主誰？という情報。
百聞は一見に如かず。実際にコードを書いて、Chrome DevToolsの「Scope」パネルでその中身をリアルタイムに覗き見してみましょう。
—
2. DevToolsで「スコープ」の正体を暴く
以下のコードを、お使いのブラウザ（ChromeやEdgeなど）の開発者ツールを開いた状態でコンソールに貼り付けてみてください。
// グローバル空間での宣言
const framework = “V8 Engine”;
function createTranslator(lang) {
// 外部関数の変数（レキシカル環境の主役）
const prefix = `[${lang.toUpperCase()}]`;
return function(text) {
// 内側から外側の変数にアクセスする（これがクロージャ！）
const version = “v2.1”;
debugger; // ← ここで実行が一時停止します！
return `${prefix} ${text} (${version} on ${framework})`;
};
}
const translateToJp = createTranslator(“japanese”);
console.log(translateToJp(“こんにちは、世界”));
デバッグのステップ
1. ブラウザのDevToolsを開き（F12キー、または右「検証」）、Consoleタブに上記のコードを貼り付けてEnterを押します。
2. `debugger;` の命令でコードの実行がピタッと一時停止し、自動的にSourcesタブに切り替わります。
3. 画面の右側にある「Scope」パネルに注目してください。
ここには、現在停止しているコードから見える変数の世界が、階層構造（ツリー）になって美しく表示されています。
- Local: 今まさに実行されているインライン関数の中にある変数（`version` など）
- Closure: 外側の関数（`createTranslator`）で使われていた変数（`prefix` など）が、関数が終了した後も「生きたまま」保持されている領域。
- Global: スクリプト全体から見える変数（`framework` など）
他の言語（C言語やJavaなど）から来た人はここで驚きます。「あれ？ `createTranslator` の実行はもう終わったはずなのに、なぜ内部の `prefix` がまだメモリに残っているの？」と。
この現象、そして「関数がスコープの境界を越えて、外側の変数を記憶し続けるメカニズム」こそが、他ならぬ「クロージャ（Closure）」の正体なのです。
—
3. なぜクロージャが生まれるのか？（V8エンジンの視点）
なぜ `createTranslator` の実行が終わってスタックから消えたはずなのに、`prefix` が消えないのでしょうか。
古いプログラミング言語の世界では、関数が終わるとその中のローカル変数は一瞬でメモリ（コールスタック）から消し去られていました。しかし、JavaScriptの関数は「第一級オブジェクト」です。関数は別の関数に持ち運ばれ、後から呼び出されることがあります。
もし外側の変数を消してしまったら、後から関数が呼ばれたときにパニックになってしまいますよね。
そのため、V8エンジンなどのモダンなJavaScriptランタイムは、「内側の関数から参照され続けている外側の変数」を、通常のスタックではなく、ガベージコレクションの管理下にある「ヒープメモリ（Heap Memory）」の安全な領域に退避させます。これがClosureスコープの実体です。
具体的で安全なクロージャの活用例
プライベートな状態（カプセル化された変数）を持つカウンターを作ってみましょう。
function createSecureCounter(initialValue) {
// この変数は外の世界から直接触ることができない「カプセル化」された状態
let count = initialValue;
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count–;
return count;
},
getCount: function() {
return count;
}
};
}
const myCounter = createSecureCounter(10);
console.log(myCounter.getCount()); // 出力: 10
console.log(myCounter.increment()); // 出力: 11
console.log(myCounter.increment()); // 出力: 12
// 外から直接 `count` を書き換えることは不可能！
// console.log(count); -> ReferenceError: count is not defined
このコードでは、`myCounter` オブジェクトが持つ3つのメソッド（関数）が、すべて同じ `count` 変数を共有するクロージャを形成しています。オブジェクト指向における「プライベートフィールド」のような挙動を、JavaScriptではクロージャのスコープチェーンによって美しく実現しているのです。
—
4. 初学者が陥りがちなしっかりハマる罠
クロージャとスコープの仕組みを学ぶ上で、誰もが一度は通る「落とし穴」があります。それは `var` と `let` の挙動の違いです。
罠のコード例
function setupButtons() {
for (var i = 1; i <= 3; i++) {
setTimeout(function() {
console.log(`ボタン ${i} がクリックされました`);
}, 1000 i);
}
}
setupButtons();
「1秒後に『ボタン 1が…』、2秒後に『ボタン 2が…』と出力されるはずだ」と思っていませんか？
実際にこれを実行すると、1秒後も2秒後も3秒後も、すべてこう出力されます。
> ボタン 4 がクリックされました
> ボタン 4 がクリックされました
> ボタン 4 がクリックされました
なぜこうなるのか？（実行コンテキストの裏側）
- `var` は関数スコープを持ちます。`for` ループの中で宣言された `i` は、ループごとに新しく作られるのではなく、`setupButtons` 関数のスコープ全体でただ一つ使い回されます。
- 1秒経って `setTimeout` のコールバック関数が実行される頃には、すでにループは高速で回りきっており、変数 `i` の値は `4` に書き換わっています。そのため、どのクロージャからも `4` が参照されてしまうのです。
現代的な解決策（`let` のブロックレベルスコープ）
これを解決するのは簡単です。`var` を `let` に書き換えるだけです。
function setupButtonsModern() {
for (let i = 1; i <= 3; i++) { // let はブロック（{}）ごとに新しい束縛を作る
setTimeout(function() {
console.log(`ボタン ${i} がクリックされました`);
}, 1000 i);
}
}
setupButtonsModern();
`let` は波括弧 `{}` という「ブロック」単位で新しいレキシカル環境を毎回のループごとに生成します。そのため、それぞれの `setTimeout` が持つクロージャは、その瞬間ごとの `i` のスナップショット（1, 2, 3）をしっかりと個別に記憶できるのです。
---
まとめ
いかがでしたでしょうか？
- 実行コンテキスト とは、コードが実行されるときに作られる「変数の世界地図」のようなもの。
- スコープチェーン を通じて、内側の関数は外側の世界へアクセスできる。
- 関数が消えても参照され続ける変数は、V8エンジンによってヒープ上に大切に保存される。これが クロージャ。
- `let` や `const` を使うことで、ブロックスコープの恩恵を受け、意図せぬバグを防ぎやすくなる。
ここをクリアできれば、JavaScriptの非同期処理やイベントリスナー、モジュールパターンなどを読み解くときの解像度が劇的に上がります。ぜひ今すぐご自身のブラウザのDevToolsを開いて、変数の動きを指先で感じてみてください。
ここをマスターしたあなたなら、もうJavaScriptの基本はバッチリです！次のステップへ進みましょう。