先生と生徒の会話形式で理解しよう

生徒

「先生、TypeScriptで“クロージャ”っていう言葉を聞いたんですが、よくわかりません。」

先生

「クロージャは、関数の中で定義された変数を、関数の外からも使えるようにする仕組みのことです。」

生徒

「外から使えるって、どういうことですか？」

先生

「じゃあ、冷蔵庫を例に説明しましょう。冷蔵庫の中（関数の中）に食べ物（変数）を入れておいて、鍵（関数）を持っている人だけが、その食べ物にアクセスできる…それがクロージャです。」

1. クロージャとは？

クロージャ（Closure）は、TypeScriptやJavaScriptで非常によく使われる仕組みで、「関数が宣言されたときのスコープ（変数の有効範囲）を覚えていて、そのスコープ内の変数にアクセスできる機能」のことを指します。

プログラミングでは、通常、関数の中で定義された変数はその関数の外からは使えません。しかし、クロージャを使うことで、関数が終了した後でも、その変数を保持し続けて利用できます。これにより、データを安全に保ちながら使い回すことができるのです。

例えば、ポイントカードのように「現在のポイント」を関数の中で記録しておき、必要なときだけ取り出したり更新したりすることが可能になります。

2. クロージャの基本的な書き方

クロージャを作るには、「関数の中で別の関数を返す」形を使います。内側の関数が、外側の関数の変数を覚えている状態がクロージャです。


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

    return function() {
        count++;
        console.log(count);
    };
}

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

上記の例では、createCounter関数がcount変数を持ち、その変数を更新する関数を返しています。 counterを実行するたびに、countの値が保存されて増えていくことがわかります。

3. 実行結果


1
2
3

このように、countは通常の関数スコープのルールでは消えてしまうはずですが、クロージャのおかげで値が保持され続けます。

4. クロージャが役立つ場面

クロージャは、以下のようなケースで特に役立ちます。

データのカプセル化：外部から直接アクセスできない変数を作ることで、安全にデータを扱える。
状態管理：関数の呼び出し回数や状態を保持するカウンター機能。
設定値の保存：設定や初期値を関数内に記録しておき、必要なときに利用する。

例えばWebアプリで、ボタンをクリックするたびにカウントを表示する場合にもクロージャは便利です。


function clickCounter() {
    let count = 0;

    return function() {
        count++;
        console.log(`クリック回数: ${count}`);
    };
}

const countClick = clickCounter();
document.getElementById("myButton")?.addEventListener("click", countClick);

5. クロージャの仕組み

クロージャの仕組みをもう少し詳しく説明します。プログラムでは、関数が作られるときに「その関数が使っている変数」がメモリ上に残ります。これにより、外側の関数が終わっても変数が消えず、内側の関数からアクセスできる状態になります。

これは、まるで“タイムカプセル”のようなもので、変数を安全に保管して、後から開けられるようにする役割があります。

6. 注意点

クロージャは便利ですが、使いすぎると不要な変数がメモリに残ってしまい、パフォーマンスに影響を与えることがあります。必要がない場合は、変数を解放するようにしましょう。

また、複雑なロジックにクロージャを組み込みすぎると、コードが読みづらくなります。シンプルな構造を意識して使うのがポイントです。

まとめ

ここまでクロージャの仕組みや使われ方をじっくり見てきましたが、あらためて振り返ってみると、TypeScriptやJavaScriptの世界でクロージャがどれほど重要な役割を果たしているのかを強く感じられるはずです。関数の内部に閉じ込めておきたい変数を、安全に保ちながら必要なときに操作できるという特徴は、複雑な処理を扱う場面だけでなく、小さな便利機能を作るときにも大きな力になってくれます。特に、状態管理やカウンター処理、設定値の保持など、日常的に目にする仕組みの多くがクロージャによって動いていることを知ると、より深くプログラム全体の流れを理解できるようになるでしょう。

クロージャという考え方の本質は、「関数が作られた環境を覚えている」という性質にあります。外側の関数が終わっても、内側の関数が変数を参照し続けられる。この仕組みは、プログラムの中にひっそりと息づく“記憶”のようなもので、必要な情報をいつでも呼び出せる安心感を与えてくれます。こうした柔軟性のおかげで、イベント処理や非同期処理といった高度な機能も自然な形で実現できるのです。

また、クロージャを使うメリットは決して抽象的な話だけではありません。例えば、カウンター機能やクリック回数の記録、設定情報の保持など、具体的な機能を簡潔に安全に実装できます。シンプルなコードで完結するにもかかわらず、内部で複雑なロジックをしっかりと包み込んで守ってくれるため、コードの見通しをよくしつつ、保守性も高めてくれます。

ただし、便利な反面、注意すべき点もあります。クロージャは外側の変数をずっと保持するため、むやみに使いすぎるとメモリの消費が増えたり、不要なデータが残り続ける原因になります。そのため、クロージャを利用する際は、その変数が本当に保持され続ける必要があるのかを考えることが大切です。使いどころを見極めながら活用できれば、プログラム全体の質と読みやすさが格段に向上します。

クロージャの理解を深めるサンプルプログラム

最後に、実際の活用場面をイメージしやすいように、日常的によく使われるパターンを含んだサンプルを紹介します。


function createMessageAppender(baseMessage: string) {
    let count = 0;

    return function(name: string) {
        count++;
        return `${baseMessage} ${name} さん（${count} 回目の呼び出し）`;
    };
}

const greetUser = createMessageAppender("こんにちは");
console.log(greetUser("太郎"));
console.log(greetUser("花子"));
console.log(greetUser("次郎"));

このサンプルでは、baseMessageとcountというふたつの値が、外側の関数の中にしっかりと保持され続けています。呼び出すたびにカウントが増えていき、メッセージが動的に変わっていく様子を見ることで、クロージャがどのように働いているのかがより直感的に理解できます。

クロージャは、単に“変数を覚えている仕組み”というだけではなく、プログラムの流れや構造を美しく整えてくれる力を持っています。複雑な機能をシンプルで扱いやすい形にまとめる力、予期しないエラーを防ぐ力、そしてコードを読みやすくする力。これらを上手に使いこなすことで、TypeScriptの魅力をより深く味わえるようになります。

先生と生徒の振り返り会話

生徒

「先生、クロージャって難しそうだと思っていたんですが、実際の例を見たら案外身近なんだって感じました。」

先生

「その通りですよ。身近な動作を思い浮かべると理解しやすいんです。例えば、誰かの名前を覚えておいて、毎回挨拶に使うようなイメージですね。」

生徒

「なるほど。外側の関数が終わっても変数が残るっていうのが、タイムカプセルみたいで面白いと思いました。」

先生

「その比喩はとても良いですね。クロージャは上手に使えば便利ですが、必要以上に残すと逆に負担になるので、適度に使うことも大切です。」

生徒

「はい。カウンターとか設定値の保持とか、よく使う場所から試して慣れていきたいです。」

先生