React Hook Formでフォームを簡単に作る方法をわかりやすく解説！

2024-01-30

当サイトでは一部リンクに広告が含まれています

React Hook Formとは？

React Hook Formは、フォームを作るための道具箱、つまりライブラリです。

Reactでフォームを作る時に役立つツールがたくさん入っています。

このライブラリを使うと、フォームのデータを手に入れたり、エラーメッセージを表示したりといったことが、簡単にできるようになります。

React Hook Formの基本的な使い方

React Hook Formを使うためには、まずライブラリをプロジェクトに追加する必要があります。以下のコマンドで、プロジェクトにライブラリを追加できます。

npm install react-hook-form

このライブラリを導入したら、次にやるべきことは当然ながらフォームを作ることです。

React Hook Formでは、registerという機能を使って、フォームの各項目（例えば、名前やパスワードなど）を登録します。

こうすることで、React Hook Formがフォームの項目を管理してくれます。

以下に、React Hook Formを使った基本的なフォームの一例を示します。

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

function FormComponent() {
  const { register, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="name" ref={register} placeholder="名前を入力してください" />
      <input name="password" ref={register} type="password" placeholder="パスワードを入力してください" />
      <input type="submit" />
    </form>
  );
}

export default FormComponent;

このコードでは、useFormという関数を使っていくつかの機能を取り出し、それらを使ってフォームを作っています。

具体的には、register機能でフォームの項目を登録し、handleSubmit機能でフォームが送信された時の動きを設定しています。

React Hook Formの注意点

React Hook Formを使う上で、いくつかの注意点があります。それらを以下に解説します。

1. 初期値の設定

フォームの項目には、初めから値が入っていることがあります。

例えば、編集フォームなどでは初期値が設定されていることが多いです。

React Hook Formでは、useForm関数の引数にdefaultValuesオブジェクトを設定することで、初期値を設定することができます。

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

function FormComponent() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      name: "初期値"
    }
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="name" ref={register} placeholder="名前を入力してください" />
      <input type="submit" />
    </form>
  );
}

export default FormComponent;

このコードでは、名前の項目に"初期値"という値を初期値として設定しています。

2. フォームの値をリセットする

フォームの値を全て消去したい、つまりリセットしたい場合もあります。

React Hook Formでは、reset関数を使うことで、簡単にフォームの値をリセットすることができます。

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="name" ref={register} placeholder="名前を入力してください" />
      <input type="submit" />
    </form>
  );
}

export default FormComponent;

このコードでは、フォームが送信された時に、その値を表示してから、フォームの値をリセットしています。

React Hook Form を使うべき場面

React Hook Formは、フォームの作成に必要な機能を簡単に実装できるライブラリです。

しかし、React Hook Formを使うべき場面は限られています。

以下のような場合には、React Hook Formを使うことをおすすめします。

フォームの項目が多い場合
フォームの項目が複雑な場合
フォームの項目が動的に変化する場合

React Hook Form ではなくてもいい場面

逆に、以下のような場合には、React Hook Formではなく、通常のReactのコードでフォームを作ることをおすすめします。

フォームの項目が少ない場合
フォームの項目が単純な場合
フォームの項目が動的に変化しない場合

もちろん、React Hook Formを用いてこのような場面でもフォームを作ることは可能です。

しかし、React Hook Formを使うことで、フォームのコードが複雑になってしまう可能性があります。

そのため、フォームの項目が少ない場合や単純な場合は、React Hook Formを使わずに、通常のReactのコードでフォームを作ることをおすすめします。

React Hook Form のテスト(Jest)の書き方

React Hook Formを使ったフォームのテストを書く場合にはどうすればいいか、実例で見てみましょう。

以下のコードは、名前とメールアドレスを入力するフォームを作っています。

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

function FormComponent({ onSubmit }) {
  const { register, handleSubmit, errors } = useForm();

return (
    <form data-testid='form' onSubmit={handleSubmit(onSubmit)}>
      <input name="name" ref={register({ required: true })} placeholder="名前を入力してください" />
      {errors.name && <span>名前は必須です</span>}

      <input name="email" ref={register({ required: true })} placeholder="メールアドレスを入力してください" />
      {errors.email && <span>メールアドレスは必須です</span>}

      <input type="submit" />
    </form>
  );
}

export default FormComponent;

上記のフォームでは、名前とメールアドレスの項目には、必須入力のバリデーションが設定されています。

また、フォームが送信された時には、onSubmit関数が呼ばれます。

このフォームのテストを書いてみましょう。

import React from 'react';
import { render, fireEvent, cleanup } from '@testing-library/react';
import FormComponent from './FormComponent';

afterEach(cleanup);

describe('FormComponent', () => {
  it('名前とメールアドレスを入力して送信ボタンを押すと、入力した値が表示される', () => {
    const mockSubmit = jest.fn();
    const { getByPlaceholderText } = render(<FormComponent onSubmit={mockSubmit} />);

    const nameInput = getByPlaceholderText('名前を入力してください');
    const emailInput = getByPlaceholderText('メールアドレスを入力してください');

    fireEvent.change(nameInput, { target: { value: 'テスト太郎' } });
    fireEvent.change(emailInput, { target: { value: 'test@example.com' } });

    fireEvent.submit(getByTestId('form'));

    expect(mockSubmit).toHaveBeenCalledWith({
      name: 'テスト太郎',
      email: 'test@example.com'
    });
  });
});

このテストでは、Jestのmock functionを使用して、onSubmit関数が期待通りに動作しているかを確認します。

また、fireEvent.submit(getByTestId('form'))でフォームの送信をシミュレートしています。

最終的には、mockSubmitが期待した引数、つまり入力した値と共に呼び出されていることを確認します。