やあ、こんにちは。Reactの世界へようこそ。
フロントエンドの深淵を覗き込んでいる君なら、一度は「`useEffect`って何だか魔法みたいだけど、時々いうことを聞いてくれないな…」と悩んだことがあるはずだ。
今日は、その中でも特に「イベントリスナー」という、Webサイトの動きを作るための大切なパーツについて、一緒に紐解いていこう。
—
そもそも「イベントリスナー」って何？
「クリックしたら反応する」「ウィンドウの大きさを変えたら計算し直す」。これらをReactに教えるのがイベントリスナーだ。
イメージしてみてほしい。君が新しいアパートに引っ越して、「郵便物が届いたらチャイムを鳴らす」という仕組みをドアに設置するとする。これが `addEventListener` だ。
でも、もし引っ越すときにその仕組みをそのままにしていたらどうなるだろう？ 次の住人が住んでいるのに、郵便物が届くたびに君のスマホに通知が来たり、チャイムが鳴り響いたりしたら……それはもう「ホラー」だよね。これがプログラミングの世界でいう「メモリリーク（無駄なゴミが残り続けること）」なんだ。
—
Reactで「後始末」をする魔法：クリーンアップ関数
Reactの `useEffect` には、この「引っ越し」を完璧にするための秘密の機能がある。それがクリーンアップ関数だ。
`useEffect` の中で `return` を使って関数を返すと、その関数は「コンポーネントが画面から消えるとき（アンマウント）」に自動的に実行される。これこそが、散らかった部屋を最後に掃除する「退去時の清掃」なんだ。
実際にコードで見てみよう
ウィンドウのサイズが変わったときに、今の横幅を表示する機能を作ってみるよ。
import { useState, useEffect } from ‘react’;
function WindowSizeTracker() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
// 1. 郵便物を受け取る仕組みをセットする（イベントリスナー登録）
const handleResize = () => {
setWidth(window.innerWidth);
console.log(‘幅が変わったよ！’);
};
window.addEventListener(‘resize’, handleResize);
// 2. ここが大事！退去時の清掃（クリーンアップ関数）
// このreturnの中身は、コンポーネントが消えるときに実行される
return () => {
window.removeEventListener(‘resize’, handleResize);
console.log(‘リスナーを解除しました。綺麗さっぱり！’);
};
}, []); // 空の配列は「最初の一回だけ実行」の合図
return
;
}
—
つまずきやすいポイント：なぜ「同じ関数」じゃないとダメなの？
ここで一番多い失敗が、`removeEventListener` を呼ぶときに、登録したときと「別の関数」を渡してしまうことだ。
例えば、`addEventListener` で登録した関数を `removeEventListener` で消そうとしても、Reactが「あれ？君、誰だっけ？」と認識できず、結局ゴミが残ってしまうことがある。
だから、「登録したときと全く同じ関数を使い回す」のが鉄則。さっきのコードのように、`handleResize` という名前をつけて、その名前をそのまま `remove` に渡してあげれば、Reactも「ああ、あの時の君ね」と納得して綺麗に消してくれるんだ。
—
現場のエンジニアからの「ちょっとしたアドバイス」
この「クリーンアップ」という考え方は、最初は少し面倒に感じるかもしれない。
「動いているからいいじゃん」って思うよね。でも、ページを行ったり来たりするWebサイトでこれを怠ると、ユーザーのブラウザはどんどん重くなり、最終的にはカクついたりクラッシュしたりしてしまう。
「何かを登録したら、必ずその反対側を用意する」。
この習慣を身につけるだけで、君の書くコードは一気にプロのクオリティへと近づくよ。
もし動かしていて「あれ？ログが二重に出るぞ？」なんてことがあったら、それはReactの `StrictMode` という機能が「ちゃんとクリーンアップできているかテストしてくれている」証拠だ。驚かないで、そのまま開発を続けて大丈夫だよ。
—
まとめ：今日からできること
1. `useEffect` で何かを登録（`addEventListener`）したら、必ず `return` で解除（`removeEventListener`）を書く。
2. 登録する関数には名前をつけて、`remove` の時もその名前を指名手配する。
3. 「綺麗に片付けるまでがReact」と心に刻む。
プログラミングは、完璧に動くことも大切だけど、実は「いかに綺麗に終わらせるか」という美学が詰まっているんだ。君の書くコードが、誰にとっても軽快で心地よい体験になりますように。
また分からないことがあったら、いつでも聞いてね。一歩ずつ、一緒に強くなっていこう。
コメント