フォームを作ろう

さあ、いよいよ実践的なUIの登場です。Webアプリを作るうえで、フォームは避けて通れません。ユーザー登録、ログイン、お問い合わせ……あらゆる場面でフォームが必要です。

このチャプターでは、あえてライブラリを使わずに、Reactのプリミティブな機能だけで登録フォームを作り切ります。「なぜあえて？」と思いますか？次のチャプターで紹介するライブラリの価値を、骨身に染みて理解してもらうためです。

まずは、苦労を味わいましょう。

制御コンポーネント（Controlled Component）

HTMLのフォームをそのままJSXに書いても、入力値はReactのStateとは連携していません。ReactでフォームUIを扱う基本的なパターンが 制御コンポーネント（Controlled Component） です。

考え方はシンプルです：

1. 入力値をStateで管理する
2. <input> の value にそのStateを渡す
3. onChange でStateを更新する

これでReactが入力値を完全にコントロールします。

import { useState } from 'react';

function NameInput() {
  // 入力値をStateで管理する
  const [name, setName] = useState('');

  return (
    <div>
      <input
        type="text"
        value={name}        // StateをValueに渡す
        onChange={(e) => setName(e.target.value)} // 変更があればStateを更新
        placeholder="お名前を入力"
      />
      <p>入力中: {name}</p>
    </div>
  );
}

e.target.value は、変更されたinput要素の現在の値です。これをStateにセットすることで、Reactの世界に入力値を取り込めます。

<input type="text" name="name" value="{{ old('name') }}">

なぜ value と onChange をセットで書くのか

value だけを渡して onChange を書かないと、Reactからこんな警告が出ます：

Warning: You provided a value prop to a form field without an onChange handler.

value をStateに固定した時点で、ユーザーがタイプしてもReactは「いや、値はStateが決めている」と判断して画面に反映しません。だからStateを更新する onChange が必ずセットで必要になります。これが「制御（Controlled）」の意味です。

登録フォームを作る

それでは本題に入りましょう。以下の4つのフィールドを持つ登録フォームを手作りします：

• 名前（name）
• メールアドレス（email）
• パスワード（password）
• パスワード確認（confirmPassword）

Step 1: フィールドごとにStateを用意する

まず、4つのフィールドそれぞれのStateを用意します。

import { useState } from 'react';

function RegistrationForm() {
  // フィールドごとにStateを宣言する
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  return (
    <form>
      <div>
        <label>名前</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>

      <div>
        <label>メールアドレス</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>

      <div>
        <label>パスワード</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>

      <div>
        <label>パスワード（確認）</label>
        <input
          type="password"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
        />
      </div>

      <button type="submit">登録する</button>
    </form>
  );
}

4つのフィールドで、もう4つの useState、4つの onChange ハンドラーが必要です。フィールドが増えるほど、このリストは長くなります。

localhost:5173

Step 2: バリデーションのStateを追加する

次に、エラーメッセージを管理するStateを追加します。各フィールドに対して、エラー文字列を保持するStateが必要です。

