1. Reactのフォーム処理とは何か

Reactのフォーム処理とは、文字を入力したり、ボタンを押したりした情報を、プログラムの中で正しく受け取って使う仕組みです。たとえば、紙の申込書に書いた内容を受付の人が読み取るように、 Reactでは入力内容を状態として管理します。これを意識するだけで、フォーム作りはぐっと分かりやすくなります。

2. 状態で入力内容を管理するのが基本

Reactでは、フォームの値を状態で管理するのが基本です。状態とは、今の入力内容を覚えておくメモ帳のようなものです。直接画面から値を取りに行くのではなく、状態を通して扱うことで、動作が安定します。


import React, { useState } from "react";

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

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="名前を入力"
    />
  );
}

export default NameForm;

（入力した名前がReactの状態として保存されます）

3. labelを使って分かりやすいフォームにする

labelは入力欄の説明文です。これは、書類にある「ここに名前を書く」という案内と同じ役割です。 labelを使うことで、見た目だけでなく、画面読み上げ機能を使う人にも内容が伝わりやすくなります。フォーム処理のベストプラクティスとして、必ず使うようにしましょう。


function EmailForm() {
  return (
    <form>
      <label htmlFor="email">メールアドレス</label>
      <input id="email" type="email" />
    </form>
  );
}

（説明文と入力欄が正しく結びつきます）

4. 送信処理は関数でまとめる

フォームを送信するときの処理は、ひとつの関数にまとめるのがコツです。これは、作業手順を紙にまとめるのと同じで、後から見返したときに理解しやすくなります。初心者ほど、この形を意識すると失敗しにくくなります。


function SubmitForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("送信されました");
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">送信</button>
    </form>
  );
}

（ボタンを押すと送信処理が実行されます）

5. 入力チェックはシンプルに行う

フォームでは、入力ミスを防ぐことが大切です。ただし、最初から難しい仕組みを作る必要はありません。「空欄ならエラーを出す」など、簡単なチェックから始めるのがベストプラクティスです。これは、先生がテストで名前を書き忘れていないか確認するのと同じです。


function CheckForm() {
  const [name, setName] = useState("");
  const [error, setError] = useState("");

  const submit = () => {
    if (name === "") {
      setError("名前を入力してください");
    }
  };

  return (
    <div>
      <input onChange={(e) => setName(e.target.value)} />
      <button onClick={submit}>確認</button>
      {error && <p>{error}</p>}
    </div>
  );
}

（未入力の場合、エラーメッセージが表示されます）