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 (