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

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

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が期待した引数、つまり入力した値と共に呼び出されていることを確認します。

React を効率的に身につける勉強法は?

React には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

  • Reactエンジニアとして活躍するために何をすればいい?
  • 何から勉強すればいいんだろう?
  • 絶対に転職を成功させるには?

React は習得が比較的難しいため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか?

目次