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

Reactでフォームバリデーションを実装する場合、通常はライブラリを使用するか、手動で実装するかのどちらかになりますが、React Hooksを使用することで、比較的簡単にカスタムフォームバリデーションを実装することができます。

1. useStateとuseEffect

まず、useStateとuseEffectを使って、フォームの入力値とエラーメッセージを管理します。useStateで値を管理し、useEffectでバリデーションを実行してエラーメッセージを更新します。

import React, { useState, useEffect } from 'react';

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [errors, setErrors] = useState({});

  useEffect(() => {
    const validateForm = () => {
      const newErrors = {};

      if (!name) {
        newErrors.name = '名前を入力してください';
      }

      if (!email) {
        newErrors.email = 'メールアドレスを入力してください';
      } else if (!/\S+@\S+\.\S+/.test(email)) {
        newErrors.email = '正しいメールアドレスを入力してください';
      }

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

      if (password !== confirmPassword) {
        newErrors.confirmPassword = 'パスワードが一致しません';
      }

      setErrors(newErrors);
    };

    validateForm();
  }, [name, email, password, confirmPassword]);

  const handleSubmit = (e) => {
    e.preventDefault();

    // フォームの送信処理
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <label>
        メールアドレス:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <label>
        パスワード:
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
        {errors.password && <span>{errors.password}</span>}
      </label>
      <label>
        パスワード（確認）:
        <input type="password"
value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
        {errors.confirmPassword && <span>{errors.confirmPassword}</span>}
      </label>
      <button type="submit">送信</button>
    </form>
  );
};

export default Form;

2. カスタムフックの作成

上記のコードでは、バリデーションのためにuseEffectを使用していますが、このようにロジックが複雑になるとコードの可読性が下がってしまいます。そこで、カスタムフックを作成することで、ロジックを分離し、コードをよりシンプルにすることができます。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const newErrors = validate(values);
    setErrors(newErrors);
  }, [values, validate]);

  return errors;
};

export default useValidation;

このカスタムフックを使うと、フォームのコンポーネントが次のように書き換えられます。

“`jsx
import React from ‘react’;
import useValidation from ‘./useValidation’;

const Form = () => {
const [name, setName] = useState(”);
const [email, setEmail] = useState(”);
const [password, setPassword] = useState(”);
const [confirmPassword, setConfirmPassword] = useState(”);

const validate = (values) => {
const errors = {};

if (!values.name) {
  errors.name = '名前を入力してください';
}

if (!values.email) {
  errors.email = 'メールアドレスを入力してください';
} else if (!/\S+@\S+\.\S+/.test(values.email)) {
  errors.email = '正しいメールアドレスを入力してください';
}

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

if (values.password !== values.confirmPassword) {
  errors.confirmPassword = 'パスワードが一致しません';
}

return errors;

};

const errors = useValidation({ name, email, password, confirmPassword }, validate);

const handleSubmit = (e) => {
e.preventDefault();

// フォームの送信処理

};

return (