1. エラーメッセージ表示とは何か

エラーメッセージ表示とは、入力内容に問題があるときに、その理由を利用者に伝える仕組みです。たとえば、未記入のまま提出しようとしたときに、その場で注意が表示されると分かりやすくなります。これは、紙の申込書で空欄に赤字で注意書きが入るのと同じ考え方です。

2. Reactフォーム処理の基本構造

Reactのフォーム処理では、入力内容をStateで管理します。 Stateとは、画面の状態を保存しておく箱のようなものです。エラーメッセージも、この箱に入れて管理すると整理しやすくなります。

3. 空欄エラーを表示する基本例

まずは一番簡単な例です。入力欄が空のまま送信された場合に、エラーメッセージを画面に表示します。


import React, { useState } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name === "") {
      setError("名前を入力してください");
      return;
    }
    setError("");
    alert("送信完了");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="名前"
        onChange={(e) => setName(e.target.value)}
      />
      {error && <p class="text-danger">{error}</p>}
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（名前が空の場合、赤いエラーメッセージが表示されます）

4. 文字数不足エラーの表示

次は、文字数が足りない場合のエラー表示です。これは、短すぎる入力を防ぐためによく使われます。最低限必要な情報が書かれているかを確認するイメージです。


import React, { useState } from "react";

function App() {
  const [comment, setComment] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (comment.length < 5) {
      setError("5文字以上入力してください");
      return;
    }
    setError("");
    alert("送信されました");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="コメント"
        onChange={(e) => setComment(e.target.value)}
      />
      {error && <p class="text-danger">{error}</p>}
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（文字数が足りない場合に注意文が表示されます）

5. 複数項目でエラーを管理する方法

実際のフォームでは、名前やメールアドレスなど、複数の入力欄があることがほとんどです。その場合は、エラー用のStateを分けて管理すると分かりやすくなります。


import React, { useState } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name === "" || email === "") {
      setError("すべて入力してください");
      return;
    }
    setError("");
    alert("送信成功");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="名前"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="text"
        placeholder="メール"
        onChange={(e) => setEmail(e.target.value)}
      />
      {error && <p class="text-danger">{error}</p>}
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（どちらかが未入力だとエラーが表示されます）