はじめに

JavaScriptの学習中に出会った　「レキシカル環境（Lexical Environment）」 という概念を自分なりにメモしておきます🤗

これが理解できると、スコープやクロージャの仕組みが割とスッと腑に落ちる。

目次

そもそもレキシカル環境って何？
レキシカル環境の仕組み
具体例で理解する！
レキシカル環境とクロージャの関係
まとめ
参考文献

🧷 そもそもレキシカル環境って何？

JavaScript では変数や関数がどこで使えるのか（スコープ）を管理する仕組みがある。

それが レキシカル環境（Lexical Environment）。

💡 「レキシカル（Lexical）」とは、「コードを書いたときの構造に基づく」という意味。

つまり、コードを書いたときの位置（構造）によって、変数がどこで使えるか決まる ということ！

🧷 レキシカル環境の仕組み

レキシカル環境は、以下のような構成になっている。

1. 環境レコード（Environment Record）

変数や関数の定義を記録する場所。
例えば let x = 10; を書くと、x: 10 が保存される。

2. 外部レキシカル環境（Outer Lexical Environment）

外側のスコープ（親の環境）への参照を持っている。
変数が見つからないと、親の環境を探しに行く。

🧷 具体例で理解する！

function outer() {
  let a = 10; // outer のレキシカル環境に保存

  function inner() {
    let b = 20; // inner のレキシカル環境に保存
    console.log(a); // inner には 'a' はないので outer を探す
  }

  inner();
}

outer();

🔍 実行の流れ

outer が呼ばれる → a = 10 が outer のレキシカル環境に保存
inner が呼ばれる → b = 20 が inner のレキシカル環境に保存
inner の console.log(a) の a を探す
- inner の環境には a がない
- outer の環境を探しに行き、a = 10 を見つける！
10 が表示される 🎉

このように、スコープの構造に従って変数を探す仕組みがレキシカル環境！

🧷 レキシカル環境とクロージャの関係

レキシカル環境の概念を理解すると、クロージャの仕組みが簡単に理解できる。

💡 クロージャとは？

クロージャとは関数が 「外側の関数の変数」を覚えていて、あとで使える仕組み のこと。

function createCounter() {
  let count = 0; // 外側の関数の変数

  return function() {
    count++; // 内側の関数が外側の変数を覚えている！
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2
counter(); // 3

🔍 仕組みを分解すると…

createCounter が呼ばれる → count = 0 を保存
createCounter は内側の関数を返す
counter() を実行すると count にアクセスできる！
count は毎回増えていく（リセットされない）

つまり、「関数が外の変数を覚えていて、あとで使える」 ＝クロージャ！

💡 クロージャの活用例

① データの隠蔽（プライベート変数）

function createSecret(secret) {
  return function() {
    console.log(`秘密は: ${secret}`);
  };
}

const mySecret = createSecret("好きな食べ物はラーメン！");
mySecret(); // → "秘密は: 好きな食べ物はラーメン！"

🔹 secret は createSecret の外ではアクセスできない！
🔹 関数の外から隠したいデータを持たせるのに便利！

② イベントリスナーとクロージャ

function setupButton() {
  let count = 0;
  document.getElementById("myButton").addEventListener("click", function() {
    count++;
    console.log(`ボタンが ${count} 回クリックされました！`);
  });
}

setupButton();

🔹 クリックするたびに count が増える！
🔹 setupButton() を実行した後も、クロージャで count を記憶している！

🚀 まとめ

✅ レキシカル環境とは？

変数や関数のスコープを管理する仕組み
コードの書かれた位置（レキシカルスコープ）によってスコープが決まる

✅ レキシカル環境の構成

環境レコード（変数・関数の保存場所）
外部レキシカル環境への参照（親スコープを探す仕組み）

✅ クロージャとは？

関数が外の変数を記憶して、あとで使える仕組み！
データの隠蔽やイベント管理に活用できる！

レキシカル環境とクロージャの関係が理解できれば、JavaScriptのスコープに関する理解が深まった！🚀✨

💫 参考文献