React Hook Form

リアクトフックフォーム

React Hook Form を分かりやすく

リアクト・フック・フォーム（React Hook Form）は、React アプリケーションでフォームを簡単かつ効率的に扱うことができるフォームバリデーションライブラリです。

このライブラリを用いることで、フォームバリデーションや入力データの取得が容易になります。また、React Hook Form はパフォーマンスに優れ、リレンダリングの回数を抑えることができます。

React Hook Form の歴史的変遷

React Hook Formは、ReactのフックAPIが導入された後の2019年に初めてリリースされました。それ以前のフォーム管理ライブラリは、多くがクラスベースのコンポーネントやレンダープロップを使用していましたが、React Hook Formはフックを活用することで、関数ベースのコンポーネントでも簡単にフォーム管理を行えるようになりました。

React Hook Form と Jamstack の関係

Jamstackは、プレレンダリングとクライアントサイドのJavaScriptを中心に据えたモダンなウェブ開発アーキテクチャです。React Hook Formは、そのJavaScriptレイヤーにおいて、フォームの管理を効率的に行うためのツールとして利用されます。Next.jsのようなフレームワークと一緒に使用することで、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)といった機能を持ったJamstackアプリケーションでも、ユーザーとのインタラクションを簡単に扱うことができます。

React Hook Form を使うメリット

簡単なバリデーション

React Hook Formは、バリデーションルールを簡単に定義できます。また、カスタムバリデーションもサポートしています。

パフォーマンスの向上

React Hook Formは不要なリレンダリングを最小限に抑える設計になっています。大規模なフォームでもパフォーマンスの低下を感じにくいです。

型安全

TypeScriptとの親和性が高く、型安全なフォーム管理を行うことができます。

React Hook Form の実装

以下にNext.jsとTypeScriptを使用したReact Hook Formの基本的な実装例を示します。

プロジェクトのセットアップ

まず、Next.js と TypeScript のプロジェクトを作成します。次のコマンドでプロジェクトをセットアップしてください。

npx create-next-app --typescript

次に、React Hook Form をインストールします。

npm install react-hook-form

フォームコンポーネントの作成

以下は、React Hook Form を使ったフォームコンポーネントの例です。このコンポーネントでは、useForm というカスタムフックを使っています。register 関数を使って、各入力フィールドを登録し、handleSubmit を使って、フォームの送信時の処理を行います。

// components/ContactForm.tsx
import React from 'react';
import { useForm } from 'react-hook-form';

type FormData = {
  name: string;
  email: string;
  message: string;
};

const ContactForm = () => {
  const { register, handleSubmit, errors } = useForm<FormData>();

  const onSubmit = (data: FormData)
```tsx
  const onSubmit = (data: FormData) => {
    console.log('送信データ:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">名前</label>
      <input
        id="name"
        name="name"
        ref={register({ required: '名前を入力してください' })}
      />
      {errors.name && <p>{errors.name.message}</p>}

      <label htmlFor="email">メールアドレス</label>
      <input
        id="email"
        name="email"
        type="email"
        ref={register({ required: 'メールアドレスを入力してください' })}
      />
      {errors.email && <p>{errors.email.message}</p>}

      <label htmlFor="message">メッセージ</label>
      <textarea
        id="message"
        name="message"
        ref={register({ required: 'メッセージを入力してください' })}
      />
      {errors.message && <p>{errors.message.message}</p>}

      <button type="submit">送信</button>
    </form>
  );
};

export default ContactForm;

この例では、FormData という TypeScript の型を定義しています。この型は、フォームデータの構造を表しており、name、email、message の 3 つのフィールドがあります。useForm フックに型引数として FormData を渡しています。これにより、register や handleSubmit などの関数が型安全になります。

ページにフォームを表示する

作成した ContactForm コンポーネントをページに追加します。例えば、pages/contact.tsx ファイルを作成し、以下のようにコンポーネントをインポートして使用します。

// pages/contact.tsx
import React from 'react'
import ContactForm from 'components/ContactForm'

const ContactPage = () => {
  return (
    <div>
      <h1>お問い合わせ</h1>
      <ContactForm />
    </div>
  )
}

export default ContactPage

これで、React Hook Form を使ったフォームが Next.js と TypeScript のプロジェクトに追加されました。

これにより、フォームのバリデーションやデータ取得が容易になり、また、型安全性が向上します。

ログインフォームの例

この例では、簡単なログインフォームを作成します。

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

type FormData = {
  email: string;
  password: string;
};

const LoginForm = () => {
  const { register, handleSubmit, errors } = useForm<FormData>();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="email"
        ref={register({ required: "Email is required", pattern: /^\S+@\S+$/i })}
      />
      {errors.email && <p>{errors.email.message}</p>}

      <input
        name="password"
        type="password"
        ref={register({ required: "Password is required", minLength: 6 })}
      />
      {errors.password && <p>{errors.password.message}</p>}

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

export default LoginForm;

上記のコードは、emailとpasswordを入力するフォームを作成し、それぞれのバリデーションを行うものです。emailは必須項目であり、正しい形式であることをチェックします。また、passwordも必須であり、最低でも6文字以上であることをチェックします。

React Hook Form を学ぶ

以下はReact Hook Formを学ぶ上で参考になるリソースです。

タイトル 説明
React Hook Form公式ドキュメント React Hook Formの全ての機能やAPIを詳しく解説しています。
React Hook Formでフォームを作るチュートリアル YouTubeのチュートリアルビデオ。基本的な使い方を学ぶのに最適です。
React Hook FormのGitHub React Hook FormのGitHubリポジトリ。IssueやPull Requestから最新の情報や議論を追うことができます。
Next.js を学ぶ 一覧へ
サイト制作、法人向けセミナー
などのお問い合わせはこちら