こんにちは！日々の開発、本当にお疲れ様です。
JavaScriptを書き進めていくと、非同期処理（`setTimeout`や`fetch`など）の波に揉まれる瞬間がやってきますよね。そして、非同期の世界に足を踏み入れた途端、「なぜか変数の値が意図した通りにならない」「ループの中で変数が書き換わってしまう」という不思議な現象に直面したことはありませんか？
他のプログラミング言語からやってきた方ほど、「えっ、なんでここでその値が出るの！？」と混乱してしまいがちなポイントです。
ここをクリアすれば、JavaScriptの変数スコープ、クロージャ、そして非同期処理の実行タイミング（V8エンジンがどうやってメモリを管理しているか）の本質がグッと見えてきます。今日は、優しく、そして深く、この謎を解き明かしていきましょう。
—
1. そもそも「非同期処理」と「スコープ」の間で何が起きているのか？
JavaScriptはシングルスレッド（一度に一つのことしか処理できない）で動く言語ですが、ネットワーク通信やタイマー処理などの「時間がかかる処理」を効率よく扱うために非同期処理の仕組みを持っています。
ここで重要な前提があります。それは、
「変数が宣言された瞬間のスコープ（環境）」と「非同期処理が実際に実行されるタイミング」には時間差がある
ということです。
非同期処理（Promiseチェーンの`.then()`や`async/await`の待ち合わせなど）が実行されるとき、JavaScriptのランタイムは、その処理が生まれた場所にあった「変数の参照」をそっくりそのまま（正確にはクロージャとして）保持して持ち歩きます。
この「持ち歩き方」のルールを誤ると、バグの温床になってしまうのです。まずは具体的なコードを見てみましょう。
—
2. ありがちな罠：ループと非同期処理が生む「変数の共有」
次のような、よくある失敗例を見てください。配列の中身を順番に、少しずつ遅らせながらPromiseチェーンで処理したいとします。
// 【危険なコードの例】 varを使ったループと非同期処理
function processItemsWithVar() {
const items = [‘アイテムA’, ‘アイテムB’, ‘アイテムC’];
for (var i = 0; i < items.length; i++) {
// 1秒ずつ遅延させて非同期処理を実行するイメージ
(function(index) {
setTimeout(() => {
console.log(`[var版] インデックス: ${index}, 処理対象: ${items[index]}`);
}, 1000 (index + 1));
})(i); // 即時関数でスコープを閉じ込めているつもり…？
}
}
// 実際によくある「さらにシンプルな罠」
function dangerousLoop() {
for (var i = 1; i <= 3; i++) {
Promise.resolve().then(() => {
console.log(`現在の i の値: ${i}`);
});
}
}
dangerousLoop();
// 実行結果（脳内予想）： 1, 2, 3 と出力されてほしい…
// 実際の出力結果： 4, 4, 4
「あれっ？ `1, 2, 3` と出てほしいのに、なぜか `4` が3回出てきたぞ……？」
プログラミングを始めたばかりの頃は、ここで頭が真っ白になりますよね。でも、安心してください。これにはちゃんと明確な理由があります。
なぜ `4` が出力されてしまったのか？
1. `var` で宣言された変数 `i` は、関数スコープ（またはグローバルスコープ）を持ちます。ブロックレベル（`{}`）の壁を無視してしまいます。
2. `for` ループの中で `i` は `1, 2, 3` とインクリメントされ、ループを抜けた瞬間、`i` の値は `4` になっています。
3. JavaScriptの非同期処理（Promiseの `.then()` や `setTimeout`）は、同期的なコードがすべて実行された「後」に実行されるタスクキューの住人です。
4. そのため、非同期処理が実際に「console.logを出そう！」と動き出した時には、すでにループは完全に終了し、メモリ上の変数 `i` は `4` に書き換わってしまっていたのです。
非同期処理は、「変数の値が生まれた瞬間」ではなく、「変数の場所（参照）」を覚えています。 だからこそ、ループが終わったあとの最新値である `4` をみんなで共有してしまったというわけですね。
—
3. 救世主 `let` とブロックスコープの魔法
現代のJavaScript（ES2015以降）では、この問題をスマートに解決する強力な味方がいます。それが `let` です。
`let` は、ブロック `{}` ごとに独立した変数の実体（スコープ）を作ってくれます。先ほどのコードの `var` を `let` に変えてみましょう。
// 【安全なコードの例】 letを使ったモダンなアプローチ
function safeLoop() {
for (let i = 1; i <= 3; i++) {
Promise.resolve().then(() => {
console.log(`安全な i の値: ${i}`);
});
}
}
safeLoop();
// 実行結果：
// 安全な i の値: 1
// 安全な i の値: 2
// 安全な i の値: 3
見事に `1, 2, 3` と意図した通りの結果になりましたね！
裏側で何が起きているのか？
`let` を使ったループでは、JavaScriptのエンジン（V8など）が、ループの各イテレーション（繰り返し）ごとに、新しい変数 `i` のメモリ領域を裏側で新しく生成してくれます。
つまり、
- 1回目のループの `i` (値: 1) と、その中のPromise
- 2回目のループの `i` (値: 2) と、その中のPromise
- 3回目のループの `i` (値: 3) と、その中のPromise
これらはそれぞれ完全に別々のメモリ上の変数として扱われます。そのため、非同期処理が後から実行されても、自分が生まれた瞬間に割り当てられた「専用の `i` の値」をしっかりと保持し続けることができるのです。これがクロージャの仕組みとブロックスコープの美しさです。
—
4. Promiseチェーンと変数のスコープ共有における実践パターン
実務の現場では、複数の非同期処理をPromiseチェーンや `async/await` で繋ぎ、途中で得られた変数を次の処理に引き回すことがよくあります。
ここで「変数のスコープ」を意識しないと、意図しない変数の上書き（バグ）を生む原因になります。正しい変数の閉じ込め方を実践的なコードで確認しておきましょう。
// ユーザー情報を取得して、関連データを順番に取得する非同期フロー
async function handleUserWorkflow(userId) {
// ① 外側のスコープで変数を定義するケース
let userProfile = null;
try {
// ステップ1: ユーザー基本情報の取得
userProfile = await fetchUserData(userId);
console.log(`ステップ1完了: ${userProfile.name} さん`);
// ステップ2: ユーザーの権限に応じた追加処理
// ここで userProfile は安全に参照できる
const permissions = await fetchUserPermissions(userProfile.role);
// ステップ3: まとめて結果を返す
return {
profile: userProfile,
permissions: permissions,
};
} catch (error) {
// 万が一エラーが起きた際も、どのスコープまで変数が生きているか把握が重要
console.error(`エラー発生 (対象ユーザーID: ${userId}):`, error);
throw error;
}
}
// ダミーの非同期関数（イメージ用）
function fetchUserData(id) {
return Promise.resolve({ id, name: ‘Taro Developer’, role: ‘admin’ });
}
function fetchUserPermissions(role) {
return Promise.resolve([‘read’, ‘write’, ‘execute’]);
}
アーキテクトからのワンポイントアドバイス
- 変数の生存期間（ライフサイクル）は必要最小限に：
`let` や `const` を使う際は、できるだけ「その変数が必要なブロックやスコープ」の内部だけで宣言するように意識しましょう。無駄に広いスコープ（外側）で変数を宣言しすぎると、非同期の途中で意図せず書き換えられるリスク（副作用）が高まります。
- 基本は `const`、再代入が必要な時だけ `let`：
Promiseチェーンの中で参照するデータは、基本的には一度取得したら書き換えない（イミュータブルな）ことが多いはずです。そのため、`const` で定義できる部分は徹底して `const` を使い、変数の安全性を高めましょう。
—
まとめ
非同期処理とスコープの関係、いかがでしたでしょうか？
1. 非同期処理は「変数の値」ではなく「変数の参照（場所）」を保持する
2. `var` は関数スコープのため、ループの終了時には値が書き換わってしまっている（罠の正体）
3. `let` を使えば、ループの1回ごとに新しい変数のメモリ領域が作られるため、期待通りの値が保持される
この仕組みが頭のなかにスッと入っていれば、複雑な非同期処理を書くときも「今、この非同期処理はどの変数の世界（スコープ）を覗いているんだっけ？」と自信を持ってコードをデバッグできるようになります。
ここをクリアしたあなたなら、JavaScriptの非同期制御はもう怖くありません。ぜひ、日々のコーディングで意識してみてくださいね。それでは、次のステップへ進みましょう！バッチリマスターです！