React Hook Formの基礎を3ステップで理解しよう

はじめに

Reactでフォームを扱うとき、useStateで入力値を1つずつ管理していたり、バリデーションで複雑なコードになってしまった経験はありませんか？

そんなときに便利なのが React Hook Form（RHF） です。
軽量でシンプル、そしてパフォーマンスが高いフォームライブラリとして、多くのプロジェクトで使われています。

本記事では、
「React Hook Formをこれから使いたい人がまず理解すべき流れ」
を 3ステップ に整理して紹介します。

---

Step 1：useFormとregisterでフォームを作る

React Hook Formの中心となるのが useForm() フックです。
これを呼び出すことで、フォームを管理するための関数や値がまとめて手に入ります。

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

export default function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="名前" />
      <input {...register("email")} placeholder="メールアドレス" />
      <button type="submit">送信</button>
    </form>
  );
}

register("name") の部分で、input要素をRHFの管理下に登録しています。
これにより、RHFが自動的に値を管理し、フォームの状態を追跡してくれます。

ここで重要なのは、useStateを使わなくてもフォームが作れるということ。
RHFが内部で状態管理をしてくれるため、余分な再レンダリングを防ぎ、コードがすっきりします。

---

Step 2：handleSubmitでデータを送信する

フォーム送信時の処理には handleSubmit を使います。
この関数を<form>のonSubmitに渡すことで、
入力データをまとめて受け取れるようになります。

const { register, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data) => console.log(data);

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input
      {...register("email", { required: "メールアドレスは必須です" })}
      placeholder="メールアドレス"
    />
    {errors.email && <p>{errors.email.message}</p>}
    <button type="submit">送信</button>
  </form>
);

ここで押さえておきたいポイント

• handleSubmit が呼ばれると、自動でバリデーションが実行されます。
• onSubmitの引数にはフォームから送信されてきたデータが入ってきます。
• バリデーション結果は formState.errors から取得できます。

例えば、{errors.email && <p>{errors.email.message}</p>} のように書くと、エラーメッセージを簡単に表示できます。
RHFでは、バリデーションの宣言とエラー表示を一箇所にまとめられるのが大きな魅力です。

---

Step 3：resetやsetValueで値を操作する

フォームを送信したあと、入力内容をリセットしたいことはありませんか？
そんなときは reset() を使います。

const { register, handleSubmit, reset } = useForm();

const onSubmit = (data) => {
  console.log(data);
  reset(); // フォームを初期化
};

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("name")} placeholder="名前" />
    <input {...register("email")} placeholder="メールアドレス" />
    <button type="submit">送信</button>
  </form>
);

これだけでフォームの入力値をリセットできます。
また、特定の値を外部から変更したい場合は setValue() を使います。
具体的には、ボタンを押したときにデフォルト値を再設定したり、APIから取得したデータをフォームに反映したいときには便利です。

const { register, setValue } = useForm();
setValue("name", "ねこのこ"); // nameフィールドに値を代入

反対に、現在の入力値を取得したいときは getValues() が使えます。
何かのロジックの条件として入力値を扱う場合や、handleSubmit以外の場所で利用したい場合などに使用するイメージです。

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

export default function App() {
  const { register, getValues } = useForm();

  const handleCheckValues = () => {
    const values = getValues(); // 現在のフォームのすべての入力値を取得
    console.log(values);

    // 特定のフィールドだけ取得したい場合は、キーを指定
    const nameValue = getValues("name"); 
    console.log(nameValue); // => "name" フィールドの入力値だけ取得
  };

  return (
    <form>
      <input {...register("name")} placeholder="名前" />
      <input {...register("email")} placeholder="メールアドレス" />
      <button type="button" onClick={handleCheckValues}>
        入力内容を確認
      </button>
    </form>
  );
}

reset(), setValue(), getValues() はフォームの値を直接操作したいときに便利です。

これら3つは似ていますが、使いどころが少し異なります。

• reset(): 全体を初期状態に戻したいとき
• setValue(): 特定の項目に値を代入したいとき
• getValues(): 現在の入力値を確認したいとき

---

まとめ：3ステップでRHFの基本を理解する

これまで紹介した3ステップをおさらいします。

ステップ	学ぶ内容	キーワード
Step 1	フォームを作る	useForm, register
Step 2	データを送信する	handleSubmit, formState.errors
Step 3	値を操作・リセットする	reset, setValue, getValues

この流れを理解すれば、React Hook Formでフォームを組み立て、送信・リセットまで一通り実装できるようになります。
初めて触る人は、この3ステップを繰り返し練習するだけでも十分です。

---

次のステップとして

より柔軟な実装を行う場合、以下のような機能・テクニックが有効になってきます。

• Controllerを使ってMUIなどのUIライブラリと連携する方法
• watch / useWatch で入力値をリアルタイムに追跡する方法
• isValid / isDirty / isSubmitting などフォーム状態の管理テクニック

これらを理解すれば、より実務的なフォーム実装ができるようになります。
まずは今回の3ステップをしっかり押さえて、RHFの基本を体に染み込ませていきましょう。