フロントエンド開発の現場で「クロージャ」という言葉を聞くと、難解な理論を想像しがちです。しかし、本質は非常にシンプルです。クロージャとは、「関数が定義された時の環境（スコープ）を、関数が実行される時まで持ち運ぶ仕組み」のことです。
なぜ変数を隠す必要があるのか
通常の変数は、関数が終了するとメモリから解放されます。しかし、クロージャを使うと、特定の変数を関数の中に「閉じ込める」ことができます。これにより、外部から勝手に値を書き換えられない「プライベート変数」のような状態を作ることができます。
例えば、Webサイトでボタンをクリックした回数をカウントする機能を考えてみましょう。グローバル変数を使ってしまうと、他のスクリプトから値を書き換えられるリスクがあります。
具体的な実装例
以下のように書くことで、安全にカウンターを作成できます。
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
このコードにおいて、外側の関数が終了しても、内側の関数は count という変数を記憶し続けています。 これがクロージャの最大の利点です。
実務での活用シーン
実務では、Reactのフック（useStateなど）や、イベントリスナーで特定のデータを保持し続けたい場面で多用されます。特に、APIから取得したユーザーIDを保持したまま、後からボタンクリックでそのIDを使うようなケースでは、クロージャの性質が非常に役に立ちます。
変数を闇雲にグローバル化するのではなく、「必要な場所に必要なスコープだけを持たせる」という意識を持つだけで、バグの少ない堅牢なフロントエンド構築が可能になります。ぜひ、今のプロジェクトのコードの中で、スコープを閉じ込めて整理できる箇所がないか探してみてください。