こんにちは。フロントエンドの世界へようこそ。
コードを書き始めたばかりの頃、変数を使おうとして「あれ、なぜか値が取れない？」「さっきまで使えていたはずなのに…」と頭を抱えた経験はありませんか？
実はそれ、JavaScriptが裏側で行っている「スコープチェーンによる迷子探し」の仕組みを知るだけで、一気に霧が晴れるようにスッキリします。今日は、この少しだけ深い「JavaScriptの裏側の冒険」を、一緒に紐解いていきましょう。
—
1. スコープとは「秘密基地」のこと
まず、スコープという言葉。難しく考える必要はありません。「変数が存在を許される場所（秘密基地）」だと思ってください。
例えば、`let`や`const`で作った変数は、波括弧 `{ }` で囲まれた範囲が秘密基地になります。この基地の外から、中の変数を覗き見ることはできません。
{
const secret = “私の宝物”;
console.log(secret); // ここなら見える！
}
// console.log(secret); // エラー！外からは覗けない…
基本的には「自分の基地の中に変数がなければ、隣の部屋（外側のスコープ）を探しに行く」というルールがあります。これがスコープチェーンの正体です。
—
2. 外部環境参照：迷子になった時の「頼れる地図」
JavaScriptは、コードを実行するたびに「環境（Environment）」という箱を作ります。そして、各箱には必ず「外部環境参照（Outer Environment Reference）」という、いわば「ひとつ外側の基地への地図」が隠し持たれています。
もし、今いる場所で変数が見つからなかったら？
JavaScriptは冷静にこの地図を取り出し、「よし、親の環境へ行って探してみよう」と辿り始めるのです。これを「スコープチェーンの解決プロセス」と呼びます。
例え話：お買い物でのお使い
1. あなたの部屋（現在のスコープ）: 「お醤油あるかな？」と探す。なければ…。
2. お母さんのキッチン（一つ外側のスコープ）: 「お母さん、お醤油知らない？」と聞きに行く。なければ…。
3. 近所のスーパー（さらに外側のスコープ）: 「店員さん、お醤油ありますか？」と聞きに行く。
4. どこにもない: 「お醤油なんてこの世にないわ！」（ReferenceError：変数が定義されていません）
この「親に聞く」「店員に聞く」という連鎖が、まさにスコープチェーンです。
—
3. 実践！スコープチェーンをコードで追う
実際に、この「探索の旅」をコードで再現してみましょう。
const 街の広場 = “公園”;
function 家() {
const 部屋 = “ベッド”;
function 引き出し() {
// 自分の場所（引き出し）には変数がない！
// 1. まず「部屋」を探す → 見つかった！
// 2. もしここに「街の広場」があったら？ → 外側の「街の広場」を参照する
console.log(`ここには${部屋}があります。そして外は${街の広場}です。`);
}
引き出し();
}
家();
ここで重要なのは、「内側から外側へは行けるが、外側から内側へは行けない」という一方通行のルールです。引き出しの中身を、街の広場から直接見ることはできませんよね。
—
4. `var` が引き起こす「巻き上げ」という不思議な現象
さて、ここで少しだけ注意点です。昔からある `var` という書き方には、このスコープをすり抜けてしまう「巻き上げ（Hoisting）」という不思議な性質があります。
`var` は、波括弧 `{ }` を無視して、一番近い「関数」まで突き抜けて存在を主張してしまいます。
if (true) {
var 昔の変数 = “私はどこへでも行くよ”;
}
console.log(昔の変数); // なぜか表示されてしまう！
今のJavaScript開発では、`var` を使わず、きっちりスコープを守る `const` や `let` を使うのが鉄則です。これにより、コードの「見通し」が良くなり、予期せぬバグを未然に防げるようになります。
—
最後に：つまずくのは「成長の証」
いかがでしたか？
「変数がどこにあるか分からない」という悩みは、皆さんが今、JavaScriptの「環境」や「スコープ」という本質的な仕組みを理解しようと格闘している証拠です。
もしエラーが出ても、それはJavaScriptが「地図を見て探したけれど、どこにも見当たらなかったよ」と教えてくれているだけ。怖がる必要はありません。「今の環境から見て、その変数はどこにあるべきか？」と、落ち着いて地図（スコープチェーン）を辿ってみてください。
その視点を持てた時、あなたはもう初心者から一歩先へ進んだフロントエンド・エンジニアです。焦らず、一歩ずつ進んでいきましょうね。応援しています！
コメント