【React】フロント側のバリデーション実装に便利なReact-Hook-Formのキホン

この記事ではReact-Hook-Formというライブラリの基本的な使い方に関して、まとめます。

あわせて読みたい

404: Not found Performant, flexible and extensible forms with easy-to-use validation.

英語が苦手な自分的には日本語対応のドキュメントは嬉しいです（笑）

ユーザー登録画面やログイン画面のようにユーザーに情報を入力してもらって、その内容をAPIにPOSTするような画面自体はReact-Hook-Formを使わずに実装することもできますし、どちらかというと使わない方法の情報（記事）の方が多いと思います。

上のツイートをした関係でReact/Next.jsでの画面（コンポーネント）でのデータ管理について現役Reactエンジニア数名に色々と意見をもらったのですが、「基本はReact-Hook-Formを使っている」という意見が結構あったので僕も実務で進行中のPJに導入してみようと思ったのがキッカケです。

結論、結構便利だなと思ったのでその辺も書きます。

React-Hook-Formとは

公式ドキュメントから引用します。

高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ。

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

本ライブラリは入力画面のフォームにバリデーション（フロントエンド）を簡単に実装できるものです。

実際にフォーム送信時のフロントエンドでのバリデーションを実装することを想像すると、かなり便利なライブラリだなと思っています。感謝。

公式ドキュメントを見るとレンダリング数の削減によるパフォーマンスの向上もメリットとしてあると記載されているのですが自分自身まだ深掘りできていないので別の記事で書きたいなと思っています。

余談ですが、フロントエンドでのバリデーション、バックエンドのバリデーションはそれぞれ役割が違います。

導入方法

以下コマンドでインストールすればOKです。

# npm
npm install react-hook-form

# yarn
yarn add react-hook-form

あわせて読みたい

404: Not found Performant, flexible and extensible forms with easy-to-use validation.

これだけです。簡単。

基本的な使い方（公式ドキュメント流用）

React-Hook-Formを使いたいコンポーネントで以下のimport文で必要なものを呼んで使います。

以下コードは公式ドキュメントから丸々流用しておりますが、わかりやすいので拝借させてもらいます。（JavaScriptではなくTypeScriptバージョンです）

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

type Inputs = {
  example: string,
  exampleRequired: string,
};

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = data => console.log(data);

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

デモ画面も準備されています。

CodeSandbox

react-hook-form-get-started-ts – CodeSandbox react-hook-form-get-started-ts by bluebill1049 using react, react-dom, react-hook-form, react-scripts

まずはReact-Hook-Formが準備してくれている機能で必要なものを用意します。

const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();

watchはデバッグ用に使うものという認識なのでregister, handleSubmit, formState: { errors }を定義しておけば使えます。

useForm<Inputs>()のジェネリクス部分はフォーム（画面）で管理するフィールドの名前と型を定義しています。（フィールドはstateのようなものという認識で問題ないかと思います）

type Inputs = {
  example: string;
  exampleRequired: string;
};

()の中はライブラリの設定項目を色々と定義できるのですが、空＝デフォルト設定のままです。

次にライブラリで管理するフィールドの定義やバリデーションの設定は以下のコードで実装します。

<input {...register("exampleRequired", { required: true })} />

個人的にはここはまずは書き方を覚えるのが良いのではないかと思います（笑）

React-Hook-Formのソースコードを追っていくと{…register("exampleRequired", { required: true })}がどういう処理をしているのかは紐解けますが、それはまた別の記事でまとめようかなと思います。

とりあえず使ってみる！という時は

<input {...register(state名, { バリデーションルール })} />

で覚えておくといいかと思います。

本ライブラリで設定するバリデーションの実行はhandleSubmitで設定します。

   <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>

以下のコードで、このformで囲まれた内容がsubmitされた時（<input type="submit" />がクリックされた時）に{handleSubmit(onSubmit)}のonSubmitメソッドが呼ばれるのですが、handleSubmitの引数に設定することで、実行までにバリデーションを実行するようになります。

<form onSubmit={handleSubmit(onSubmit)}>

ここは個人的にですが、onSubmitという名前が2つ出るのがややこしいなと思います…（それぞれは全くの別物です）

ちょっとわかりにくいので、もう少しわかりやすくまとめるとこんな感じです。

これがReact-Hook-Formを使ったバリデーション周りの処理の流れです。

で、バリデーションに引っかかった場合の処理はように書きます。

{errors.exampleRequired && <span>This field is required</span>}

ここの書き方はバリデーションルールを複数設定した場合に変わったり、バリデーションルールの定義方法によっても変わるのですが、基本形として知っておくといいのではないかと思います。（この辺のパターンも別記事にまとめたい）

以上が基本的な使い方ですが、デバッグ用の機能も準備されています。

watch(フィールド名)とすることでフォームに入力された値をリアクティブにチェックすることができます。（動きとしてはonChangeで更新されます）

 console.log(watch("example")) // watch input value by passing the name of it

最後に

フロントエンドでのバリデーション実装でとても便利なライブラリであることがこの記事を書いててより一層感じました。

SPA+APIの構成でアプリのUX向上が進んでいる今、UX向上に一役かってくれるReact-Hook-Formは使えるようになっておいて損はないかと思います。

このライブラリに関してはあと何記事が書こうと思います。