こんにちは。JavaScriptの世界へようこそ。
コードを書いていると、「あれ？なんでこの変数が使えないんだろう？」「さっき定義したはずなのに！」と頭を抱える瞬間、ありますよね。大丈夫、それはあなたがプロへの階段を登っている証拠です。
今日は、そんなモヤモヤをスッキリさせるために、JavaScriptの「心臓部」であるレキシカル環境という仕組みを、一緒に紐解いていきましょう。
—
1. 変数の居場所は「見えない箱」の中
JavaScriptには、変数を管理するための「環境レコード（Environment Record）」という仕組みがあります。難しい名前に聞こえますが、イメージしてみてください。
あなたがカフェで勉強をしているとします。手元には「ノート」や「ペン」がありますよね。
- ノート（変数）は、あなたの机の上（現在のスコープ）にあります。
- もしペンが見当たらなければ、あなたは「カバンの中」を探すかもしれません。
JavaScriptも全く同じです。コードを実行する際、JavaScriptエンジンは「今、どこの箱の中に何が入っているか」を常に管理する「辞書のような箱」を用意しています。これをレキシカル環境と呼びます。
—
2. なぜ `var` は裏切るのか？（巻き上げの正体）
初心者が一番つまずくのが「巻き上げ（Hoisting）」です。まずは以下のコードを見てください。
// まだ定義していないのに、なぜか怒られない（結果は undefined）
console.log(myCoffee);
var myCoffee = “カフェラテ”;
// なぜこうなるのか？
// JavaScriptはコードを実行する前に、「varがあるぞ！」と見つけて、
// 先に箱の中に「myCoffee」という名前だけ登録しちゃうんです。
`var` は、コードが読み込まれる瞬間に「とりあえず箱の中に空っぽの場所を作っちゃえ！」と先行予約をしてしまいます。だから、定義する前の行で呼んでもエラーにならず、中身が空っぽ（`undefined`）な状態で存在しているのですね。これが「巻き上げ」の正体です。
—
3. `let` と `const` は「守り神」
一方で、モダンな開発で必須の `let` や `const` は、もっとお行儀が良いんです。
// console.log(myTea); // ここで呼ぶとエラーになります！
let myTea = “アールグレイ”;
`let` や `const` も、実は内部で「巻き上げ」は起きています。でも、彼らは「定義されるまでの間は絶対に触らせない！」という「一時的な死の領域（Temporal Dead Zone）」という結界を張ります。
`var` が「とりあえず空席でいいから座ってて！」とゆるい管理をするのに対し、`let` や `const` は「準備ができるまで絶対に立ち入り禁止！」と厳しく守ってくれる。これが、バグを防ぐための現代のベストプラクティスなんです。
—
4. スコープという名の「マトリョーシカ」
環境レコードは、実は一つだけではありません。ネストされた関数の中などでは、マトリョーシカのように環境レコードが重なっています。
const cafeName = “フロントエンドカフェ”;
function order() {
const menu = “アイスコーヒー”;
console.log(`${cafeName}の${menu}です。`);
}
order();
1. まず、`order` 関数の内側の箱を探す。
2. なければ、その外側（グローバル）の箱を探す。
これを「スコープチェーン」と呼びます。JavaScriptは内側から外側へ、「これ知ってる？」「あれ知ってる？」と順番に箱を覗いていくのです。この仕組みのおかげで、私たちは外側で定義した変数に、内側の関数からアクセスできるんですね。
—
最後に：完璧に覚えようとしなくて大丈夫
ここまで読んで「うわ、仕組みが複雑そう…」と感じたかもしれません。でも、全部を完璧に暗記する必要はありません。
大切なのは、「あ、今自分はどの箱（スコープ）の中にいるんだっけ？」とイメージできるようになること。それだけで、デバッグのスピードが劇的に変わります。
JavaScriptは、一見気まぐれに見えて、実はとても論理的で優しい言語です。エラーが出たら「ここには変数の箱が届いていないんだな」と、優しく教えてくれているだけ。
これからも、一つずつ紐解いていきましょう。あなたのコードが、昨日よりも少しだけ自信を持って書けるようになりますように！
コメント