Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – イベント処理

Next.js
2026.01.01
スポンサーリンク

イベント処理とは

イベント処理は、「ユーザーの操作に反応して、何かを実行するしくみ」です。
ボタンをクリックしたり、入力フォームに文字を打ったり、Enterキーを押したり――これらはすべて「イベント」です。

React では、

「画面のどの要素に、どんなイベントが起きたときに、どの関数を呼び出すか」

を JSX の中に書いていきます。
ここで重要なのが onClick や onChange といった「イベントハンドラ」と呼ばれる属性です。

onClickの仕組み

onClick は「クリックされたときに呼ぶ関数を登録する場所」

onClick は、ボタンなどの要素に「クリックされたときに呼び出す関数」を登録するための仕組みです。

とてもシンプルな例から見てみます。

function ClickExample() {
  function handleClick() {
    alert("ボタンがクリックされました！");
  }

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

ここで起きていることを順番に整理します。

まず、handleClick という関数を定義しています。
この関数の中では alert("ボタンがクリックされました！") が実行されます。
その下で、<button onClick={handleClick}> と書いています。
これは「このボタンがクリックされたら、handleClick 関数を呼んでください」と React に伝えている状態です。

つまり、onClick に書いているのは「関数そのもの」です。
「クリックされたら、この関数を呼んでね」という“予約”をしているイメージです。

関数を渡す意味

「今すぐ実行」ではなく「あとで実行するために渡す」

初心者が最初によく間違えるポイントがここです。

次のふたつを比べてみてください。

<button onClick={handleClick}>OK</button>
<button onClick={handleClick()}>NG例</button>
JSX

onClick={handleClick} は「関数そのものを渡している」状態です。
onClick={handleClick()} は「ここで関数を実行した結果を渡してしまっている」状態です。

React のイベント処理で必要なのは「今すぐ実行」ではなく、「クリックされたときに呼び出すために渡す」ことです。
なので、ほとんどの場合は onClick={関数名} の形で書きます。

引数を渡したいときの書き方

では「クリックされたときに、特定の値を使って関数を呼びたい」場合はどうするか。
このときに、よくアロー関数を使います。

例えば、次のような例です。

function ClickWithName() {
  function handleClick(name) {
    alert(`${name} さん、クリックありがとう！`);
  }

  return (
    <div>
      <button onClick={() => handleClick("太郎")}>
        太郎ボタン
      </button>
      <button onClick={() => handleClick("花子")}>
        花子ボタン
      </button>
    </div>
  );
}
JSX

ここでは、onClick={() => handleClick("太郎")} のように、無名関数（アロー関数）を渡しています。
クリックされた瞬間に、この「無名関数」が実行され、その中で handleClick("太郎") が呼ばれます。

ポイントは、

onClick に渡すのは「関数」という形を保っておくこと
その関数の中で、好きな引数付きで別の関数を呼べばよいこと

です。

フォーム入力の取得

入力された文字を「状態」として持つ

入力フォーム（テキストボックスなど）の値を扱うときは、useState と onChange を組み合わせるのが基本です。

イメージとしては、

入力欄に何か打たれるたびに
onChange イベントが発生し
その都度、state を最新の入力内容に更新する

という流れです。

簡単な例を見てみましょう。

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="名前を入力してください"
      />
    </div>
  );
}
JSX

ここでのポイントを説明します。

useState("") で name という state を用意し、初期値を空文字にしています。
<input value={name} ... /> とすることで、「入力欄の中身は常に state の name と同期する」ようにしています。
ユーザーが文字を入力すると、onChange が発生し、handleChange が呼び出されます。
handleChange の中では、event.target.value から「今の入力値」を取り出し、それを setName で state に保存しています。

これを「制御されたコンポーネント（Controlled Component）」と呼びます。
入力欄の中身を、React の state でしっかり管理しているイメージです。

入力値の表示

入力した内容をそのまま画面に反映する

入力欄と state さえ用意できれば、その state を JSX の中で表示するだけで、「打ったそばから画面に反映される UI」が作れます。

先ほどの NameInput を少し発展させてみます。

import { useState } from "react";

function NameEcho() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>名前入力デモ</h1>

      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="名前を入力してください"
        style={{ padding: "8px", width: "250px" }}
      />

      <p style={{ marginTop: "16px" }}>
        入力された名前：{name || "（まだ何も入力されていません）"}
      </p>
    </main>
  );
}

export default NameEcho;
JSX

このコンポーネントでは、次のような流れで画面が動きます。

最初は name が空文字なので、「まだ何も入力されていません」と表示される。
ユーザーが入力欄に文字を打つたびに、handleChange が呼ばれて setName される。
name が変わるたびにコンポーネントが再レンダリングされ、{name} の部分の表示も更新される。

結果として、「入力した内容がそのまま下の行にリアルタイム表示される」画面になります。

イベント＋state で「動く UI 」ができる

ここまでをまとめると、React で「動きのある UI」を作るときは、だいたいこのセットで考えます。

ユーザー操作 → イベント（onClick / onChange など）が発生する
イベントが発生したら「どの関数を呼ぶか」を事前に JSX で登録しておく
その関数の中で setState を呼んで state を更新する
state が更新されるとコンポーネントが再レンダリングされ、画面が新しい状態に変わる

このパターンさえ身体で覚えてしまえば、
カウンター、フォーム、トグルボタン、タブ切り替え、モーダルの開閉など、いろんな UI を組み立てられるようになっていきます。

まとめ（イベント処理の感覚）

onClick は「クリックされたときに呼ぶ関数を登録する場所」で、onClick={関数} の形で「関数そのもの」を渡す。
イベントハンドラに関数を渡すのは、「今すぐ実行する」のではなく「後で実行してもらうために渡す」ためで、引数を渡したいときは onClick={() => 関数(引数)} のようにアロー関数をよく使う。
フォームでは onChange と useState を組み合わせ、入力されるたびに setState で値を更新することで、「入力した内容を React の state として管理」できる。
state を JSX の中で {} を使って表示すれば、入力値や状態がそのまま画面にリアルタイムで反映される。

次の一歩としては、

クリックでカウントアップするボタン
入力した文字数を下に表示するテキストボックス
「表示／非表示」を切り替えるボタンとテキスト

あたりを、自分の page.tsx に書いて動かしてみると、
イベント処理と state のつながりが一気に腑に落ちてくるはずです。

スポンサーリンク
タイトルとURLをコピーしました