【なんで動くの？】クロージャとは？仕組みを一発で理解できる完全ガイド

クロージャとは？一言でわかる意味

もう少し噛み砕くと、クロージャは「変数を覚え続ける関数」です。関数が作られた時点の環境を保存し、その情報を後から使い続けることができます。

この特徴があるため、状態を持つ処理を簡単に作れます。JavaScriptではイベント処理やカウンター機能など、さまざまな場面で活用されています。

なぜ「なんで動くの？」と感じるのか

クロージャが難しいと感じる理由は、直感に反する動きをするからです。

多くの人は「関数の実行が終われば、その中の変数は消える」と考えます。しかしクロージャでは、関数が終了した後も変数が保持されます。この違いが混乱を生みます。

原因をさらに掘り下げると、スコープの仕組みへの理解不足に行き着きます。スコープを正しく理解することが、クロージャ理解の最短ルートです。

クロージャの前提知識：スコープを理解する

クロージャを理解するには、まずスコープの概念を押さえる必要があります。スコープとは「変数が使える範囲」を示すルールです。

JavaScriptには主に3種類のスコープがあります。

重要なポイントは、内側の関数は外側の変数にアクセスできるという点です。これを「スコープチェーン」と呼びます。

外側の関数で宣言された変数は、内側の関数から参照できます。この仕組みがクロージャの土台になっています。

クロージャの仕組みを分解して理解する

クロージャは「関数」+「変数の記憶」の2つで成り立っています。関数が生成された瞬間に、周囲の環境がセットで保存されます。

外側の関数の実行は終わっていますが、内側の関数が変数への参照を持ち続けているため、変数は消えません。これがクロージャの正体です。

スコープとクロージャの違い

スコープとクロージャは混同されやすい概念です。違いを整理すると理解が一気に深まります。

簡潔にまとめると、スコープはルール、クロージャは仕組みです。スコープが「どこから見えるか」を決め、クロージャが「見えた情報を覚えておく」を実現します。

【コード例1】クロージャの基本：カウンター

クロージャはコードで確認すると理解しやすいです。最も基本的なカウンターの例を見てみましょう。

function createCounter() {
  let count = 0;       // 外側の変数
  return function () { // 内側の関数（クロージャ）
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

createCounter() の実行は終わっていますが、返された関数が count への参照を保持しています。そのため、関数を呼ぶたびに値が更新されます。

count は外部から直接アクセスできません。関数を通じてのみ操作できる「非公開変数」として機能しています。

【コード例2】プライベート変数の実現

クロージャを使うと、外部から直接触れない変数を作れます。これはカプセル化と呼ばれる設計パターンです。

function createUser(name) {
  let loginCount = 0;  // 外部からアクセス不可

  return {
    getName: function () {
      return name;
    },
    login: function () {
      loginCount++;
      return name + "さんのログイン回数: " + loginCount;
    },
    getLoginCount: function () {
      return loginCount;
    }
  };
}

const user = createUser("田中");
console.log(user.login());         // 田中さんのログイン回数: 1
console.log(user.login());         // 田中さんのログイン回数: 2
console.log(user.getLoginCount()); // 2
// user.loginCount → undefined（直接アクセス不可）

loginCount は関数の外から直接変更できません。login() メソッドを通じてのみ更新されるため、不正な操作を防げます。

【コード例3】設定付き関数の生成

クロージャを使うと、あらかじめ設定を持った関数を作れます。

function createMultiplier(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15
console.log(double(10)); // 20

createMultiplier(2) が返す関数は、multiplier = 2 を記憶しています。それぞれの関数が独立した環境を持つ点がポイントです。

このパターンは実務で頻繁に使われます。例えば、税率計算や単位変換の関数を動的に生成する場面などです。

クロージャを使う3つのメリット

クロージャのデメリットと注意点

クロージャは便利ですが、使い方を誤ると問題になる場合があります。

大量のクロージャを作る設計は避け、必要な場面だけで使うことが重要です。

よくあるミス：ループとクロージャの罠

クロージャ関連で最も多いバグは、ループ処理で発生します。以下のコードを見てください。

for (var i = 0; i  3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}
// 期待: 0, 1, 2
// 実際: 3, 3, 3

なぜこうなるのでしょうか。var は関数スコープのため、ループ全体で1つの変数 i を共有します。setTimeout の中の関数が実行される時点では、ループはすでに終了しており、i は 3 になっています。

for (let i = 0; i  3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}
// 結果: 0, 1, 2（正しく出力される）

let はブロックスコープを持つため、ループの繰り返しごとに新しい変数 i が作られます。各クロージャがそれぞれ別の i を参照するため、期待通りの結果になります。

クロージャはどんな場面で使う？

クロージャは実務でも頻繁に登場します。代表的な使用場面を整理します。

クロージャとクラスの違い

クロージャとクラスはどちらも「状態を持つ処理」を実現できます。使い分けのポイントを整理します。

小規模な処理にはクロージャ、大規模な設計にはクラスが適しています。プロジェクトの規模や要件に応じて使い分けましょう。

クロージャを使うべき場面と避けるべき場面

クロージャが使われる代表的なコードパターン

クロージャには頻出するパターンがあります。型を覚えると応用が利きやすくなります。

よくある質問（FAQ）

クロージャを最短で習得する4ステップ

クロージャは理解するだけでなく、使える状態にすることが大切です。以下のステップで進めると効率的に習得できます。

まとめ：クロージャは「記憶する関数」

クロージャは、理解できれば設計の自由度が大きく広がる概念です。まずはブラウザのコンソールでカウンター処理を動かしてみてください。手を動かすことで、知識がスキルに変わります。