1. フォーム管理が難しくなる理由

Reactでフォームを作るとき、入力欄が増えるたびに状態も増えていきます。その結果、同じようなコードが何度も登場し、全体が読みにくくなります。

これは、紙の申込書に項目が増えすぎて、どこに何を書いたのか分からなくなる状態に似ています。

2. React Hook Formとは何か

React Hook Formは、フォーム入力をまとめて管理してくれるライブラリです。ライブラリとは、便利な道具箱のようなものだと考えると分かりやすいです。

難しい処理を自分で書かなくても、最低限のコードでフォームを動かせるのが特徴です。

3. React Hook Formの基本的な使い方

まずは、React Hook Formを使った一番シンプルなフォームを見てみましょう。 useFormという仕組みを使うことで、入力内容を簡単に扱えます。


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

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

  const onSubmit = (data) => {
    alert(data.name);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（入力した名前が送信時に表示されます）

registerは、入力欄をフォーム管理に登録するためのものです。 handleSubmitは、送信時の処理をまとめて管理してくれます。

4. 複数入力欄をまとめて管理する

React Hook Formの強みは、入力欄が増えてもコードが増えにくい点です。複数の項目でも、同じ書き方で対応できます。


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

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

  const onSubmit = (data) => {
    alert(data.name + " / " + data.email);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="名前" />
      <input {...register("email")} placeholder="メール" />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（入力した名前とメールがまとめて表示されます）

dataの中には、入力された情報が一つの箱に入った状態で渡されます。これにより、管理がとても楽になります。

5. 入力チェックを簡単に追加する

フォームでは、入力されていないと困る項目があります。 React Hook Formでは、簡単な指定だけで入力チェックができます。


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

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

  const onSubmit = (data) => {
    alert(data.name);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name", { required: true })} />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（名前を入力しないと送信できません）

requiredは「必ず入力してください」という意味です。ルールを追加するだけで、入力ミスを防げます。