function RegistrationForm() {
  // 入力値のState（4つ）
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  // エラーメッセージのState（4つ追加）
  const [nameError, setNameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [confirmPasswordError, setConfirmPasswordError] = useState('');

  // ...
}

4フィールドの登録フォームを作るだけで、もう 8つの useState が並びました。これは少し多いと感じませんか？まだバリデーションロジックにも送信処理にも入っていません。

Step 3: バリデーションロジックを実装する

バリデーションは手動で書く必要があります。条件ごとにチェックして、エラー文字列をセットします。

function validate() {
  // バリデーション結果を追跡するフラグ
  let isValid = true;

  // 名前のバリデーション
  if (!name.trim()) {
    setNameError('名前を入力してください');
    isValid = false;
  } else {
    setNameError(''); // エラーがなければクリアする
  }

  // メールアドレスのバリデーション
  if (!email.trim()) {
    setEmailError('メールアドレスを入力してください');
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    // 正規表現でメール形式をチェック
    setEmailError('有効なメールアドレスを入力してください');
    isValid = false;
  } else {
    setEmailError('');
  }

  // パスワードのバリデーション
  if (!password) {
    setPasswordError('パスワードを入力してください');
    isValid = false;
  } else if (password.length < 8) {
    setPasswordError('パスワードは8文字以上にしてください');
    isValid = false;
  } else {
    setPasswordError('');
  }

  // パスワード確認のバリデーション
  if (!confirmPassword) {
    setConfirmPasswordError('パスワード（確認）を入力してください');
    isValid = false;
  } else if (password !== confirmPassword) {
    setConfirmPasswordError('パスワードが一致しません');
    isValid = false;
  } else {
    setConfirmPasswordError('');
  }

  return isValid;
}

各フィールドに対して「空チェック → 形式チェック → エラーをセット or クリア」という同じパターンを繰り返しています。4フィールドだとこの長さですが、10フィールドのフォームではどうなるでしょう…。

Step 4: 送信処理をつなぐ

フォームの onSubmit でバリデーションを実行し、パスすれば送信処理に進みます。

// 送信成功フラグ
const [isSubmitted, setIsSubmitted] = useState(false);

function handleSubmit(e) {
  // デフォルトのHTMLフォーム送信（ページリロード）を止める
  e.preventDefault();

  // バリデーションを実行する
  const isValid = validate();

  if (isValid) {
    // バリデーションが通ったら送信処理
    console.log('送信するデータ:', { name, email, password });
    setIsSubmitted(true);
  }
}

Step 5: エラーメッセージを表示する

最後に、JSXにエラーメッセージの表示を追加します。

<div>
  <label>名前</label>
  <input
    type="text"
    value={name}
    onChange={(e) => setName(e.target.value)}
  />
  {/* エラーがあれば表示する */}
  {nameError && <p style={{ color: 'red' }}>{nameError}</p>}
</div>

これをすべてのフィールドに追加します。

完成版コード

ここまでの内容を一つにまとめると、こうなります。覚悟して読んでください。

import { useState } from 'react';

function RegistrationForm() {
  // =====================
  // 入力値のState（4つ）
  // =====================
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  // =====================
  // エラーのState（4つ）
  // =====================
  const [nameError, setNameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [confirmPasswordError, setConfirmPasswordError] = useState('');

  // 送信成功フラグ
  const [isSubmitted, setIsSubmitted] = useState(false);

  // =====================
  // バリデーション関数
  // =====================
  function validate() {
    let isValid = true;

    if (!name.trim()) {
      setNameError('名前を入力してください');
      isValid = false;
    } else {
      setNameError('');
    }

    if (!email.trim()) {
      setEmailError('メールアドレスを入力してください');
      isValid = false;
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setEmailError('有効なメールアドレスを入力してください');
      isValid = false;
    } else {
      setEmailError('');
    }

    if (!password) {
      setPasswordError('パスワードを入力してください');
      isValid = false;
    } else if (password.length < 8) {
      setPasswordError('パスワードは8文字以上にしてください');
      isValid = false;
    } else {
      setPasswordError('');
    }

    if (!confirmPassword) {
      setConfirmPasswordError('パスワード（確認）を入力してください');
      isValid = false;
    } else if (password !== confirmPassword) {
      setConfirmPasswordError('パスワードが一致しません');
      isValid = false;
    } else {
      setConfirmPasswordError('');
    }

    return isValid;
  }

  // =====================
  // 送信ハンドラー
  // =====================
  function handleSubmit(e) {
    e.preventDefault();
    const isValid = validate();
    if (isValid) {
      console.log('送信データ:', { name, email, password });
      setIsSubmitted(true);
    }
  }

  // 送信成功時のメッセージ
  if (isSubmitted) {
    return <p>登録が完了しました！ようこそ、{name}さん！</p>;
  }

  // =====================
  // JSX
  // =====================
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>名前</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {nameError && <p style={{ color: 'red' }}>{nameError}</p>}
      </div>

      <div>
        <label>メールアドレス</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {emailError && <p style={{ color: 'red' }}>{emailError}</p>}
      </div>

      <div>
        <label>パスワード</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        {passwordError && <p style={{ color: 'red' }}>{passwordError}</p>}
      </div>

      <div>
        <label>パスワード（確認）</label>
        <input
          type="password"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
        />
        {confirmPasswordError && (
          <p style={{ color: 'red' }}>{confirmPasswordError}</p>
        )}
      </div>

      <button type="submit">登録する</button>
    </form>
  );
}

export default RegistrationForm;

localhost:5173

localhost:5173

完成！でも…振り返ってみよう

動くものが作れました。おめでとうございます。でも正直なところを言えば、このコードには問題がたくさんあります。一緒に振り返りましょう。

問題1: useState が多すぎる

4フィールドのフォームで 9つ の useState を書きました：

• 入力値 × 4
• エラーメッセージ × 4
• 送信フラグ × 1

フィールドが10個になったら、useState は20個近くになります。コンポーネントの先頭だけでスクロールが必要になる日も近い。

問題2: onChange ハンドラーが毎回同じパターン

onChange={(e) => setName(e.target.value)}
onChange={(e) => setEmail(e.target.value)}
onChange={(e) => setPassword(e.target.value)}
onChange={(e) => setConfirmPassword(e.target.value)}

これは コピー&ペーストの繰り返し です。フィールドが増えるたびに同じパターンを書き続けることになります。

問題3: バリデーションロジックが長い

4フィールドのバリデーション関数が40行以上になりました。エラーのセットとクリアを両方書かないといけないし、「このフィールドにはどんなルールがあったっけ」をコードから読み解くのも一苦労です。

問題4: 型チェックがない

password.length < 8 のような条件を自分で書いているということは、バリデーションルールの定義とロジックが一体化しています。「8文字以上」というルールを変えたい場合は、バリデーション関数を探してコードを書き換える必要があります。

フィールドが10個になったら？

想像してみてください。住所入力フォームを作るとします：

• 名前
• ふりがな
• 電話番号
• 郵便番号
• 都道府県
• 市区町村
• 番地
• 建物名
• メールアドレス
• 確認メール

10フィールドです。useState は最低20個。バリデーション関数は100行超え。onChange は10個のコピー&ペーストライン。

…正直、作りたくないですよね。

この痛みをしっかり覚えておいてください。 次のチャプターで、この問題をエレガントに解決します。

まとめ

このチャプターでは、Reactのプリミティブな機能だけで登録フォームを作りました。

学んだこと：

• 制御コンポーネント: value + onChange でReactがフォームを支配する
• 複数のState管理: フィールドとエラーそれぞれに useState が必要
• 手動バリデーション: 条件分岐でエラーをセット/クリアするロジック
• e.preventDefault(): HTMLのデフォルト送信動作をキャンセルする

そして感じたこと：

• useState の爆発的な増加
• コピー&ペーストしたくなる onChange ハンドラー
• 長くなるバリデーション関数
• メンテナンスのしにくさ

この経験があってこそ、次のチャプターの価値がわかります。React のフォームライブラリは、まさにこの苦労を解消するために生まれました。準備はいいですか？