MENU
  1. ホーム
  2. React
  3. Reactでフォームの入力バリデーションとエラーメッセージのテストを徹底解説

Reactでフォームの入力バリデーションとエラーメッセージのテストを徹底解説

React

Reactを使ったフォーム開発では、ユーザーが入力する値の正確性や妥当性を検証する「バリデーション」が欠かせません。適切にバリデーションを行うことで、ユーザー体験を向上させるだけでなく、システムのセキュリティやデータの一貫性も確保できます。本記事では、Reactでのフォームバリデーションを効果的に実装するための基本的な手法から、外部ライブラリやカスタムバリデーションの導入、そしてエラーメッセージの表示とテストの方法まで、包括的に解説します。特に、React Testing Libraryを使用したテストの実践例を含め、開発者が直面する課題とその解決策を具体的に紹介します。この記事を通じて、Reactでのフォームバリデーションに自信を持って取り組めるようになるでしょう。

目次

Reactフォームバリデーションの基本概念


Reactでフォームを開発する際、入力値のバリデーションは欠かせない要素です。バリデーションには、入力値が必要条件を満たしているかどうかを確認する役割があります。たとえば、メールアドレスの形式確認や必須入力フィールドの検証などが一般的です。

バリデーションの種類


バリデーションは、以下のように大きく分類されます：

クライアントサイドバリデーション


入力内容をブラウザ側でリアルタイムに検証します。ユーザー体験を向上させるために重要で、Reactではリアルタイム更新を伴うフォームと相性が良いです。

サーバーサイドバリデーション


フォーム送信後にサーバーで入力内容を検証します。信頼性を確保するために不可欠で、クライアントサイドバリデーションの補助として使用されます。

Reactでのバリデーション実装の特徴


Reactでは、状態管理（state）やエフェクト（effect）を活用して、バリデーションを動的に実装できます。Reactのコンポーネント構造により、以下のような利点があります：

  • リアルタイムなフィードバック：入力内容が変更されるたびに即時フィードバックを表示可能。
  • 再利用性の高いコンポーネント：複数のフォームで同じバリデーションロジックを活用できます。
  • UIとロジックの分離：バリデーションロジックを別ファイルに切り出し、テスト可能なコードを実現できます。

これらの特徴を活用し、Reactを使ったフォーム開発では、バリデーションをより効率的かつ柔軟に実装できます。本記事では、この基本概念を基に、次の章で具体的な実装方法を紹介していきます。

内部状態管理を使った基本的なバリデーション例

Reactの基本的なバリデーションでは、useStateフックを利用してフォームの入力値とエラーメッセージを管理します。この方法は、小規模なフォームやカスタマイズ性を重視する場合に有効です。

基本的なフォームの構成


以下は、名前入力フィールドに対するバリデーションの例です。条件として、名前の入力が必須であり、最小文字数を3文字に制限しています。

import React, { useState } from 'react';

function BasicValidationForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  const validateName = (value) => {
    if (!value) {
      return '名前は必須項目です。';
    }
    if (value.length < 3) {
      return '名前は3文字以上入力してください。';
    }
    return '';
  };

  const handleChange = (e) => {
    const value = e.target.value;
    setName(value);
    const validationError = validateName(value);
    setError(validationError);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!error) {
      alert(`送信成功: ${name}`);
    } else {
      alert('フォームにエラーがあります。');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">名前:</label>
        <input
          id="name"
          type="text"
          value={name}
          onChange={handleChange}
        />
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
      <button type="submit" disabled={!!error}>
        送信
      </button>
    </form>
  );
}

export default BasicValidationForm;

コードのポイント

入力値のリアルタイム更新


onChangeイベントハンドラーで、入力値をuseStateで管理しています。変更があるたびにvalidateName関数を呼び出し、エラーをチェックしています。

エラー表示の条件付きレンダリング


エラーがある場合は、<p>タグを使用してエラーメッセージを赤色で表示します。条件付きレンダリングでエラーの有無を動的に切り替えています。

ボタンの無効化


エラーが存在する場合、送信ボタンを無効化することで、誤送信を防止しています。

適用場面


このアプローチは、シンプルなフォームで有効ですが、大規模なプロジェクトや複雑なバリデーションが必要な場合は、次章で紹介する外部ライブラリの使用を検討してください。

