はじめに
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のスコープに関する理解が深まった！🚀✨