先生と生徒の会話形式で理解しよう

生徒

「Reactでボタンを押すと画面の文字が変わるようにしたいです。」

先生

「それならイベントハンドラとStateを組み合わせると実現できます。」

生徒

「イベントハンドラとStateって何ですか？」

先生

「イベントハンドラはボタンや入力などユーザーの操作に応じて処理を実行する関数です。StateはReactコンポーネントが持つ状態のことで、画面の表示を動的に変えるために使います。」

生徒

「具体的にどうやって組み合わせるんですか？」

先生

「では、ボタンを押したときに文字が変わる簡単な例を見てみましょう。」

1. Stateの基本

ReactではStateを使うことで、画面に表示される内容を動的に変更できます。StateはuseStateというフックを使って定義します。useStateは、現在の状態とその状態を更新する関数を返します。

2. イベントハンドラの基本

イベントハンドラは、ボタンのクリックや入力などのイベントに反応して処理を行う関数です。ReactではonClickやonChangeなどのプロパティに関数を指定します。

3. Stateとイベントハンドラを組み合わせる


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  const handleClick = () => {
    setMessage("ボタンがクリックされました！");
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>クリックしてみよう</button>
    </div>
  );
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

4. 入力フォームのState連動

ボタンだけでなく、入力フォームでもStateとイベントハンドラを組み合わせることで、入力内容をリアルタイムで画面に反映できます。


function App() {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} placeholder="文字を入力" />
      <p>入力内容: {text}</p>
    </div>
  );
}

（入力欄に文字を入力すると、下にリアルタイムで入力内容が表示されます）

5. 複数イベントでStateを操作する

複数のボタンや入力がある場合でも、イベントハンドラごとにStateを更新する関数を作成して組み合わせることができます。これによりUIの状態を簡単に動的に変化させることができます。


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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={increment}>増やす</button>
      <button onClick={decrement}>減らす</button>
    </div>
  );
}

（「増やす」を押すとカウントが増え、「減らす」を押すとカウントが減ります）

6. UIの動きを整理するポイント

イベントハンドラとStateを組み合わせると、UIを動的に制御できますが、ポイントは次の通りです。

Stateは必要な部分だけに使う
イベントハンドラは短く、わかりやすく書く
複数イベントがある場合は共通関数化や分岐を活用する
UIの状態がどのように変化するかを意識してState設計を行う

これらを意識すると、Reactでのイベント処理とUI更新がスムーズになり、初心者でも簡単に動的なアプリを作ることができます。

まとめ

イベントハンドラとStateを組み合わせる意味を振り返ろう

この記事では、ReactにおいてイベントハンドラとStateを組み合わせてユーザーインターフェースを動かす方法について、基礎から順番に解説してきました。 Reactの最大の特徴は、「ユーザーの操作に応じて画面が自動的に切り替わる」点にあります。その中心にあるのが、イベントハンドラとStateの連携です。

ボタンをクリックしたとき、入力欄に文字を入力したとき、その操作をきっかけにStateが更新され、Stateの変化に応じて画面が再描画される。この一連の流れを理解することで、Reactの仕組みが一気に分かりやすくなります。単に「値を変える」のではなく、「状態が変わることでUIが更新される」という考え方が、 React開発ではとても重要です。

StateはUIの設計図として考える

Stateは、コンポーネントが持つ「今の状態」を表すものです。表示される文字、カウントの数値、入力フォームの内容など、ユーザー操作によって変化する情報はすべてStateで管理できます。 Stateを正しく設計することで、UIの動きが整理され、コードも読みやすく、保守しやすくなります。

この記事で紹介したように、useStateを使えば、現在の値と更新用の関数をセットで扱うことができます。この更新関数をイベントハンドラの中で呼び出すことで、ユーザーの操作とStateの変更を自然につなげることができます。 Reactでは、直接値を書き換えるのではなく、必ずState更新関数を使うという点も重要なポイントです。

イベントハンドラはUI操作の入口

イベントハンドラは、ボタンのクリックや入力の変更など、ユーザーの操作を受け取るための入口です。 onClickやonChangeなどを使うことで、 Reactは「いつ」「どんな操作が行われたか」を検知できます。そのタイミングでStateを更新することで、 UIがリアルタイムに変化します。

イベントハンドラはできるだけ短く、分かりやすく書くことが大切です。処理が複雑になりそうな場合は、関数を分けたり、共通の処理をまとめたりすることで、コード全体の見通しが良くなります。イベントとStateの関係を整理することが、 ReactでのUI設計のコツと言えるでしょう。

サンプルプログラムで流れを再確認

ここで、イベントハンドラとStateを組み合わせた基本的な構成を、あらためてサンプルプログラムで確認してみましょう。ユーザー操作によってStateが変わり、それが画面に反映される流れを意識してみてください。


import React, { useState } from "react";

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

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

  return (
    <div>
      <p>現在の数値: {count}</p>
      <button onClick={handleClick}>増やす</button>
    </div>
  );
}

export default Sample;

このコードでは、ボタンをクリックするたびにStateが更新され、画面の数値が自動的に変化します。「イベント → State更新 → 再描画」というReactの基本サイクルが、シンプルな形で表現されています。まずはこの流れをしっかり理解し、自分で書けるようになることが重要です。