外部ライブラリを活用したバリデーション

Reactでは、フォームのバリデーションを効率化するために、外部ライブラリを活用するのが一般的です。代表的なライブラリには React Hook Form と Formik があり、それぞれフォーム管理やバリデーション機能を提供します。

React Hook Formを使ったバリデーション

React Hook Formは、軽量かつ高速なフォームライブラリで、フォームデータを効率的に管理できます。以下は、react-hook-formと組み合わせた簡単なバリデーションの例です。

import React from 'react';
import { useForm } from 'react-hook-form';

function HookFormValidation() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    alert(`送信成功: ${JSON.stringify(data)}`);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">名前:</label>
        <input
          id="name"
          {...register('name', {
            required: '名前は必須項目です。',
            minLength: {
              value: 3,
              message: '名前は3文字以上入力してください。',
            },
          })}
        />
        {errors.name && <p style={{ color: 'red' }}>{errors.name.message}</p>}
      </div>
      <button type="submit">送信</button>
    </form>
  );
}

export default HookFormValidation;

コードのポイント

  • register関数: 入力フィールドを登録し、バリデーションルールを簡単に設定できます。
  • エラーメッセージの表示: formState.errorsからエラーメッセージを取得し、条件付きで表示します。
  • handleSubmit関数: バリデーションを通過した場合に送信処理を行います。

Formikを使ったバリデーション

Formikは、フォームの状態管理とバリデーションを統合したライブラリです。以下に、基本的なバリデーションの例を示します。

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

