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を使ったフォームバリデーションの実装方法を紹介しました。カスタムフ