React Hooksを使ったフォームバリデーションの実装方法

ReactはUIを構築するための強力なツールですが、フォームのバリデーションには少し手間がかかります。React Hooksを使えば、簡単にフォームバリデーションを実装できます。本記事では、React Hooksを使ったフォームバリデーションの実装方法を紹介します。

バリデーションのためのカスタムフックを作成する

まず、バリデーションのためのカスタムフックを作成します。このフックは、フォームの値を管理し、エラーがある場合はエラーを返します。

import { useState } from 'react';

const useFormValidation = (initialState, validate) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    setValues({
      ...values,
      [event.target.name]: event.target.value
    });
  };

  const handleBlur = () => {
    const validationErrors = validate(values);
    setErrors(validationErrors);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const validationErrors = validate(values);
    setErrors(validationErrors);
    if (Object.keys(validationErrors).length === 0) {
      // submit the form
    }
  };

  return {
    values,
    errors,
    handleChange,
    handleBlur,
    handleSubmit,
  };
};

export default useFormValidation;

このカスタムフックは、フォームの値を管理するためにuseStateフックを使用しています。handleChange関数は、フォームの値を更新します。handleBlur関数は、フォームの入力欄からフォーカスが外れたときにバリデーションエラーをチェックします。handleSubmit関数は、フォームが送信されたときにバリデーションエラーをチェックし、エラーがなければフォームを送信します。

バリデーションのルールを定義する

次に、バリデーションのルールを定義します。この例では、名前、メールアドレス、パスワードのフィールドを持つフォームを想定しています。それぞれのフィールドに対して、必須項目であること、メールアドレスの形式であること、パスワードが6文字以上であることをチェックします。

const validate = (values) => {
  let errors = {};
  // name
  if (!values.name) {
    errors.name = '名前を入力してください';
  }
  // email
  if (!values.email) {
    errors.email = 'メールアドレスを入力してください';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'メールアドレスの形式が正しくありません';
  }
  // password
  if (!values.password) {
    errors.password = 'パスワードを入力してください';
  } else if (values.password.length < 6) {
    errors.password = 'パスワードは6文字以上で入力してください';
  }
  return errors;
};

このvalidate関数は、引数で渡されたフォームの値に対して、バリデーションエラーをチェックします。エラーがある場合は、エラーメッセージを含むオブジェクトを返します。

フォームコンポーネントでカスタムフックを使用する

最後に、フォームコンポーネントでカスタムフックを使用します。以下の例では、先ほど作成したuseFormValidationカスタムフックを使用して、フォームの値とエラーを管理します。

import useFormValidation from './useFormValidation';

const INITIAL_STATE = {
  name: '',
  email: '',
  password: '',
};

const SignUpForm = () => {
  const { values, errors, handleChange, handleBlur, handleSubmit } = useFormValidation(INITIAL_STATE, validate);

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">名前</label>
        <input type="text" id="name" name="name" value={values.name} onChange={handleChange} onBlur={handleBlur} />
        {errors.name && <span>{errors.name}</span>}
      </div>
      <div>
        <label htmlFor="email">メールアドレス</label>
        <input type="email" id="email" name="email" value={values.email} onChange={handleChange} onBlur={handleBlur} />
        {errors.email && <span>{errors.email}</span>}
      </div>
      <div>
        <label htmlFor="password">パスワード</label>
        <input type="password" id="password" name="password" value={values.password} onChange={handleChange} onBlur={handleBlur} />
        {errors.password && <span>{errors.password}</span>}
      </div>
      <button type="submit">登録する</button>
    </form>
  );
};

export default SignUpForm;

このフォームコンポーネントでは、先ほど作成したuseFormValidationカスタムフックを使用して、フォームの値とエラーを管理しています。input要素のvalue属性には、valuesオブジェクトから対応するフィールドの値を取得し、handleChangeとhandleBlur関数をイベントハンドラーとして渡します。エラーメッセージは、errorsオブジェクトから取得して表示します。

以上で、React Hooksを使ったフォームバリデーションの実装方法を紹介しました。カスタムフ