イベントハンドリングの基本

React 入門：イベントハンドリングの基本

React でインタラクティブな UI を作るには、イベントハンドリング が欠かせません。ユーザーがボタンをクリックしたり、入力フォームに文字を打ち込んだりすると、それに応じてアプリが反応します。今回は、React におけるイベントハンドリングの基本的な使い方を整理して紹介します。

React のイベントは JavaScript と何が違う？

通常の JavaScript では、次のようにaddEventListenerを使ってイベントを設定します。

<button id="myBtn">クリック</button>

<script>
  document.getElementById("myBtn").addEventListener("click", () => {
    alert("クリックされました！");
  });
</script>

一方、React では、JSX 内で キャメルケース（onClick, onChange など） を使って直接イベントを指定します。

function App() {
  return (
    <button onClick={() => alert("クリックされました！")}>クリック</button>
  );
}

大きな違いは以下の点です：

• イベント名は 小文字ではなくキャメルケース で書く (onclick → onClick)
• イベントに渡すのは 関数（文字列は不可）

基本的な書き方

1. 直接書く方法

<button onClick={() => console.log("クリックされました！")}>クリック</button>

シンプルですが、処理が複雑になると読みにくくなるので、基本的には関数を別に定義して渡すのが推奨です。

2. 関数を定義して渡す方法

function App() {
  const handleClick = () => {
    console.log("クリックされました！");
  };

  return <button onClick={handleClick}>クリック</button>;
}

これなら、処理が長くなっても整理しやすいです。

イベントと State を組み合わせる

イベントハンドリングは、State と組み合わせることで真価を発揮します。ユーザー操作によって状態を更新し、それを UI に反映するのが React の基本的な流れです。

カウンターの例

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleIncrement}>＋1</button>
    </div>
  );
}

ここでは、onClick イベントで handleIncrement を呼び出し、その中で setCount によって State を更新しています。結果として、画面上のカウントがリアルタイムで変わります。

よく使うイベント例

React にはさまざまなイベントが用意されています。代表的なものをまとめると：

イベント引数の扱い

イベントハンドラーはイベントオブジェクト（event）を受け取ることができます。
例えば、フォーム入力で入力値を取得する場合：

function InputExample() {
  const handleChange = (event) => {
    console.log(event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
}

ここで event.target.value が入力中の文字列を表します。

まとめ

• React では キャメルケース でイベントを指定する
• イベントには 関数を渡す（文字列は使えない）
• State と組み合わせることで動的な UI が作れる
• イベントオブジェクトを使えば入力内容なども取得できる