はじめてのReact Hook Form入門 シンプルで高速なフォームバリデーションを実現しよう

react hook form rhf React
この記事は約11分で読めます。

この記事の最終更新日: 2025年5月23日

Web アプリケーションでフォームを正しく、かつ快適に扱うことは UX 改善の第一歩です。本記事では、React 製フォームライブラリのデファクトスタンダード React Hook Form（RHF） を、これから触る開発者にもわかりやすいように解説します。

react hook form rhf

1. React Hook Form とは？

React Hook Form（略して RHF）は、React でフォームを扱う際にコード量を減らしつつ、入力チェックやエラーメッセージの表示などを簡単に実装できる便利なライブラリです。

たとえば、React の標準機能でフォームの状態を管理しようとすると、各 input に対して useState を使い、変更のたびに状態を更新して…といった煩雑なコードになります。

しかし RHF を使えば、最小限の記述でこれらの処理をまとめて行えます。さらに useForm() を使って一括でフォーム全体を管理でき、バリデーションの導入も非常に簡単です。 React Hook Form は React16.8 で導入された Hooks API を活用した軽量フォームライブラリです。公式によれば、フォームの書き味を保ちつつ バンドルサイズの削減 と レンダリング回数の最小化 を実現します。

特長説明
高速差分レンダリングで再描画を最小限に抑え、パフォーマンスに優れる
学習コストが低いregister と handleSubmit の 2 つを覚えるだけで基本が使える
型安全TypeScript サポートが充実し、型安全なフォーム定義が可能
バンドルサイズが小さい20 KB（gzip）未満と他ライブラリに比べて軽量

💡 見送り注意: React Hook Form は uncontrolled component をデフォルトに採用しているため、controlled なフォーム状態管理よりもセットアップが容易で高速です。

2. RHF の主な特長

  • 再描画の最小化: フィールド単位で監視し、他の入力に影響を与えない
  • シンプル API: useForm ひとつでフォームロジックを完結できる
  • バリデーション統合: HTML の required 属性やパターンバリデーションも容易に組み込める
  • 外部スキーマ対応: Yup や Zod などのバリデーションスキーマをネイティブサポート

2025年4月時点の最新バージョン (v7.56.1) で追加された主な変更点

バージョン日付変更概要
7.56.12025-04-22reset や formState.isReady 周りのバグ修正、ESM named export 警告の解消
7.56.02025-04-20isReady ステートの追加、reactiveMode / reValidateMode の正式サポート、useFieldArray の move/swap バグ修正、SSR 向け useIsomorphicLayoutEffect 採用
7.55.02025-03-28createFormControl と subscribe API を導入し、React コンポーネント外からのフォーム購読が可能に
7.57.0-next.02025-04-27useWatch に compute プロパティが追加 (実験的)

開発者向けハイライト

  • createFormControl により React コンポーネント外でもフォーム状態を監視可能になり、マイクロフロントエンドや Web Worker との連携が容易に。
  • isReady ステートは setValue を安全に呼び出すタイミングを提供し、サブスクリプション完了前の race condition を防止。
  • 新しい検証タイミング reactiveMode / reValidateMode により、リアクティブバリデーションを細かく制御。
  • useWatch({ compute }) で巨大フォームでも必要データのみ再計算でき、パフォーマンスをさらに改善。

📝 アップグレード手順

  1. npm install react-hook-form@latest で 7.56.1 へ更新
  2. createFormControl を利用する場合は useForm の戻り値を分割代入して既存コードに統合
  3. isReady を監視してから setValue などの副作用を実行
  4. experimental 版を試す際は npm install react-hook-form@next

3. インストールとセットアップ

# npm
npm install react-hook-form

# yarn
yarn add react-hook-form

TypeScript を利用する場合、型定義は同梱されているため追加インストールは不要です。

4. 最小構成サンプルで学ぶ基本 API

まずは、「名前」と「メールアドレス」を受け取る簡単なフォームを使って、React Hook Form の使い方を見てみましょう。

このサンプルでは、以下のような基本機能を体験できます：

  • 入力欄に required ルールをつけて、空欄チェックを自動化
  • 入力ミスがあった場合、リアルタイムでエラーメッセージを表示
  • 送信ボタンをクリックすると、バリデーションが通った値を取得

コードは次のようになります。 以下のシンプルな例で、RHF の要点を押さえましょう。

import { useForm, SubmitHandler } from "react-hook-form";

interface FormInput {
  name: string;
  email: string;
}

