前回の続き——「データを変える」きっかけを作る
前回のI-05では、Reactが「データから画面を毎回計算し直す」というレンダリングの仕組みを学びました。そこでは、画面を直接いじるのではなく、データを変えれば画面がついてくる、という原則を確認しました。では、その「データを変える」きっかけは、どこから来るのでしょうか。この講義で扱うイベント処理が、まさにその入口です。利用者の操作を受け取り、状態更新へとつなぐ役割を担います。
このスライドのポイント
- I-05: Reactは「データから画面を毎回計算し直す」（レンダリング）
- 原則: 画面を直接いじらず、データを変えれば画面がついてくる
- 残る問い: その「データを変える」きっかけはどこから来るのか
- この講義の役割: 操作を受け取り、state更新へつなぐ入口を担うのがイベント処理
イベントとイベントハンドラーの定義
イベントとは、クリック・入力・送信といった利用者の操作のことです。そして、イベントが発生したときに呼ばれる関数を、イベントハンドラーと呼びます。ハンドラーは、onClickやonChange、onSubmitといった受け口に渡して使います。その役割は、操作を受け取って、I-04で学んだstateの更新や、後で扱う通信の開始を指示することです。つまりイベントハンドラーは、利用者の操作とアプリの反応をつなぐ橋渡し役だと言えます。
このスライドのポイント
- イベント＝クリック・入力・送信などの利用者の操作
- イベントハンドラー＝イベント発生時に呼ばれる関数
- 渡し先: onClick・onChange・onSubmit などの受け口
- 役割: 操作を受けて、state更新（I-04）や通信の開始（I-10）を指示する
なぜ必要か——頻出不具合を切り分けるために
イベント処理を理解していないと、頻出する不具合の切り分けができません。たとえば「ボタンを押しても何も起きない」という現象は、多くの場合ハンドラーが接続されていないことが原因です。「入力しても画面に反映されない」という現象は、onChangeとstateの連動が漏れていることが原因です。どちらも、操作から画面変化までの一本の流れの、どこが切れているかを見る視点があれば、原因にたどり着けます。
このスライドのポイント
- 「押しても何も起きない」→ ハンドラーが未接続なことが多い
- 「入力しても反映されない」→ onChangeとstateの連動が漏れている
- どちらも「操作→画面変化」の一本線のどこが切れているかを見れば原因に届く
構造——state更新の循環に入る一本線
イベント処理の流れは、一本の線で表せます。たとえばボタンをクリックすると、onClickに渡したハンドラーが実行されます。ハンドラーの中でstateの更新関数を呼ぶと、stateが変わります。stateが変われば、I-05で学んだ再描画が起き、新しい表示になります。I-04で見たstate更新の循環図を思い出すと、その循環の入口にあたるのが、このイベントです。操作という外からの一押しが、循環を動かし始めます。
このスライドのポイント
- クリック → onClickのハンドラー実行 → 更新関数でstate更新 → 再描画（I-05）→ 新表示
- I-04で見たstate更新の循環図、その入口にあたるのがイベント
- 操作という外からの一押しが、循環を動かし始める
具体例——設計図の矢印1本がハンドラー1つ
H-06で描いた状態遷移図を思い出してください。未入力から入力中へ、入力中から送信中へと、状態が矢印でつながっていました。実は、その矢印1本1本の正体が、イベントハンドラーです。入力欄に文字を打つという操作の矢印はonChangeのハンドラー、送信ボタンを押すという矢印はonSubmitのハンドラーに対応します。つまり、設計図の矢印を1本ずつハンドラーに置き換えていけば、実装ができます。設計と実装が、きれいに対応する瞬間です。
このスライドのポイント
- H-06の状態遷移図: 未入力→入力中→送信中 を矢印でつないだ
- その矢印1本1本の正体がイベントハンドラー
- 文字を打つ矢印＝onChange、送信ボタンの矢印＝onSubmit
- 設計図の矢印を1つずつハンドラーに置き換えれば実装できる
技術サンプルカード——フォーム送信の基本形
こちらが、経費申請フォームの基本形です。amountというstateを持ち、入力欄のvalueにそのstateを渡しています。onChangeは、入力のたびにsetAmountを呼んで、入力欄とstateを同期させます。これで、打った文字がそのままstateへ反映されます。onSubmitは、送信という操作を受け取る受け口です。ここで呼ばれるhandleSubmitの中身、つまり実際にサーバーへ送る処理は、通信を扱うI-10で見ていきます。
このスライドのポイント
- 種別: code
- 目的: 入力とstateの同期、送信イベントの受け取り方を読む
- サンプル本体:
混同しやすい概念——渡すのか、その場で実行するのか
イベントハンドラーで、初学者が最もつまずく点を1組だけ挙げます。onClickに関数名だけを書くのと、onClickに関数名と丸括弧をつけて書くのは、まったく意味が違います。括弧をつけない書き方は、この関数を、押されたときに呼んでください、という渡し方です。一方、括弧をつけて書くと、その場で関数を実行してしまい、描画のたびに勝手に動く定番バグになります。たった括弧1組の差ですが、動作は正反対です。
バイブコーディングでの確認点——「押しても動かない」の2段確認
AIが作ったコードで「押しても動かない」という不具合に出会ったら、2段階で確認させましょう。第一に、ハンドラーがその要素に正しく接続されているか。第二に、ハンドラーの中でstateの更新関数を呼んでいるか、です。この2点を順に見れば、原因が接続の問題か、更新の問題かを切り分けられます。AIへの質問例としては、次のように聞けます。このボタンのハンドラーは接続されていますか、中でどのstateを更新していますか、と。
このスライドのポイント
- 第一に: ハンドラーがその要素に正しく接続されているか
- 第二に: ハンドラーの中でstateの更新関数を呼んでいるか
- 2点を順に見れば、接続の問題か更新の問題かを切り分けられる
- AIへの質問例: 「このボタンのハンドラーは接続されていますか。中でどのstateを更新していますか」
まとめと次回
最後に一問一答です。操作と状態更新をつなぐ関数を、何と呼ぶでしょうか。答えは、イベントハンドラーです。30秒でまとめます。イベント処理とは、利用者の操作をハンドラーで受け、stateを更新し、再描画で画面に反映するという一本の流れでした。次回のI-07では、画面の描画そのものではなく、外部システムとの同期に使うEffectを扱います。関連資料は、フォーム設計パターン50と、エラー解決プロンプト50です。
このスライドのポイント
- 一問一答: 操作と状態更新をつなぐ関数を何と呼ぶ？ → イベントハンドラー
- 30秒まとめ: イベント処理＝操作をハンドラーで受け、stateを更新し、再描画で画面に反映する一本の流れ
- 次回I-07: 画面の描画そのものではなく、外部システムとの同期に使うEffectへ
- 関連資料: 「フォーム設計パターン50」「エラー解決プロンプト50」