function FormikValidation() {
  const formik = useFormik({
    initialValues: { name: '' },
    validationSchema: Yup.object({
      name: Yup.string()
        .required('名前は必須項目です。')
        .min(3, '名前は3文字以上入力してください。'),
    }),
    onSubmit: (values) => {
      alert(`送信成功: ${JSON.stringify(values)}`);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="name">名前:</label>
        <input
          id="name"
          name="name"
          value={formik.values.name}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
        {formik.touched.name && formik.errors.name && (
          <p style={{ color: 'red' }}>{formik.errors.name}</p>
        )}
      </div>
      <button type="submit">送信</button>
    </form>
  );
}

export default FormikValidation;

コードのポイント

  • useFormikフック: フォームの状態とバリデーションロジックを簡単に設定できます。
  • Yupライブラリとの連携: Yupを使用することで、宣言的なバリデーションスキーマを定義できます。
  • タッチイベントの追跡: formik.touchedでフィールドが触れられたかどうかを確認し、条件付きでエラーメッセージを表示します。

React Hook FormとFormikの比較

項目React Hook FormFormik
軽量さ非常に軽量で高速比較的重い
使いやすさ簡潔なAPIで初心者向け柔軟性が高いが学習コスト
バリデーションカスタム、外部ライブラリ対応Yupなどのスキーマ対応

適用場面

  • React Hook Form: 軽量さを求める場合や小規模なプロジェクトに適しています。
  • Formik: 複雑なフォームや高度なカスタマイズが必要な場合に適しています。

これらのライブラリを活用することで、Reactでのバリデーションを効率化し、保守性の高いコードを実現できます。

カスタムバリデーションの実装方法

フォームのバリデーションにおいて、独自のルールや要件を適用したい場合、カスタムバリデーションを作成する必要があります。ここでは、Reactを用いてカスタムバリデーションを実装する方法を解説します。

カスタムバリデーションの基本


カスタムバリデーションでは、独自のロジックを含む関数を作成し、フォームの入力値を動的に検証します。以下は、特殊文字を含む入力を無効とするバリデーションの例です。

実装例：特殊文字の検出

import React, { useState } from 'react';

function CustomValidationForm() {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const validateInput = (value) => {
    const specialCharRegex = /[!@#$%^&*(),.?":{}|<>]/;
    if (specialCharRegex.test(value)) {
      return '特殊文字は入力できません。';
    }
    if (value.length < 5) {
      return '5文字以上入力してください。';
    }
    return '';
  };

  const handleChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    const validationError = validateInput(value);
    setError(validationError);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!error) {
      alert(`送信成功: ${inputValue}`);
    } else {
      alert('エラーがあります。');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="input">入力:</label>
        <input
          id="input"
          type="text"
          value={inputValue}
          onChange={handleChange}
        />
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
      <button type="submit" disabled={!!error}>
        送信
      </button>
    </form>
  );
}

export default CustomValidationForm;

コードのポイント

  • 正規表現を使用した検証: 特殊文字の検出に正規表現を使用し、簡潔なロジックを実現しています。
  • 動的エラーメッセージ: 入力内容に応じてエラーをリアルタイムで表示します。
  • 複数条件のチェック: 特殊文字の検出と最小文字数チェックを組み合わせ、柔軟なバリデーションを構築しています。

Formikを使用したカスタムバリデーション

Formikを使用する場合、Yupスキーマにカスタムルールを追加して、独自のバリデーションを行えます。

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const customValidationSchema = Yup.object().shape({
  customInput: Yup.string()
    .test(
      'no-special-characters',
      '特殊文字は入力できません。',
      (value) => !/[!@#$%^&*(),.?":{}|<>]/.test(value)
    )
    .min(5, '5文字以上入力してください。')
    .required('このフィールドは必須です。'),
});

function FormikCustomValidation() {
  const formik = useFormik({
    initialValues: { customInput: '' },
    validationSchema: customValidationSchema,
    onSubmit: (values) => {
      alert(`送信成功: ${values.customInput}`);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="customInput">入力:</label>
        <input
          id="customInput"
          name="customInput"
          value={formik.values.customInput}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
        {formik.touched.customInput && formik.errors.customInput && (
          <p style={{ color: 'red' }}>{formik.errors.customInput}</p>
        )}
      </div>
      <button type="submit">送信</button>
    </form>
  );
}

export default FormikCustomValidation;

特徴

  • Yupのtestメソッド: 独自のルールを柔軟に追加できます。
  • 統一されたバリデーション管理: FormikとYupを組み合わせることで、コードの見通しが良くなります。

適用場面


カスタムバリデーションは、標準的なバリデーションルールでは対応できない特殊な要件がある場合に役立ちます。上述の例を参考に、自分のプロジェクトの要件に応じた独自ルールを実装してみましょう。

エラーメッセージのデザインとユーザー体験向上の工夫

エラーメッセージは、ユーザーがフォーム入力の問題点をすぐに理解し、修正できるようにする重要な要素です。ただし、不適切なデザインや不明確な内容のエラーメッセージは、ユーザーの混乱や離脱を招く可能性があります。ここでは、エラーメッセージのデザインと表示に関するベストプラクティスを解説します。

効果的なエラーメッセージの特徴

1. 明確で簡潔な内容


エラーメッセージは、問題を具体的に示す必要があります。「無効な入力です」といった抽象的なメッセージではなく、「名前は3文字以上入力してください」のように具体的な指示を示しましょう。

2. 問題箇所の明示


エラーメッセージは、該当する入力フィールドの近くに表示し、ユーザーが問題箇所を容易に認識できるようにします。

3. 視覚的な強調


エラーメッセージやエラーのあるフィールドを視覚的に区別することで、ユーザーの注意を引きます。たとえば、赤い文字やボーダーを使用すると効果的です。

4. リアルタイムのフィードバック


入力内容に問題がある場合、ユーザーが次のステップに進む前にエラーを知らせます。これにより、誤送信を防ぎます。

実装例：効果的なエラーメッセージ

以下は、リアルタイムのエラーメッセージを実装したフォームの例です。

import React, { useState } from 'react';

function ErrorMessageForm() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  const validateName = (value) => {
    if (!value) {
      return '名前は必須項目です。';
    }
    if (value.length < 3) {
      return '名前は3文字以上入力してください。';
    }
    return '';
  };

  const handleChange = (e) => {
    const value = e.target.value;
    setName(value);
    const validationError = validateName(value);
    setError(validationError);
  };

  return (
    <form>
      <div style={{ marginBottom: '10px' }}>
        <label htmlFor="name">名前:</label>
        <input
          id="name"
          type="text"
          value={name}
          onChange={handleChange}
          style={{
            borderColor: error ? 'red' : '#ccc',
            borderWidth: '2px',
          }}
        />
        {error && <p style={{ color: 'red', margin: '5px 0' }}>{error}</p>}
      </div>
      <button type="submit" disabled={!!error}>
        送信
      </button>
    </form>
  );
}

export default ErrorMessageForm;

コードのポイント

  • フィールドの強調: エラーが発生した際、該当フィールドのボーダーカラーを赤く変更。
  • エラーメッセージの近接配置: エラー内容を入力フィールド直下に表示し、問題箇所を明確化。
  • リアルタイム検証: 入力内容が変わるたびにエラーメッセージを更新。

デザインの工夫例

エラーメッセージをデザインする際、以下のような工夫を取り入れるとさらに効果的です。

1. アイコンの利用


エラー箇所に赤い警告アイコン（例: ⚠️）を追加すると、視覚的に認識しやすくなります。

2. ユーザーに優しい文言


「この項目は間違っています」よりも、「名前を3文字以上入力してください」といった親切な文言が好まれます。

3. 一貫性のあるスタイル


エラーメッセージのフォント、色、配置を統一することで、全体のデザインがまとまります。

適用場面

  • ユーザー体験を重視するプロジェクト。
  • 入力エラーがユーザーに与える影響が大きい場合（例: アカウント登録、決済フォーム）。

適切なエラーメッセージのデザインと実装により、ユーザー体験を大幅に向上させることが可能です。

バリデーションとエラーメッセージのテスト手法

Reactアプリケーションでは、バリデーションとエラーメッセージのテストを行うことで、フォームの品質と信頼性を向上させることができます。テストには、Jest や React Testing Library を使用するのが一般的です。本章では、テストの重要性と実際のテスト手法について解説します。

バリデーションテストの重要性

バリデーションのテストは以下の理由で重要です：

  1. 信頼性の確保: バリデーションが正しく動作するか確認し、予期しないエラーを防ぎます。
  2. 変更時の安定性: 将来的なコード変更が既存のバリデーションロジックを壊さないことを保証します。
  3. ユーザー体験の維持: エラーメッセージが適切に表示されるかを確認し、ユーザーの混乱を防ぎます。

テスト環境のセットアップ

React Testing Libraryを使う場合、以下の依存関係をインストールします。

npm install --save-dev @testing-library/react @testing-library/jest-dom

バリデーションロジックのテスト

以下は、単純な名前入力フォームのバリデーションロジックをテストする例です。

import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import BasicValidationForm from './BasicValidationForm';

test('名前が必須であることを検証する', () => {
  render(<BasicValidationForm />);

  const input = screen.getByLabelText(/名前/i);
  const submitButton = screen.getByRole('button', { name: /送信/i });

  // 空のフォームを送信し、エラーメッセージを確認
  fireEvent.change(input, { target: { value: '' } });
  fireEvent.click(submitButton);

  expect(screen.getByText('名前は必須項目です。')).toBeInTheDocument();
});

test('名前が3文字以上でない場合のエラーを検証する', () => {
  render(<BasicValidationForm />);

  const input = screen.getByLabelText(/名前/i);
  const submitButton = screen.getByRole('button', { name: /送信/i });

  // 2文字の名前を入力し、エラーメッセージを確認
  fireEvent.change(input, { target: { value: 'AB' } });
  fireEvent.click(submitButton);

  expect(screen.getByText('名前は3文字以上入力してください。')).toBeInTheDocument();
});

コードのポイント

  • fireEvent: ユーザー入力やボタンクリックをシミュレートします。
  • getByText: エラーメッセージがDOMに正しく表示されていることを確認します。
  • toBeInTheDocument: メッセージがDOMに存在することをアサートします。

エラーメッセージの表示テスト

エラーメッセージが適切に表示されるかをテストします。

test('エラーメッセージがリアルタイムで表示されることを確認する', () => {
  render(<BasicValidationForm />);

  const input = screen.getByLabelText(/名前/i);

  // 無効な名前を入力
  fireEvent.change(input, { target: { value: '' } });
  expect(screen.getByText('名前は必須項目です。')).toBeInTheDocument();

  // 有効な名前を入力してエラーが消えることを確認
  fireEvent.change(input, { target: { value: 'John' } });
  expect(screen.queryByText('名前は必須項目です。')).not.toBeInTheDocument();
});

コードのポイント

  • queryByText: 指定した要素がDOMから消えていることを確認します。

Snapshot TestingによるUIの確認

フォームの状態が変更されるたびにUIが正しく表示されることを確認するには、Snapshot Testingを使用します。

import { render } from '@testing-library/react';
import BasicValidationForm from './BasicValidationForm';

test('フォームの初期状態が正しいことを確認する', () => {
  const { asFragment } = render(<BasicValidationForm />);
  expect(asFragment()).toMatchSnapshot();
});

ベストプラクティス

  1. ユニットテストと統合テストの併用: バリデーションロジックとエラーメッセージ表示を個別にテストした後、全体の動作を確認します。
  2. リアルユーザーシナリオの再現: ユーザーが実際に行う操作をシミュレートしてテストします。
  3. エッジケースの考慮: 空文字列や特殊文字、大量の入力など、可能なすべてのケースをカバーします。

適用場面

  • フォーム入力エラーがビジネスロジックに大きく影響を与える場合。
  • ユーザーインターフェースの信頼性を向上させたい場合。

これらのテスト手法を活用することで、Reactフォームの信頼性とユーザー体験を向上させることができます。

よくあるバリデーションの課題とその解決方法

Reactフォームのバリデーションでは、多くの開発者が似たような課題に直面します。本章では、よくあるバリデーションの課題を取り上げ、それぞれに対する解決策を具体的に解説します。

課題1: バリデーションロジックの重複

問題点


フォームが増えると、同じバリデーションロジックを複数箇所に実装してしまうことがあります。この結果、コードが冗長になり、メンテナンスが困難になります。

解決策


バリデーションロジックを関数として分離し、再利用可能なモジュールを作成します。

// validation.js
export const validateName = (value) => {
  if (!value) {
    return '名前は必須項目です。';
  }
  if (value.length < 3) {
    return '名前は3文字以上入力してください。';
  }
  return '';
};

// フォームコンポーネント
import { validateName } from './validation';

function FormComponent() {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    setName(value);
    setError(validateName(value));
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      {error && <p>{error}</p>}
    </div>
  );
}

課題2: 複数フィールド間の依存関係

問題点


2つ以上のフィールドが相互に依存している場合、例えば「パスワード」と「パスワード確認」フィールドの一致を確認するバリデーションが難しくなることがあります。

解決策


FormikやReact Hook Formを使用し、watchやスキーマバリデーションを活用して依存関係を管理します。

import React from 'react';
import { useForm } from 'react-hook-form';

function PasswordForm() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const password = watch('password');

  const onSubmit = (data) => {
    alert('成功しました!');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>パスワード:</label>
        <input
          type="password"
          {...register('password', { required: 'パスワードは必須項目です。' })}
        />
        {errors.password && <p>{errors.password.message}</p>}
      </div>
      <div>
        <label>パスワード確認:</label>
        <input
          type="password"
          {...register('confirmPassword', {
            validate: (value) => value === password || 'パスワードが一致しません。',
          })}
        />
        {errors.confirmPassword && <p>{errors.confirmPassword.message}</p>}
      </div>
      <button type="submit">送信</button>
    </form>
  );
}

export default PasswordForm;

課題3: フォーム全体のエラーハンドリング

問題点


フォームが複雑になると、全フィールドのエラーを一括で管理するのが難しくなります。

解決策


React Hook Formを使用してフォーム全体のエラー状態を管理し、送信前にすべてのエラーを確認します。

const onSubmit = (data) => {
  if (Object.keys(errors).length > 0) {
    alert('エラーがあります。');
    return;
  }
  alert('送信成功!');
};

課題4: パフォーマンスの低下

問題点


リアルタイムバリデーションを頻繁に行うと、特に大規模フォームでパフォーマンスの低下が発生することがあります。

解決策


デバウンス（入力後一定時間が経過したらバリデーションを実行する仕組み）を導入します。

import { useState, useEffect } from 'react';

function useDebouncedValue(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

まとめ

これらの課題を適切に対処することで、Reactフォームのバリデーションを効率化し、保守性とパフォーマンスを向上させることができます。各課題に対応するソリューションを適用し、より良いユーザー体験を提供しましょう。

応用：多段階フォームにおけるバリデーション

多段階フォームは、1つのフォームを複数のステップに分けることで、ユーザーにとっての負担を軽減し、使いやすさを向上させる設計です。ただし、ステップごとに異なるバリデーションを適用する必要があるため、実装が複雑になることがあります。この章では、多段階フォームでのバリデーションの実装方法を解説します。

多段階フォームの構造

多段階フォームでは、以下のような構造を取ります：

  1. ステップごとの入力項目: 各ステップに特化したフォームフィールドを表示する。
  2. ステップごとのバリデーション: 各ステップを完了する前にそのバリデーションを適用する。
  3. 進行状況の管理: 現在のステップを状態として管理し、ユーザーが前後のステップに移動できるようにする。

実装例：React Hook Formを使用した多段階フォーム

以下は、React Hook Formを使用して多段階フォームを実装する例です。

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const { control, handleSubmit, watch, formState: { errors } } = useForm({
    defaultValues: {
      name: '',
      email: '',
      password: '',
    },
  });

  const onSubmit = (data) => {
    if (step === 3) {
      alert('送信成功: ' + JSON.stringify(data));
    } else {
      setStep(step + 1);
    }
  };

  const handleBack = () => {
    if (step > 1) {
      setStep(step - 1);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {step === 1 && (
        <div>
          <h3>ステップ 1: 名前入力</h3>
          <Controller
            name="name"
            control={control}
            rules={{ required: '名前は必須項目です。' }}
            render={({ field }) => (
              <input {...field} placeholder="名前を入力" />
            )}
          />
          {errors.name && <p style={{ color: 'red' }}>{errors.name.message}</p>}
        </div>
      )}

      {step === 2 && (
        <div>
          <h3>ステップ 2: メール入力</h3>
          <Controller
            name="email"
            control={control}
            rules={{
              required: 'メールアドレスは必須項目です。',
              pattern: {
                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                message: '正しいメールアドレスを入力してください。',
              },
            }}
            render={({ field }) => (
              <input {...field} placeholder="メールアドレスを入力" />
            )}
          />
          {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
        </div>
      )}

      {step === 3 && (
        <div>
          <h3>ステップ 3: パスワード設定</h3>
          <Controller
            name="password"
            control={control}
            rules={{
              required: 'パスワードは必須項目です。',
              minLength: {
                value: 6,
                message: 'パスワードは6文字以上で入力してください。',
              },
            }}
            render={({ field }) => (
              <input {...field} type="password" placeholder="パスワードを設定" />
            )}
          />
          {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}
        </div>
      )}

      <div>
        {step > 1 && <button type="button" onClick={handleBack}>戻る</button>}
        <button type="submit">{step === 3 ? '送信' : '次へ'}</button>
      </div>
    </form>
  );
}

export default MultiStepForm;

コードのポイント

  • Controller の使用: React Hook FormのControllerコンポーネントを使用してフォームフィールドを管理します。
  • ステップ状態の管理: stepステートで現在のステップを管理し、条件に応じてフォームを切り替えます。
  • ステップごとのバリデーション: 各ステップで異なるルールを適用しています。

進行状況の表示

進行状況を視覚的に表示することで、ユーザーにフォームの全体像を把握させます。

<div style={{ marginBottom: '20px' }}>
  <p>ステップ {step} / 3</p>
  <progress value={step} max="3" />
</div>

適用場面

多段階フォームは以下のような場面で有効です：

  • 長いフォームをステップごとに分割し、ユーザーの負担を軽減したい場合。
  • 購入プロセスやユーザー登録など、複数の入力情報が必要なケース。

多段階フォームでのバリデーションは複雑ですが、適切な設計を行うことで、ユーザーにとって使いやすいフォームを提供できます。

まとめ

本記事では、Reactを用いたフォームバリデーションの基本から、カスタムバリデーション、外部ライブラリの活用、多段階フォームの応用例まで幅広く解説しました。特に、バリデーションロジックの再利用や複数フィールド間の依存関係、パフォーマンスの最適化といった課題に対する具体的な解決方法を紹介しました。

Reactでのバリデーションは、ユーザー体験を向上させるだけでなく、入力データの品質と信頼性を保証する上でも重要です。この記事を参考に、柔軟で効率的なフォームバリデーションを実現し、ユーザーにとって使いやすいインターフェースを構築してください。

React
エラーメッセージ フォーム バリデーション React

コメント

コメントする

目次