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

生徒

「先生、Reactでフォームを作ったんですが、入力した内容をサーバーに送信する方法がよくわかりません。送信ボタンを押したら非同期処理でデータを送るってできますか？」

先生

「もちろんできますよ。ReactではuseEffectを使うことで、フォーム送信後に非同期処理を安全に扱うことができます。」

生徒

「フォーム送信とuseEffectを組み合わせるイメージがまだ湧きません。どういうふうに書けばいいんですか？」

先生

「それでは、順番にフォーム送信の非同期処理を実装する方法を見ていきましょう。」

1. フォーム送信の基本と非同期処理

フォーム送信とは、ユーザーが入力した内容をサーバーに送ることを指します。通常はHTMLの<form>タグを使いますが、ReactではJavaScriptの関数を使って制御することが一般的です。特にサーバーと通信する部分は「非同期処理」と呼ばれ、結果が返ってくるまでに時間がかかるため、待つ仕組みを入れる必要があります。

例えば、通販サイトで注文ボタンを押したときに「注文を送信中です」と表示され、少し待ってから「注文が完了しました」と画面に出ることがあります。これも非同期処理の一種です。

2. useEffectを使う理由

useEffectは、Reactのコンポーネントで「特定の状態が変わったときに処理を実行する」ための仕組みです。フォーム送信の場面では「送信ボタンが押された」という状態をフラグにして、その変化をトリガーに非同期処理を実行できます。

つまり、useEffectを使うことで「ユーザーが送信したらAPI通信を開始する」といった動きを自然に書くことができるのです。

3. フォーム送信の非同期処理を実装する例

以下は、ユーザーが名前を入力して送信するとサーバーにデータを送るサンプルコードです。


import React, { useState, useEffect } from "react";

function App() {
  const [name, setName] = useState("");
  const [submittedName, setSubmittedName] = useState(null);
  const [message, setMessage] = useState("");

  useEffect(() => {
    if (submittedName) {
      const sendData = async () => {
        try {
          const res = await fetch("https://example.com/api", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name: submittedName }),
          });
          if (!res.ok) throw new Error("送信エラー");
          setMessage("送信が完了しました！");
        } catch (error) {
          setMessage("送信に失敗しました。もう一度お試しください。");
        }
      };
      sendData();
    }
  }, [submittedName]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmittedName(name);
  };

  return (
    <div>
      <h1>フォーム送信の例</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="名前を入力してください"
        />
        <button type="submit">送信</button>
      </form>
      <p>{message}</p>
    </div>
  );
}

export default App;

（フォームに名前を入力して送信ボタンを押すと、サーバーにデータが送信され、結果が画面に表示されます）

4. エラーメッセージとユーザー体験

フォーム送信では、成功する場合もあれば失敗する場合もあります。通信エラーや入力エラーがあった場合、ユーザーに何が起こったかを知らせることが大切です。上のコードではsetMessageを使って「送信に失敗しました」というメッセージを表示しています。これによって、ユーザーはただ画面が固まっているのではなく「エラーが発生した」と理解できます。