概要
JavaScriptにおける関数は、単なる処理のブロックではない。
それは、スコープと状態を「閉じ込める」構造を持つ、一種のオブジェクトである。
この“関数が状態を保持する”という特徴の本質が、**クロージャ（Closure）**だ。
「関数が変数を覚えている」という一言では説明しきれないその挙動を、構造・記憶・責任の設計という視点で再定義する。
対象環境
ES5以降のすべてのJavaScript環境（Node.js / ブラウザ）
クロージャとは何か？
関数が、自身のスコープ外の変数を“保持し続ける”機能。
✅ 具体例：
function counter() {
let count = 0;
return function () {
count++;
return count;
};
}
const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
→ count は counter の中で定義されたが、返された関数がそれを保持し続けている
なぜクロージャが生まれるのか？
クロージャの発生条件：
- 関数がネストされている
- 内側の関数が、外側の変数を参照している
- 外側の関数が終了しても、内側関数がどこかで参照されている
function outer() {
let secret = 'inside';
return function inner() {
console.log(secret);
};
}
→ inner は secret を“記憶している”
実務での用途①：状態管理
クロージャを使えば、外部からアクセスできない状態を内部に保持し続けられる。
function createStore(initial = 0) {
let state = initial;
return {
get: () => state,
set: (v) => (state = v),
reset: () => (state = initial)
};
}
const store = createStore(10);
store.set(42);
console.log(store.get()); // 42
store.reset();
console.log(store.get()); // 10
→ state という値は、外部からは直接触れず、メソッド経由でしか操作できない
実務での用途②：関数のカスタマイズ・カリー化
function multiply(factor) {
return function (value) {
return value * factor;
};
}
const double = multiply(2);
console.log(double(10)); // 20
→ factor を記憶しているので、部分適用された関数を生成できる
実務での用途③：イベントリスナーのスコープ隔離
for (let i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 100);
}
→ ES6の let がブロックスコープなので問題ないが、var ではクロージャがなければ正しく動作しなかった。
落とし穴と注意点
❌ メモリリーク
クロージャは「状態を保持し続ける」がゆえに、意図せず変数を解放できないことがある。
function hold() {
let bigData = new Array(1000000).fill('...');
return () => bigData;
}
const ref = hold();
// `bigData` は GC 対象外になる
→ ✅ 不要になった関数への参照は明示的に破棄する（nullにするなど）
❌ thisの扱いに注意
function outer() {
let name = 'toto';
return function () {
console.log(this.name); // undefined
};
}
→ クロージャは this ではなくスコープ変数を閉じ込める
→ ✅ this が必要な場合は bind やアロー関数を使う
設計戦略：クロージャを使うべき場面とは
| 要件 | クロージャの使用 | 理由 |
|---|---|---|
| 内部状態を持ちたい | ✅ 適している | オブジェクトを使わずに状態保持できる |
| 他から値を隠したい | ✅ 有効 | 外部アクセスを排除できる |
| 毎回初期化された関数が欲しい | ✅ 最適 | スコープ毎に独立した状態が生成される |
| 複雑すぎる状態を管理したい | ❌ 不適 | ReactやVueなど、構造的に管理すべき |
結語
クロージャはJavaScriptの“ふるまい”ではなく、“設計機構”である。
その本質は「状態のカプセル化」と「スコープの延命」にある。
それはただのトリックではなく、純粋関数と副作用の間にある、ミニマルで力強い表現手段だ。
意図してクロージャを使い、状態を設計し、記憶を制御できること。
それが、プロフェッショナルなJavaScript設計者の第一歩である。