react-js-next-jsreact-hook-form-zod

React Hook Form ってどんな機能があるの？

今回は、React.js でフォームを扱う際によく使われるライブラリ React Hook Form について、バリデーションライブラリの Zod と合わせて、基本的な考え方から実際の使い方、よくあるユースケースまでをわかりやすく解説します。

React Hook Form とは？
なぜ React Hook Form を使うのか？
1. useState でフォームを実装した場合の課題
コード例
まとめ
公式サイト

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-form

React 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/resolvers

React 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 が表示される