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

生徒

「Reactで入力フォームの値を変化に応じて取得したいです。どうすればいいですか？」

先生

「それにはReactのonChangeイベントを使います。これはユーザーが入力した内容をリアルタイムで受け取る仕組みです。」

生徒

「普通のHTMLのonchangeと違う点はありますか？」

先生

「ReactではキャメルケースのonChangeを使う点が違います。また、イベントで受け取った値をuseStateで管理することで、入力フォームの値を簡単に状態として扱えるのが特徴です。」

生徒

「具体的にコード例で見てみたいです。」

先生

「では、基本の使い方を見ていきましょう！」

1. onChangeイベントで入力値を管理する基本例

Reactでは、inputタグにonChangeを設定して入力の変化を検知し、useStateで管理します。useStateは状態を保持する仕組みで、値が変わると自動的に画面が更新されます。


import React, { useState } from "react";

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

  return (
    <div>
      <input
        type="text"
        placeholder="名前を入力してください"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>入力された名前: {name}</p>
    </div>
  );
}

export default App;

（入力フォームに文字を入力すると、下に入力された文字がリアルタイムで表示されます）

この例では、value属性でフォームの値をnameと連動させ、onChangeで入力が変わるたびにsetNameで状態を更新しています。e.target.valueはイベントオブジェクトeから入力値を取得する方法です。

2. 関数を分けてonChangeイベントを扱う方法

入力時の処理を複雑にしたい場合は、関数を別に定義するとわかりやすくなります。


import React, { useState } from "react";

function App() {
  const [email, setEmail] = useState("");

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

  return (
    <div>
      <input
        type="email"
        placeholder="メールアドレスを入力"
        value={email}
        onChange={handleChange}
      />
      <p>入力されたメール: {email}</p>
    </div>
  );
}

export default App;

（メールアドレス入力欄に文字を入力すると、下に入力された文字がリアルタイムで表示されます）

この方法では、クリック処理の例と同じく関数を分けて管理しています。複雑な入力検証や条件に応じた処理も、関数を別にして書くことで整理して実装できます。

3. onChangeイベントで覚えておくポイント

Reactのイベントはキャメルケースで書く（例：onChange、onClick）
入力値はuseStateで状態管理すると画面表示と同期できる
関数内でevent.target.valueを取得して値を更新する
複雑な処理は関数を分けて書くとコードが見やすくなる
フォームの種類によってtypeを指定することで適切な入力を受け付けられる

これらのポイントを押さえると、Reactで入力フォームの値を簡単に管理できるようになります。onChangeイベントは、ユーザーが入力した内容をリアルタイムで取得して反映するための基本的な仕組みです。

4. 複数の入力項目をまとめて管理する方法

Reactでは、入力フォームが複数になるにつれて、状態管理が複雑になることがあります。そのような場合に役立つのが、ひとつのオブジェクトで複数の入力値をまとめて管理する方法です。useStateにオブジェクトを持たせることで、フォーム全体の値を整理しながら効率よく扱うことができます。入力項目が増えても一つのonChange関数でまとめて処理できるため、コードの見通しがよくなり、保守しやすい記述になります。


import React, { useState } from "react";

function App() {
  const [form, setForm] = useState({ name: "", email: "", age: "" });

  function handleChange(e) {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  }

  return (
    <div>
      <input
        type="text"
        name="name"
        placeholder="名前を入力"
        value={form.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        placeholder="メールを入力"
        value={form.email}
        onChange={handleChange}
      />
      <input
        type="number"
        name="age"
        placeholder="年齢を入力"
        value={form.age}
        onChange={handleChange}
      />
      <p>名前: {form.name}</p>
      <p>メール: {form.email}</p>
      <p>年齢: {form.age}</p>
    </div>
  );
}

export default App;

上記のように、フォーム全体をオブジェクトで構成することで、変更があった部分だけを更新できるようになります。name属性とオブジェクトのキーを一致させておくことで、共通のハンドラーで管理できるのが大きな利点です。

5. 入力内容に合わせて表示を切り替える応用例

onChangeイベントを利用すると、入力された値に応じて画面上のコンポーネントを切り替えるような動的な表現も可能になります。たとえば、文字が入力されたときだけ説明文を表示したり、特定の条件に合致したときにメッセージを切り替えるといった表現が簡単に実現できます。ユーザー操作と画面の変化が直感的に連動するため、使いやすいインターフェースを提供できる点が特徴です。


import React, { useState } from "react";

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

  return (
    <div>
      <input
        type="text"
        placeholder="文字を入力"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      {text !== "" ? (
        <p>入力されています: {text}</p>
      ) : (
        <p>まだ何も入力されていません。</p>
      )}
    </div>
  );
}

