第7回：クリックや入力に反応する！Reactのイベントハンドリング基礎

前回：useStateをマスター！Reactで画面を動的に書き換える「状態」の基本では、データが変わると画面が自動で更新される魔法「State」を学びました。

しかし、そのStateを「いつ」書き換えるのでしょうか？ユーザーがボタンを押したとき、マウスを乗せたとき、あるいはキーボードを叩いたとき……。こうした「きっかけ」をReactで捕まえる技術が、今回学習するイベントハンドリングです。

1. Reactのイベントは「キャメルケース」
2. イベントの中で「何が起きたか」を知る方法
3. 【実践】マウスの動きに反応する「色変えパネル」
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：インラインで書くか、関数に分けるか
1. 今回のまとめ
2. 次回予告：大量のデータを一気に表示する

1. Reactのイベントは「キャメルケース」

普通のHTMLでは onclick や onchange とすべて小文字で書きますが、React（JSX）には大事なルールがあります。

ルール： 単語の区切りを大文字にする「キャメルケース」で書く。
- onclick → onClick
- onchange → onChange
- onmouseenter → onMouseEnter

2026年現在のモダンな開発でも、この書き方は絶対の基本です。これを間違えると、イベントは一切反応してくれません。

2. イベントの中で「何が起きたか」を知る方法

ユーザーが入力した文字や、クリックされた場所などの詳しい情報を知りたいときは、イベントオブジェクト（慣習的に e と書きます）を使います。

特に、第2回の環境構築で少し触れた e.target.value は、入力フォームを扱う際の必須知識です。

3. 【実践】マウスの動きに反応する「色変えパネル」

今回は、ボタンクリックだけでなく「マウスを乗せる（ホバー）」という動きに反応するサンプルを作ります。第2回の環境で作成した App.jsx を書き換えてみましょう。

App.jsx（最小構成版）

JavaScript

import React, { useState } from 'react';

export default function App() {
  // 1. 状態の定義：背景色を管理する
  const [color, setColor] = useState("lightgray");

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>イベント体験パネル</h1>

      {/* 2. 背景色が状態（color）に連動するパネル */}
      <div 
        style={{ 
          width: '200px', 
          height: '200px', 
          backgroundColor: color, 
          margin: '20px auto',
          lineHeight: '200px',
          border: '2px solid #333'
        }}
        // マウスが乗ったときのイベント
        onMouseEnter={() => setColor("skyblue")}
        // マウスが離れたときのイベント
        onMouseLeave={() => setColor("lightgray")}
      >
        ここにマウスを乗せて
      </div>

      {/* 3. ボタンクリックで色を固定する */}
      <button onClick={() => setColor("orange")}>
        オレンジ色に固定
      </button>

      <p>※マウス操作やクリックという「イベント」でStateを操っています。</p>
    </div>
  );
}

CodeSandboxでイベントハンドリングを体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

イベントプロパティ: onMouseEnter や onMouseLeave は、ブラウザが標準で持っているマウスイベントです。Reactはこれらを効率よく管理してくれます。
アロー関数の省略: () => setColor("...") と書くことで、イベントが発生した瞬間にだけ実行される「予約票」を作っています。

Reactのポイント

複数のイベントを組み合わせる: 一つの要素（今回の div）に複数のイベントを設定できます。これにより、「マウスを乗せた時だけ色を変え、離れたら戻す」といった複雑なUIが簡単に作れます。
第6回の復習: ここでも setColor（更新用関数）を使っていますね。イベントは「きっかけ」であり、実際に画面を変えるのは常に「Stateの更新」です。