export default function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormInput>();
  const onSubmit: SubmitHandler<FormInput> = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <input
        {...register("name", { required: "名前は必須です" })}
        placeholder="お名前"
        className="border p-2 rounded w-full"
      />
      {errors.name && <p className="text-red-600">{errors.name.message}</p>}

      <input
        {...register("email", {
          required: "メールアドレスは必須です",
          pattern: {
            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: "メール形式が正しくありません",
          },
        })}
        placeholder="メールアドレス"
        className="border p-2 rounded w-full"
      />
      {errors.email && <p className="text-red-600">{errors.email.message}</p>}

      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">送信</button>
    </form>
  );
}

ポイント

  1. useForm でフォームロジックを初期化
  2. register を各 <input> にスプレッド
  3. handleSubmit がバリデーション後にコールバックを実行
  4. formState.errors でエラーメッセージを制御

5. バリデーションの基礎

フォームで重要なのが「正しい値が入力されているかどうか」の確認、つまりバリデーションです。

React Hook Form では、HTML の required 属性のような基本的なバリデーションから、正規表現やカスタム関数を使った柔軟なチェックまで、さまざまな方法が簡単に使えます。

ここでは、よく使うバリデーションルールを一覧で紹介します。 RHF は HTML5 バリデーション API に寄り添いつつ、ルールオブジェクトで柔軟に定義できます。

よく使うバリデーションルール

ルール用途例
required入力必須{ required: "必須です" }
minLength / maxLength文字数制限{ minLength: { value: 3, message: "3文字以上" } }
pattern正規表現{ pattern: /^[A-Za-z]+$/ }
validate自由な関数`{ validate: value => value !== “test”“test は無効” }`

6. Yup / Zod など外部スキーマとの連携

複雑な入力チェック（例：電話番号形式・複数条件・入力間の関連チェックなど）を行いたい場合、RHF 単体のバリデーションだけでは管理が大変になります。

そこで登場するのが Yup や Zod といった「スキーマバリデーションライブラリ」です。これらは、「どんな形式のデータならOKか」を事前にルールとして定義し、その通りかどうかを自動チェックできます。

RHF は公式に「resolver」という仕組みで、これらのスキーマライブラリと連携できます。 スキーマバリデーションを使う場合、resolver が鍵です。公式 @hookform/resolvers から好みのバリデーションエンジンを選びます。

npm install @hookform/resolvers yup


import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required(),
});

const { register, handleSubmit } = useForm<FormInput>({
  resolver: yupResolver(schema),
});

7. カスタム UI コンポーネントで使う Controller

Material‑UI や Chakra UI のような controlled component にも簡単に対応できます。

import { Controller, useForm } from "react-hook-form";
import { TextField } from "@mui/material";

<Controller
  control={control}
  name="email"
  rules={{ required: "メールは必須" }}
  render={({ field, fieldState }) => (
    <TextField
      {...field}
      error={!!fieldState.error}
      helperText={fieldState.error?.message}
      label="メール"
    />
  )}
/>

8. watch / reset / setValue など便利 API 集

  • watch() — フィールド値をリアルタイムで監視
  • reset() — 初期値へリセット
  • setValue() / getValues() — 任意のタイミングで値を読取・書込
  • trigger() — 手動でバリデーションを発火

9. DevTools でデバッグ効率アップ

公式 DevTools（Chrome 拡張）を使うと、フォームの状態やエラーを GUI で確認できます。開発モード限定で DevTool コンポーネントを埋め込むだけで OK です。

10. パフォーマンス最適化のヒント

大規模なフォームになると、すべての入力項目を一度に管理しようとするとパフォーマンスが落ちてしまう場合があります。

React Hook Form はそもそも軽量かつ高速ですが、以下のような工夫をすることで、さらに快適に利用できます。

  1. と でツリーを浅く保つ
  2. “ などバリデーションタイミングを調整
  3. フィールドコンポーネントを React.memo でラップ
  4. 重いスキーマは lazy import して初期ロードを軽量化

11. よくあるエラーと対処法

症状原因 & 解決策
Object is possibly 'undefined'formState などを optional chaining で参照するか、型引数を正しく指定する
入力が更新されないregister を忘れている / コンポーネントが controlled で Controller が必要
エラーメッセージが消えないmode に onChange を指定していない可能性

12. まとめ

React Hook Form は 「少ないコードで素早く動くフォーム」 を実現できる強力なツールです。本記事で紹介した基本から一歩進んだ活用法まで押さえれば、多様な要件のフォームをスマートに実装できます。実案件で迷ったら、まずはシンプルなサンプルを動かしてから拡張してみてください。

コメント

タイトルとURLをコピーしました