フォームのバリデーション

React では、ユーザー入力に対して即時にバリデーションを行うことができます。ここでは useState を使ってバリデーションロジックを自前で構築する基本パターンを紹介します。

✏️ 入力フォーム + 必須チェック

import { useState } from "react";

export const BasicFormValidation = () => {
  const [name, setName] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e: React.FormEvent
<HTMLFormElement>) => {
    e.preventDefault();

    if (name.trim() === "") {
      setError("名前を入力してください。");
      return;
    }

    setError("");
    alert(`送信された名前: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>

<div>

<label>
          名前:
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </label>
      </div>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">送信</button>
    </form>
  );
};

🧠 よく使うチェックロジック例

✔︎ 空チェック

if (!value.trim()) {
  // 空文字列とスペースのみをNGとする
}

✔︎ 文字数チェック

if (value.length < 3) {
  // 3文字未満エラー
}

✔︎ メール形式チェック（正規表現）

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(value)) {
  // メール形式エラー
}

🚩 状態をオブジェクトでまとめるパターン

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

const [errors, setErrors] = useState({
  name: "",
  email: "",
});

const handleChange = (e: React.ChangeEvent
<HTMLInputElement>) => {
  const { name, value } = e.target;
  setForm((prev) => ({ ...prev, [name]: value }));
};

🛠 補足

• より複雑なバリデーションには yup や react-hook-form の導入が有効です。
• UI ライブラリ（MUI, Chakra UI 等）と併用する際にも同様の構造で対応できます。

npm install react-hook-form yup