JavaScriptの世界へようこそ！
ここまで学習を進めてきたあなたは、きっと「変数」という道具を使いこなして、画面に文字を出したり、計算をしたりすることに慣れてきた頃でしょう。
でもね、JavaScriptには「クロージャ」という、初学者が最初にぶつかる「ちょっと不思議な魔法」が存在します。名前を聞くだけで難しそう？ 大丈夫、安心してください。実はこれ、私たちの身近な生活の中にも同じ仕組みがあるんです。
今日は、その「魔法」の正体を、一緒に紐解いていきましょう。
—
変数の「寿命」と「居場所」を知ろう
まず、クロージャを理解するために「スコープ」という考え方を整理します。
スコープとは、簡単に言えば「変数が生きられる範囲（居場所）」のことです。
例えば、あなたがカフェで注文票を書くとします。その注文票は「そのカフェの中」だけで有効ですよね。外に持ち出した瞬間にただの紙切れになります。JavaScriptの変数も同じで、`{ }`（波括弧）という「箱」の中に閉じ込めると、その箱の外からは見えなくなるんです。
`var`、`let`、`const` の使い分け
昔は `var` しかありませんでしたが、今は `let` と `const` を使うのが現代のスタンダードです。
- `const`: 「一生変わらないもの」を入れます。定数です。
- `let`: 「後から中身が変わるもの」を入れます。お買い物の合計金額などですね。
- `var`: 実は少しクセモノです。予期せぬ場所から中身を書き換えられたりするので、今はもう使わないのが「お作法」ですよ。
—
クロージャの魔法：関数は「記憶」を持っている
さて、本題のクロージャです。
クロージャを一言で言うと、「関数が、自分が生まれた場所の空気を覚えていること」です。
想像してみてください。あなたは今、小さなノート（関数）にメモを書いて、それを友達に渡しました。普通なら、その関数を使い終わったらノートの中身は消えてしまいそうですよね？
でも、JavaScriptの関数は、「自分が作られた時の環境」をカバンに入れて持ち歩くことができるんです。
実践！カウンターを作ってみよう
言葉だけだと難しいので、カウンターを作ってみましょう。
function createCounter() {
let count = 0; // この変数countは、createCounterの「家」に住んでいます
return function() {
count++; // この関数は、生まれた場所の「count」をずっと覚えています！
console.log(`現在のカウントは: ${count} です`);
};
}
// カウンターを起動！
const myCounter = createCounter();
myCounter(); // 1
myCounter(); // 2
myCounter(); // 3
見てください！`createCounter` の実行が終わった後も、`count` という変数は消えずに生き残っていますよね。これがクロージャの魔法です。
`myCounter` という関数は、自分が作られた時に「`count` という変数がそこにあったこと」をしっかり記憶していて、呼び出されるたびにその変数をこっそり更新しているんです。
—
なぜこの仕組みが重要なのか？
「別にわざわざ記憶しなくても、外に変数を作ればいいのでは？」と思うかもしれません。でも、この仕組みが一番輝くのは「隠したい情報を隠せる（カプセル化）」という点です。
もし `count` を外に出してしまうと、誰でも勝手に数字を書き換えてしまいますよね。
「`count` はカウンター関数の中でしか触らせない！」と決めることで、プログラムの安全性と品質はグッと上がります。これは、大規模なWebサービスを作るプロの現場では、絶対に守るべき鉄則の一つなんです。
—
最後に：つまずくのは当たり前です
クロージャは、JavaScriptの学習において最初の大きな山場です。
もし今すぐ完璧に理解できなくても、全く落ち込む必要はありません。
「関数が、生まれた時の思い出を大事に抱えて歩いているんだな」
そんな風に、少し詩的なイメージを持っておくだけで十分です。日々のコードの中で「あ、これってクロージャかも？」と気づく瞬間が必ず来ます。その時が、あなたが一つ上のエンジニアに成長した瞬間ですよ。
もし分からないことがあれば、何度でもこのコードを書き換えて、コンソールで数字がどう変化するか遊んでみてください。JavaScriptは、あなたの好奇心に必ず応えてくれる最高の相棒ですから。
それでは、また次のレッスンでお会いしましょう！Happy Coding!
コメント