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

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

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

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

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

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

目次

React-Hook-Formとは

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

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

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

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

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

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

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

  • フロントエンド:入力補助、UX向上等
  • バックエンド:システムエラー対策、データの整合性等

導入方法

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

# npm
npm install react-hook-form

# yarn
yarn add react-hook-form

これだけです。簡単。

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

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>
  );
}

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

まずは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つ出るのがややこしいなと思います…(それぞれは全くの別物です)

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

STEP
formのonSubmitイベントが発火する

送信ボタン(<input type="submit" />)をクリックすることでformタグのonSubmitイベントが発火する

STEP
バリデーション実行

{handleSubmit(onSubmit)}により、引数のonSubmitメソッド(APIと連携したアプリであればAPIの入力内容をPOSTする処理がベター)実行前に...register()で設定したバリデーションが実行される

※バリデーションで引っかかるとonSubmitメソッドは実行されない

STEP
バリーションをクリアするとonSubmitメソッドを実行

バリデーションをクリアするとhandleSubmitの引数の中のメソッドに処理が移る

これが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は使えるようになっておいて損はないかと思います。

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

Webエンジニア←KHI(プラント事業の技術職)←大学院(機械工学)

PHP/Laravel/TypeScript/React/Next.js(Vue.js/Nuxt.jsは少し)
バックエンド歴の方が長いです。

神戸で「つながる勉強会」を運営↓
https://tsunagaru-kobe.connpass.com/

コメント

コメントする

目次
閉じる