React Hook Formのwatch機能でフォームの変化をリアルタイムに捉える方法

フロントエンド開発•2025/1/28

はじめに

皆さんはReactを使ったフォーム開発で、入力値の変化に柔軟に対応したいと考えたことはありませんか。 React Hook Form というライブラリには、フォームデータを扱いやすくするためのさまざまな仕組みが用意されています。その中でも、フォーム内の入力値をリアルタイムで監視する watch 機能はとても便利です。入力内容に応じてエラーメッセージを即時に出したり、別の入力欄を動的に更新したりすることが可能になります。

本記事では、React Hook Form の watch 機能について、初心者向けに詳しく解説します。フォーム管理がどのように楽になるのか、実際のコード例を見ながら一緒に学んでみましょう。最終的には、簡単な実務レベルの活用例を通じて、なぜこの仕組みが効率的なのかを理解できるようになります。

この記事を読むとわかること

React Hook Form がどのようにフォーム管理を行うか
watch を使ってフォーム入力値をリアルタイムに監視する方法
実務で使われるような応用的な利用シーン
コードの可読性やパフォーマンスに関する注意点

React Hook Formとは

React Hook Form はReact向けのフォームライブラリです。フォーム内での入力値の管理やバリデーションの実装をシンプルに行えるのが特徴です。公式のコンセプトとしては、「軽量でシンプルなAPIを提供し、パフォーマンスにも配慮した設計を目指している」という点が挙げられます。

多くのフォーム関連ライブラリは、ステート管理が複雑になりやすいという課題を抱えています。一方でReact Hook Form はReactのHooksを活用することで、記述量を抑えながら柔軟にフォームを作成できます。さらに、ウォッチング（監視）やバリデーションなど、実際のアプリ開発で必要な機能が整っているため、初心者にも扱いやすいでしょう。

フォーム管理の基本

通常、Reactでフォームを扱うときは、入力値をstateとして保持します。そして、入力欄を変更するたびにstateを更新し、それをもとに画面を再描画する流れが基本です。この際、コード量が増えたり、バリデーションのロジックが複雑になったりすると、保守が難しくなることがあります。

React Hook Form では、useForm というHookを使ってフォーム全体の状態を一括管理できます。そして、入力欄を register という関数で紐付けるだけで、その欄の値やバリデーションを簡単に管理できる仕組みになっています。こういった基本概念の延長にあるのが、今回紹介する watch の機能です。

React Hook Formが提供するメリット

簡潔なコード：フォーム管理の複雑さを減らし、読みやすく保てます
高い拡張性：バリデーションやエラーメッセージの表示など、実務でよく使う機能が整備されています
柔軟な監視：各フィールドの値をリアルタイムで取得できるため、動的なUIを実装しやすくなります

これらの仕組みによって、利用者はフォーム周りの煩雑なロジックに悩まされることが少なくなるでしょう。では、具体的に watch が何をしてくれるのかを詳しく見ていきます。

watch とは

フォームの入力値が変化したタイミングで、その値をリアルタイムに取得できるのが watch の機能です。 React Hook Formの useForm フックから取得でき、以下のように書きます。


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

function MyForm() {
  const { register, watch, handleSubmit } = useForm();
  // ここでwatchが使えます
}

watch は、特定のフィールドだけを監視する使い方や、フォーム全体の値をオブジェクトとして取得する使い方など、さまざまなパターンに対応しています。例えば、ユーザーが入力した値を即時に別の計算に使うなど、リアルタイム性を求められるケースで活躍します。

フォームの監視がなぜ必要か

実務では、以下のようなケースでフォームの監視が求められます。

ある入力欄の内容によって別の項目の必須入力が変わる
リアルタイムに入力値を集計して、画面上に結果を表示したい
入力欄ごとにエラーメッセージを個別に制御する

こういったニーズに応えるためには、入力値が変更された瞬間にコード側で処理を行う必要があります。その処理をシンプルに書けるのが React Hook Form の watch です。

watchの使い方をコードで解説

ここでは、代表的なパターンを2つ紹介します。 1つ目は、単一フィールド を監視する方法。 2つ目は、複数フィールド を同時に監視する方法です。それぞれの使いどころとサンプルコードを見ていきましょう。

単一フィールドを監視する

単一のフィールドを監視するには、watch("フィールド名") とするだけです。例えば、ユーザー名を入力したら即座に表示する小さなサンプルを考えてみます。


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

function SingleWatchForm() {
  const { register, watch, handleSubmit } = useForm();
  const userName = watch("userName"); // "userName"フィールドを監視

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>ユーザー名</label>
      <input {...register("userName")} placeholder="ユーザー名を入力" />

      <p>入力されたユーザー名: {userName}</p>

      <button type="submit">送信</button>
    </form>
  );
}

export default SingleWatchForm;

