Reactでフォームのバリデーションを実装する方法

Reactを使用すると、フォームのバリデーションを簡単に実装できます。この記事では、Reactを使用してフォームのバリデーションを実装する方法について説明します。

バリデーションライブラリの使用

Reactでフォームのバリデーションを実装する場合、バリデーションライブラリを使用するのが一般的です。多くのバリデーションライブラリがありますが、この記事では、Yupを使用します。

Yupは、スキーマベースのバリデーションライブラリで、簡単にバリデーションスキーマを定義できます。Yupを使用するには、まずYupをインストールします。

npm install yup

次に、Yupを使用してバリデーションスキーマを定義します。例えば、以下のように名前とメールアドレスが必須であるフォームのバリデーションスキーマを定義できます。

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string().required('名前を入力してください'),
  email: Yup.string()
    .email('正しい形式でメールアドレスを入力してください')
    .required('メールアドレスを入力してください'),
});

これで、名前とメールアドレスが必須であるフォームのバリデーションスキーマが定義されました。次に、Reactのフォームコンポーネントでこのバリデーションスキーマを使用してバリデーションを実行します。

バリデーションの実装

Reactのフォームコンポーネントでバリデーションを実装する場合、以下の手順に従います。

1. Yupのバリデーションスキーマを定義します。
2. フォームの各フィールドに対して、valueとonChangeプロパティを設定します。valueには、フォームの入力値を、onChangeには、フォームの入力値が変更されたときに呼び出されるコールバック関数を設定します。
3. フォームのonSubmitプロパティに、フォームが送信されたときに呼び出されるコ
   ールバック関数を設定します。この関数内で、Yupのvalidateメソッドを使用してバリデーションを実行し、エラーがある場合はエラーメッセージを表示します。

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

const validationSchema = Yup.object().shape({
  name: Yup.string().required('名前を入力してください'),
  email: Yup.string()
    .email('正しい形式でメールアドレスを入力してください')
    .required('メールアドレスを入力してください'),
});

const Form = () => {
  const [submitting, setSubmitting] = useState(false);
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      setSubmitting(true);
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 1000);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="name">名前</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formik.values.name}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
        {formik.touched.name && formik.errors.name ? (
          <div>{formik.errors.name}</div>
        ) : null}
      </div>
      <div>
        <label htmlFor="email">メールアドレス</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formik.values.email}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
        {formik.touched.email && formik.errors.email ? (
          <div>{formik.errors.email}</div>
        ) : null}
      </div>
      <button type="submit" disabled={submitting}>
        送信
      </button>
    </form>
  );
};

export default Form;

この例では、useFormikフックを使用してフォームを管理しています。initialValuesプロパティには、フォームの初期値を設定します。validationSchemaプロパティには、Yupのバリデーションスキーマを設定します。onSubmitプロパティには、フォームが送信されたときに呼び出されるコールバック関数を設定します。この関数内では、フォームの値をJSON形式でアラートに表示しています。

フォームの各フィールドには、valueとonChangeプロパティを設定しています。また、onBlurプロパティを設定して、フィールドがフォーカスを失ったときにバリデーションを実行します。formik.touchedオブジェクトを使用して、フィールドがタッチされたかどうかを確認し、エラーメッセージを表示します。