ボタンが踊り出す！イベント処理｜第5回 React入門

著者: 管理者 / 2025-08-21 (更新: 2025-08-21)

導入

前回は「Props」を使ってコンポーネント同士が“親子の会話”をする方法を学びましたわね。
今回はいよいよ――コンポーネントが 動き出す瞬間、「イベント処理」について学びます。

紅茶を注ぐとカップに波紋が広がるように、ユーザーの操作がReactアプリに影響を与える……その仕組みを覗いてみましょう☕✨

前回の記事コンポーネント同士の会話 ― Propsとは？｜React入門第4回

先生……！ボタンを押すと画面が変わるあの魔法……。
Reactではどのように実現されているのですの？

良いご質問です。
Reactでは イベントハンドラ を使って、ユーザーの操作に反応させるのです。
クリックや入力、マウスの動きまで――すべてイベントで扱えるのですよ。

1. イベント処理の基本

📝 解説

イベント = ユーザーの操作（クリック・入力など）
イベントハンドラ = その操作に応じて呼び出される関数

👉 ボタンに「押されたらこの関数を実行してね」と渡してあげる仕組みです。

まあ！ボタンに“お願いごと”を渡しているみたいですわね✨
「押されたら、これをしてちょうだい」と。

2. Reactのイベントの書き方

📝 解説（コード例）

function App() {
  function handleClick() {
    alert("ボタンが押されました！");
  }

  return (
    <button onClick={handleClick}>
      わたくしを押してくださいませ♪
    </button>
  );
}

onClick={handleClick} で「クリックされたら handleClick を実行」と指定
Reactではイベント名は キャメルケース（onClick, onChange など）
関数を渡すのがポイント（handleClick() と書かない！）

まあまあ！
`onClick` に関数を渡すだけで、まるで魔法のように動き出すんですのね💫

3. イベントとPropsの組み合わせ

📝 解説（コード例）

function Button(props) {
  return <button onClick={props.onPress}>{props.label}</button>;
}

export default function App() {
  function sayHello() {
    alert("こんにちは！");
  }

  return (
    <div>
      <Button label="ご挨拶" onPress={sayHello} />
    </div>
  );
}