やあ、こんにちは！JavaScriptの世界へようこそ。
コードを書いていると、「あれ？この変数、どこまで届くんだっけ？」「なぜか値が取れない！」なんて壁にぶつかること、ありますよね。
大丈夫、それは君が成長している証拠です。今日は、JavaScriptの「スコープチェーン」という、ちょっと魔法のような仕組みについて、専門用語を抜きにしてお話ししましょう。
—
1. 「スコープ」は、自分だけの「お道具箱」
まず、「スコープ」という言葉を「お道具箱」とイメージしてみてください。
プログラムの中で変数を作るとき、それは自分のお道具箱の中に道具をしまっているのと同じです。
- 狭いスコープ（ブロックなど）： 机の上のペンケース。
- 広いスコープ（グローバル）： 部屋全体に置いてある大きな棚。
JavaScriptには「内側から外側へ探す」という、とても律儀なルールがあります。
コードで見てみよう
const 部屋の棚 = “大きな地球儀”;
function 机の上() {
const ペンケース = “赤ペン”;
console.log(ペンケース); // 自分のお道具箱にあるから、すぐ見つかる！
console.log(部屋の棚); // 自分のお道具箱にはないけど、外の棚まで探しに行く！
}
机の上();
これがスコープチェーンの基本です。「自分の箱になければ、お母さん（外側のスコープ）に聞く」。それでもなければ、またその外側へ……というふうに、外へ外へと繋がっていくチェーン（鎖）こそが、スコープチェーンなんです。
—
2. なぜ「巻き上げ（Hoisting）」が起きるのか？
よく耳にする「巻き上げ」という言葉。これも難しく考える必要はありません。
JavaScriptは、コードを実行する前に「どんな変数や関数がどこにあるか」を、あらかじめ全体をパッと見て確認（下調べ）する時間を持っているんです。
例えば、クラス替えの時に「誰がどの席か」を名簿で先に確認するようなものですね。だから、コードの書き順が多少前後していても、プログラムが動くときには「あ、そこに変数があるのは知ってるよ」という状態になっているんです。これが「巻き上げ」の正体です。
—
3. クロージャ：思い出を抱きしめる「魔法のリュック」
さて、ここが一番面白いところ。「クロージャ」です。
普通、関数が終わるとその中にある変数（お道具箱の中身）は片付けられて消えてしまいます。でも、特定の条件下では、「使い終わったはずの変数を、リュックに詰めて持ち歩く」ことができるんです。
これがクロージャの仕組みです。
function お小遣い帳を作る() {
let 残高 = 0; // この変数は、普通なら関数が終わると消えるはず…
return function(金額) {
残高 += 金額; // 関数が終わったはずなのに、「残高」を覚えている！
console.log(`現在の残高は: ${残高}円です`);
};
}
const 私の通帳 = お小遣い帳を作る();
私の通帳(500); // 現在の残高は: 500円です
私の通帳(300); // 現在の残高は: 800円です
なぜこれができるのか？
`お小遣い帳を作る`という関数が終わっても、返された関数が「残高」という変数のスコープチェーンをずっと握りしめているからです。まるで、旅に出るときに「この思い出だけは忘れないように」とリュックに詰め込んで持ち歩くようなものですね。
—
最後に：つまずくのは、君が深く考えているから
最初は「なんでそんな面倒な仕組みがあるの？」と思うかもしれません。でも、この仕組みがあるおかげで、私たちは「隠しておきたいデータ」と「外から見せたい機能」を上手に分けて、複雑なアプリを作れるようになっているんです。
- スコープチェーン： 内側から外へ、「ないかな？」と探しに行く旅。
- クロージャ： 終わったはずのスコープを、魔法のリュックに詰めて持ち帰る技。
今日このイメージを持てただけで、君はもう一段階、プロの視点に近づきました。
エラーが出ても大丈夫。それはJavaScriptが「ちょっと待って、その変数はどこにあるの？」と優しく教えてくれているだけですから。
またいつでも聞きに来てくださいね。君のコードが、今日も思い通りに動くことを応援しています！
コメント