React Hook Form ってどんな機能があるの？
今回は、React.js でフォームを扱う際によく使われるライブラリ React Hook Form について、バリデーションライブラリの Zod と合わせて、基本的な考え方から実際の使い方、よくあるユースケースまでをわかりやすく解説します。
React Hook Form とは？
React Hook Form は、React.js で フォーム を扱うための ライブラリ です。
入力値の状態管理を最小限に抑える設計 により、再レンダリングを抑えつつ、少ないコードで高速なフォームを実装できる のが特徴です。
- 再レンダリングが少なく、パフォーマンスが高い
- シンプルなAPIで直感的に使える
- バリデーションが書きやすく、Zod などの外部ライブラリとも簡単に連携できる
- TypeScript との相性が良い
なぜ React Hook Form を使うのか？
useState でフォームを実装した場合の課題
useState を使ってフォームを実装した場合、input の数が増えるにつれて、管理する state も増えるため、再レンダリングが頻繁に発生 してしまいます。
その結果、パフォーマンスが低下 しやすく、バリデーションのロジックも分散しがち のため、コード全体が複雑になり、可読性や保守性も下がってしまいます。
こうした課題を解決してくれるのが React Hook Form です。
コード例
useState でフォームを実装したコード例
- useState で email と password を 初期化 する
- input を state と紐づけ、入力のたびに state を更新 する
- state の更新により 再レンダリングが発生し、入力値が反映 される
- フォーム送信時に handleSubmit が実行され、ページ遷移を防止 する
- email と password を取得 して、ログに表示 する
- 送信後に state をリセット し、入力欄を初期化 する
import { useState } from 'react';
export default function UseStateLoginForm() {
// useState で email と password を 初期化
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
// フォーム送信時に handleSubmit を実行
const handleSubmit = (e) => {
e.preventDefault(); // ページ遷移を防止
console.log({ email, password }); // email と password を取得 して、ログに表示
// 送信後にリセットし、入力欄を初期化
setEmail('');
setPassword('');
};
return (
<>
<h2>UseState LoginForm</h2>
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
/>
<button type="submit">ログイン</button>
</form>
</>
);
}処理フロー
- ログインボタンを押す と何も入力していないため、ログの Email と Password には ‘ ‘(空白) が表示される
- Email と Password にそれぞれ入力し、再度 ログイン ボタンを押すと、ログに入力した Email と Password がそれぞれ表示される
React Hook Form でフォームを実装した場合
React Hook Form を使ってフォームを実装すると、input の状態管理を React.js の state で持たずに済む ため、全体のコード量が減り、再レンダリングも最小限に抑えられます。
バリデーションも簡単に追加 でき、Zod などの 外部ライブラリと組み合わせる ことで、より実務向きのフォームを効率的に作成できます。
フォームの数や入力項目が増えても、簡潔なコードで管理できるのが大きなメリット です。
React Hook Form でフォームを実装したコード例
React Hook Form のインストール
# React Hook Form のインストール
npm install react-hook-formReact Hook Form のコード例
- useForm で フォーム全体の状態 と、入力登録や送信処理に必要な設定を初期化 する
※ useForm - register で input をフォームに登録 し、入力値は React Hook Form が 内部で管理 し、必要なときだけ再レンダリング される ※ register
- フォーム送信時 に handleSubmit が バリデーションを実行 する ※ handleSubmit
- バリデーションエラーは、formState の errors に自動で格納される ※ formState
- エラーなど問題がなければ onSubmit が呼ばれ、入力値をまとめて取得する
import { useForm } from 'react-hook-form';
export default function ReactHookFormLoginForm() {
// useForm でフォーム全体の状態と、入力登録や送信処理に必要な設定を初期化
const {
register,
handleSubmit, // handleSubmit がバリデーションを実行
// formState errors: バリデーションエラー, isSubmitting: 送信中ステータス
formState: { errors, isSubmitting },
} = useForm();
// エラーがない場合、onSubmit が実行
const onSubmit = (data) => {
console.log(data);
};
return (
<>
<h2>ReactHookForm LoginForm</h2>
{/* handleSubmit がバリデーションを実行 */}
<form onSubmit={handleSubmit(onSubmit)}>
<div>
{/* register で input (email) をフォームに登録し、必要なときに再レンダリング */}
<input
{...register('email', { required: 'メールアドレスは必須です' })}
placeholder="Email"
autoComplete="off"
/>
{/* エラーの表示 email */}
{errors.email && (
<p style={{ color: 'red' }}>{errors.email.message}</p>
)}
</div>
<div>
{/* register で input(password)をフォームに登録し、必要なときに再レンダリング */}
<input
type="password"
{...register('password', { required: 'パスワードは必須です' })}
placeholder="Password"
/>
{/* エラーの表示 password */}
{errors.password && (
<p style={{ color: 'red' }}>{errors.password.message}</p>
)}
</div>
{/* isSubmitting: 送信中のステータスの場合 二重送信防止 */}
<button disabled={isSubmitting} type="submit">
ログイン
</button>
</form>
</>
);
}処理フロー
- ログインボタンを押す と何も入力していないため、’メールアドレスは必須です‘ と ‘パスワードは必須です‘ と エラーが表示 される
- Email と Password にそれぞれ入力すると、エラー が消え、表示されなくなる
- 再度 ログイン ボタンを押すと、ログに入力した Email と Password が表示される
React Hook Form + Zod でフォームを実装した場合
React Hook Form + Zod でフォームを実装したコード例
Zod のインストール
# Zod のインストール
npm install zod
# React Hook Form と Zod を連携させる場合
npm install @hookform/resolversReact Hook Form + Zod のコード例
- Zod で フォーム全体のバリデーションルールを定義 する ※ Zod
- useForm に zodResolver を渡し、バリデーション処理を統合する ※ useForm
- register で input をフォームに登録し、入力値は React Hook Form が 内部で管理 し、必要なときだけ再レンダリング される ※ register
- 指定した mode（onSubmit: 送信時 ※デフォルト）に応じてバリデーションが実行 される
- バリデーションエラー は Zod によって検証され、formState の errors に自動で反映される ※ formState
- フォーム送信時に handleSubmit が検証を行い、エラーなど問題なければ onSubmit が呼ばれる ※ handleSubmit
- 検証済みの入力値 を data としてまとめて取得できる
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
// Zodでバリデーションルールを定義
const loginSchema = z.object({
email: z.email('有効なメールアドレスを入力してください'),
password: z.string().min(8, 'パスワードは8文字以上入力してください'),
});
export default function ReactHookFormZodLoginForm() {
// useForm でフォーム全体の状態と、入力登録や送信処理に必要な設定を初期化
const {
register,
handleSubmit, // handleSubmit がバリデーションを実行
// errors: バリデーションエラー, isSubmitting: 送信中ステータス
formState: { errors, isSubmitting },
} = useForm({
resolver: zodResolver(loginSchema), // バリデーション処理の統合
// バリデーションを実行するタイミング
// mode: "onSubmit", // 送信時 ※デフォルト
// mode: 'onBlur', // フォーカスアウト
// mode: 'onChange', // 入力中
});
// エラーなど問題ない場合、onSubmit が実行
const onSubmit = (data) => {
console.log(data);
};
return (
<>
<h2>ReactHookFormZod LoginForm</h2>
{/* handleSubmit がバリデーションを実行 */}
<form onSubmit={handleSubmit(onSubmit)}>
<div>
{/* register で input (email) をフォームに登録し、必要なときに再レンダリング */}
<input {...register('email')} placeholder="Email" />
{/* エラーの表示 email */}
{errors.email && (
<p style={{ color: 'red' }}>{errors.email.message}</p>
)}
</div>
<div>
{/* register で input(password)をフォームに登録し、必要なときに再レンダリング */}
<input
type="password"
{...register('password')}
placeholder="Password"
/>
{/* エラーの表示 password */}
{errors.password && (
<p style={{ color: 'red' }}>{errors.password.message}</p>
)}
</div>
{/* isSubmitting: 送信中のステータスの場合 二重送信防止 */}
<button type="submit" disabled={isSubmitting}>
ログイン
</button>
</form>
</>
);
}処理フロー
- ログインボタンを押す と何も入力していないため、’有効なメールアドレスを入力してください‘ と ‘パスワードは8文字以上入力してください‘ と エラーが表示 される
- Email と Password にそれぞれ入力すると、エラー が消え、表示されなくなる
- 再度 ログイン ボタンを押すと、ログに入力した Email と Password が表示される
まとめ
React.js で フォームを扱う際によく使われるライブラリ React Hook Form について、
バリデーションライブラリ である Zod とあわせて解説しましたが、いかがでしたでしょうか？
React Hook Form は、再レンダリングを抑えつつ、少ないコードで高速なフォームを実装できるのが特徴 です。
さらに Zod などの外部ライブラリと連携する ことで、バリデーションもシンプルに実装でき、実務でも扱いやすいフォーム を作成することができます。
まずは React Hook Form の基本的な使い方を押さえ、簡単なフォームで試しながら、
Zod との連携なども取り入れて、少しずつ React Hook Form に慣れていきましょう。
コメント