【 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には**多くの便利なメソッド**があり、それぞれが特定の役割を果たします。以下に、すべてのメソッドをリストアップします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

```react:form.tsx
const { handleSubmit } = useForm();

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

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

```

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

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

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

```react:form.tsx
const { reset } = useForm();

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

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

```react:form.tsx
const { setValue } = useForm();

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

### getValues
getValuesメソッドは、フォームの**現在の値を取得**します。
```react:form.tsx
const { getValues } = useForm();
const values = getValues();
```

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

```react:form.tsx
const { trigger } = useForm();

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

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

```react:form.tsx
const { formState } = useForm();
const { errors, isDirty, isValid } = formState;

```

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

```react: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を使用すると、フォームの管理が非常に簡単になります。
今回紹介したメソッドを活用して、効率的で使いやすいフォームを作成してみてください。

## リンク

https://react-hook-form.com/