export default App;

条件によって表示を切り替えることで、よりリッチで分かりやすい画面表現が可能になります。Reactでは状態が変わるたびに描画が更新されるため、このような動的切り替えが自然な形で実現できます。

6. 入力値の検証をonChangeイベントで実装する方法

フォーム入力では、入力内容を検証して適切な値だけを受け付けることが重要です。onChangeイベントを利用すると、入力が行われたタイミングでリアルタイムにチェックを行い、条件に合わない値が入力された場合に警告を表示するといった機能を実装できます。メールアドレスの形式や文字数チェックなど、ミスを防ぐ仕組みとしてよく使用されます。


import React, { useState } from "react";

function App() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  function handleChange(e) {
    const value = e.target.value;
    setEmail(value);

    if (!value.includes("@")) {
      setError("メールアドレスの形式が正しくありません");
    } else {
      setError("");
    }
  }

  return (
    <div>
      <input
        type="email"
        placeholder="メールを入力"
        value={email}
        onChange={handleChange}
      />
      {error && <p class="text-danger">{error}</p>}
    </div>
  );
}

export default App;

入力内容の検証をリアルタイムに行うことで、ユーザーが間違った入力をしている場合でもすぐに気づけるため、スムーズな入力体験を提供できます。Reactの再描画と相性の良い考え方であり、多くのフォーム実装で欠かせない仕組みです。

まとめ

ReactでのonChangeイベントを利用した入力値管理は、フォーム操作の基本でありながら、さまざまなアプリケーションで活用できる幅広い技術です。とくに、文字入力の変化を即座に状態へ反映できる点は、リアルタイムな画面更新を必要とする場面で非常に重要です。さらに、useStateフックとの組み合わせによって、フォームの入力内容と画面表示が常に一致した状態を保つことができるため、扱いやすく信頼性の高い実装が可能になります。入力欄を増やしたい場合や複数のデータを管理したい場合でも、onChangeイベントと状態管理を正しく整理していくことで、明確で読みやすいコードへと発展させることができます。また、関数を分けて処理を書く方法は、入力チェックやエラーメッセージの表示など、実際の開発現場でよく求められる機能と相性がよい構成です。イベントの中で複雑なロジックを直接書くよりも、管理すべき役割を関数ごとに分けて記述することで、可読性が高まりメンテナンス性も向上します。Reactのイベントシステムはシンプルでありながら拡張性が高いため、初心者が理解しておくとスムーズに応用へ進める重要なポイントといえるでしょう。以下のサンプルコードでは、複数の入力欄を管理する実践的な例を示し、フォーム入力値がどのように状態へ反映されていくのかをより深く理解できる構成としています。Reactのフォーム制御に慣れてくると、動的な入力検証や入力に応じた画面切り替えなど、さまざまな応用が自然に発想できるようになります。

サンプルプログラム：複数入力値をまとめて管理する例


import React, { useState } from "react";

function FormSample() {
  const [form, setForm] = useState({ name: "", email: "" });

  function handleChange(e) {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  }

  return (
    <div class="card p-3">
      <input
        type="text"
        name="name"
        placeholder="名前を入力"
        value={form.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        placeholder="メールを入力"
        value={form.email}
        onChange={handleChange}
      />
      <p>入力された名前: {form.name}</p>
      <p>入力されたメール: {form.email}</p>
    </div>
  );
}

export default FormSample;

このように、入力欄ごとにname属性を設定し、ひとつのhandleChange関数でまとめて管理する形は非常に便利です。Reactでのフォーム制御は、慣れるほど直感的に扱えるようになるため、実際に手を動かしながら体験していくことが重要です。入力の変化をどのように状態へ渡し、それをどのように画面へ反映するのかを理解すると、より洗練されたReactアプリケーションへとつなげられます。

先生と生徒の振り返り会話

生徒「今日はonChangeイベントとuseStateのつながりがよくわかりました。入力するたびに値が変わるしくみが面白かったです。」

先生「その通りだよ。Reactでは入力値の変化をそのまま状態へ反映できるから、画面更新の流れがとても自然なんだ。フォーム操作はアプリ開発で欠かせない部分だから、しっかり身につけておくと役に立つよ。」

生徒「複数の入力欄もまとめて状態管理できるのが意外でした。ひとつの関数で扱えるのは便利ですね。」

先生「実務でもその方法はよく使われるよ。コードが整理されるし、後から項目を増やすときにも対応しやすい。きょう学んだ構成は、いろいろな画面で応用できるよ。」

生徒「もっと複雑な条件チェックにも挑戦してみたいです！」

先生「いい意欲だね。次は入力内容に応じてエラー表示を変えたり、送信ボタンの制御なども学んでみよう。」