こんにちは！Reactの世界へようこそ。
最初は「コンポーネント」だの「仮想DOM」だのと難しい言葉が並んで、少しめまいがしたかもしれませんね。でも、大丈夫。今日お話しする「イベント委譲（Event Delegation）」という仕組みを知れば、Reactがなぜ「賢い」と言われているのか、その秘密が少しだけ見えてくるはずです。

「いちいち全員に聞きに行く」のは疲れるよね？

例えば、あなたが100人の生徒がいる教室の先生だと想像してみてください。
「誰か消しゴム持ってない？」と聞くとき、あなたは一人ひとりの机に行って「消しゴムある？」と100回尋ねますか？ そんなことをしたら、授業が始まる前に疲れ果ててしまいますよね。

普通なら、教室の真ん中で「誰か消しゴム持ってる子ー！」と大きく声をかけます。そうすれば、持っている子が手を挙げてくれるはずです。

実は、Reactもこれと同じことをやっているんです。

Reactのイベント委譲：すべてを「一番上」でキャッチする

通常のWebサイト（HTML/JavaScript）では、ボタンが100個あれば100個すべてのボタンに「クリックされたらこれをしてね」という命令を直接くっつけるのが一般的でした。でも、これはメモリをたくさん食うし、管理も面倒です。

Reactは違います。Reactは、ページの一番上（ルート要素）で「おーい！誰かクリックされたら教えてくれー！」と待ち構えているんです。

あなたがボタンをポチッと押すと、そのクリックイベントは親へ親へと伝わっていき（これを「バブリング」と呼びます）、最終的にReactが設置した「一番上の見張り番」に届きます。そこでReactは「お、今クリックされたのはあのボタンだな。じゃああの関数を動かそう！」と判断しているわけです。

これが「イベント委譲」の正体です。

—

コードで見てみよう

言葉だけだと少し抽象的なので、簡単な例を見てみましょう。

import React from ‘react’;

export default function App() {
// ボタンがクリックされた時に動く関数
const handleClick = (id) => {
console.log(`${id}番目のボタンが押されました！`);
};

return (
// Reactは、この親要素(div)のさらに外側でイベントを一括管理しています

);
}

このコードを書くとき、あなたは「メモリ管理」なんて難しいことを気にする必要はありません。Reactが裏で「全員分のイベントを僕がまとめて面倒見ておくから、君はやりたいこと（`handleClick`）だけ書いてね！」と言ってくれているからです。

—

なぜこれが「すごい」のか？

この仕組みのおかげで、Reactにはこんなメリットがあります。

1. メモリが節約できる: 大量のイベントリスナーを個別にブラウザに登録しなくて済むので、アプリが軽くなります。
2. 動的な追加・削除に強い: 例えば、あとから画面にボタンを10個追加しても、Reactが「ルートで待ち構える」仕組みは変わらないので、追加した瞬間にちゃんと動きます。「新しく追加したボタンにもイベントを登録しなきゃ！」と焦らなくていいんです。
3. コードがスッキリする: 複雑なイベントの管理をReactという「頼れる相棒」に任せられるので、私たちは「何が起きた時に何をするか」という本質的なロジックに集中できます。

最後に：つまずいても大丈夫

Reactを触り始めた頃は、この「裏側の仕組み」を意識しなくても全く問題ありません。まずは「`onClick` を書けば動くんだな」という感覚を大切にしてください。

でも、もし将来「なぜReactはこんなにサクサク動くんだろう？」と不思議に思った時、今日お話しした「教室の先生」の例えを思い出してみてください。Reactは常に、一番効率的な方法であなたのコードを支えています。

焦らず、一歩ずつ。Reactの魔法を一緒に楽しんでいきましょうね！