【 React 】React Hook Form と メソッドの使い方 - まとめ

はじめに

Reactアプリケーションでフォームを管理するのは、なかなか面倒な作業です。

バリデーションや状態管理、そしてパフォーマンスの最適化など、多くの課題があります。しかし、React Hook Formを使えば、これらの課題を簡単に解決できます
。

本記事では、React Hook Formのメソッドと、よく使われるメソッドについて解説します。

React Hook Form とは？

React Hook Formは、Reactアプリケーションにおけるフォームの管理をシンプルかつ効率的に行うためのライブラリです。

このライブラリは、以下の特徴を持っています.

最小限の再レンダリング

パフォーマンスを最適化するために、必要な時にだけコンポーネントを再レンダリングします。

簡単なバリデーション

登録されたフィールドに対して、シンプルかつ強力なバリデーションを提供します。

軽量

小さなバンドルサイズで、アプリケーションのパフォーマンスにほとんど影響を与えません。

使いやすいAPI

シンプルなAPIで、直感的に使えるよう設計されています。

React Hook Form の導入

まずは、React Hook Formをインストールします。

npm install react-hook-form

React Hook Form のすべてのメソッド

React Hook Formには多くの便利なメソッドがあり、それぞれが特定の役割を果たします。以下に、すべてのメソッドをリストアップします。

register
フォームフィールドを登録し、バリデーションや値の管理を行います。

handleSubmit
フォームの送信を処理するためのメソッドです。

watch
フォームフィールドの変更を監視します。

reset
フォームの値をリセットします。

setError
フォームフィールドにエラーを設定します。

clearErrors
指定されたフィールドのエラーをクリアします。

setValue
指定したフィールドの値を設定します。

getValues
フォームの現在の値を取得します。

trigger
指定したフィールドのバリデーションをトリガーします。

formState
フォームの状態を取得します（例：errors, touched, isDirty, isValid など）。

unregister
フォームフィールドの登録を解除します。

setFocus
特定のフィールドにフォーカスを設定します。

resetField
特定のフィールドをリセットします。

getFieldState
特定のフィールドの状態を取得します（errors, isTouched, isDirty など）。

よく使用されるメソッド

register

registerメソッドは、フォームフィールドをReact Hook Formに登録し、バリデーションや値の管理を行います。

form.tsx

const { register } = useForm();
<input {...register('firstName')} placeholder="First Name" />

handleSubmit

handleSubmitメソッドは、フォームの送信を処理するために使用します。
送信時に呼び出される関数を引数として渡します。

form.tsx

const { handleSubmit } = useForm();

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

<form onSubmit={handleSubmit(onSubmit)}>
  {/* フォームフィールド */}
</form>

watch

watchメソッドは、フォームフィールドの変更を監視します。

form.tsx

const { watch } = useForm();
const firstName = watch('firstName'); // フォームフィールドの値をリアルタイムで取得

reset

resetメソッドは、フォームの値をリセットします。

form.tsx

const { reset } = useForm();

const handleReset = () => {
  reset();
};

setValue

setValueメソッドは、指定したフィールドの値を設定します。

form.tsx

const { setValue } = useForm();

const updateValue = () => {
  setValue('firstName', 'John');
};

getValues

getValuesメソッドは、フォームの現在の値を取得します。

form.tsx

const { getValues } = useForm();
const values = getValues();

trigger

triggerメソッドは、指定したフィールドのバリデーションをトリガーします。

form.tsx

const { trigger } = useForm();

const validateField = async () => {
  const result = await trigger('firstName');
  console.log(result); // true または false
};

formState

formStateオブジェクトは、フォームの状態を管理します。
例えば、エラーやタッチ済みフィールド、フォーム全体のバリデーション状態などを取得できます。

form.tsx

const { formState } = useForm();
const { errors, isDirty, isValid } = formState;

実際の使用例

上記のメソッドを組み合わせて、実際のフォームを作成する例を紹介します。

form.tsx

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

function MyForm() {
  const { register, handleSubmit, watch, reset, setValue, getValues, trigger, formState } = useForm();

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

  const handleReset = () => {
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} placeholder="First Name" />
      <input {...register('lastName')} placeholder="Last Name" />
      <button type="button" onClick={handleReset}>Reset</button>
      <button type="submit">Submit</button>
      {formState.errors.firstName && <p>{formState.errors.firstName.message}</p>}
    </form>
  );
}

export default MyForm;

このコードは、React Hook Formを使って基本的なフォームを作成しています。
フォームには2つの入力フィールドと、送信ボタンおよびリセットボタンがあり、フォームの状態管理・バリデーション・エラーメッセージの表示がシンプルに実装しました。

まとめ

React Hook Formを使用すると、フォームの管理が非常に簡単になります。
今回紹介したメソッドを活用して、効率的で使いやすいフォームを作成してみてください。

リンク