この例では、userName が変わるたびに p 要素の内容が自動的に更新されます。どのような値が入力されているかをリアルタイムで把握するのに便利でしょう。

複数フィールドを監視する

複数のフィールドを同時に監視するには、watch に配列を渡してあげます。すると、指定したすべてのフィールドを一括して取得できます。


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

function MultiWatchForm() {
  const { register, watch, handleSubmit } = useForm();
  const [title, content] = watch(["title", "content"]); // 複数フィールドを同時に監視

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>タイトル</label>
      <input {...register("title")} placeholder="タイトル" />

      <label>内容</label>
      <textarea {...register("content")} placeholder="内容を入力" />

      <p>プレビュー: {title} - {content}</p>

      <button type="submit">投稿</button>
    </form>
  );
}

export default MultiWatchForm;

タイトルと内容の両方が変わるたびに、画面上のプレビューが更新されるような使い方ができます。実務では、複数の項目をまとめてチェックしながら画面を動的に変化させたいときに重宝するでしょう。

実務での活用例

ここでは、実際に業務でよく見かけるシーンを2つ例に挙げます。コードを少しアレンジして、watch の利便性をさらに理解してみましょう。

動的なエラーメッセージの表示

ユーザーが入力した瞬間に、エラーの有無をわかりやすく表示したいときがあります。このような場面では、watch によって取得した値をもとに、リアルタイムでエラーメッセージを更新できます。


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

function ErrorMessageForm() {
  const { register, watch, formState: { errors }, handleSubmit } = useForm();
  const password = watch("password");

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>パスワード</label>
      <input
        {...register("password", { required: true, minLength: 5 })}
        type="password"
        placeholder="5文字以上"
      />
      {errors.password && <p>パスワードを5文字以上で入力してください</p>}

      <p>現在の入力: {password}</p>

      <button type="submit">送信</button>
    </form>
  );
}

export default ErrorMessageForm;

ここでは watch("password") によって、入力されたパスワードが常に取得できます。もしパスワードが短い場合でも、エラーメッセージとリアルタイムの入力値を連動させることができます。

リアルタイムで計算結果を表示

フォームで数値を入力して合計や平均をリアルタイムに表示するようなケースもあります。例えば、商品単価と数量から小計を計算し、すぐにプレビューしたいときにも watch が役立ちます。


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

function CalculationForm() {
  const { register, watch, handleSubmit } = useForm();
  const price = watch("price") || 0;
  const quantity = watch("quantity") || 0;

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

  // priceやquantityが更新されると、自動的に計算し直される
  const subtotal = Number(price) * Number(quantity);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>商品単価</label>
      <input
        {...register("price")}
        type="number"
        placeholder="商品単価"
      />

      <label>数量</label>
      <input
        {...register("quantity")}
        type="number"
        placeholder="数量"
      />

      <p>小計: {subtotal}</p>

      <button type="submit">登録</button>
    </form>
  );
}

export default CalculationForm;

上記のように、数値の入力値が変わったタイミングですぐに合計が更新されます。開発の現場では、在庫管理や販売システムなどでよく見られるパターンです。

watchを活用するときの注意点

watch は使い勝手が良い反面、いくつか注意しておきたい点もあります。以下のポイントを押さえておけば、フォーム管理がさらにスムーズになるでしょう。

パフォーマンスへの考慮

すべての入力欄を対象に watch を多用すると、入力が変わるたびに多くの処理が走ることになります。入力値の変化が頻繁に起きる場面では、必要最小限のフィールドだけを監視したり、処理の頻度を調整する工夫が必要です。

全フィールドを無計画に監視してしまうと、想定外のタイミングで画面が再レンダリングされるかもしれません。どの項目を監視したいのか、目的を明確にすることが大切です。

コードの可読性を保つ

複数の項目を同時に watch すると、配列で受け取るコードが増えて分かりにくくなることがあります。そのような場合は、watch の戻り値をオブジェクトとしてまとめて取得する方法も検討してください。用途によって使い分け、チーム内でもコーディング規約を共有しておくと良いでしょう。

複雑になりそうなときは、関数を分けるなどして可読性を意識してみてください。そうすると、あとから保守や拡張を行うときに迷わずに済みます。

まとめ

React Hook Formが提供する watch 機能を使うと、フォーム内の入力値をリアルタイムに監視できるため、動的なUIやエラーメッセージの更新を簡単に実装できるようになります。

初心者の皆さんでも、コード例を通じて使い方のイメージがつきやすかったのではないでしょうか。実務で、フォームの入力内容によって画面を切り替えたり数値を計算したりといった処理が必要なときに、とても役立つ機能です。

ぜひ、皆さんのプロジェクトでも試してみてはいかがでしょうか。フォーム周りのコードがシンプルになり、保守もしやすくなるでしょう。