グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



React Hook Form(V7)を使って簡単にバリデーションを実装しよう!

現在担当しているプロジェクトで、フロントエンドのバリデーションを実装することとなり「React Hook Form」を採用しました。
Version7 が最近出たばかりであまり情報が出回っておらずつまずいたので使い方や仕様について紹介していきます。

コードは React と Typescript を使用します。

React Hook Form とは

React Hook Form とは「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」を掲げた入力フォームの管理に特化した React 向けのライブラリです。
状態管理を DOM で行う非制御コンポーネントでフォームの値を扱うことで他よりも高速なフォームライブラリを可能にしています。

ほかのフォームライブラリとの比較

React Hook Form のインストール

[基本編]バリデーション

3 つの入力エリアに、異なる下記条件のバリデーションをかけた例です。

  1. 必須
  2. 5文字以上の文字列
  3. 10以下の数字

実際はこのような動きになります。

コードは下記のようになります。

上から順番に見ていきましょう。

まず最初に useForm で初期化します。

useForm から各メソッドを受け取っています。

  • register : 入力または選択された要素を登録し検証します
  • handleSubmit : 検証が成功するとフォーム内のデータを受け取ります
  • formState: { errors } : バリデーションエラーを受け取ります

useForm の引数にオプションを設定できます。

  • criteriaMode
    • firstError(default) : 上から順番に検証され最初のエラーが返されます
    • all : 全てのエラーが返されます
  • shouldFocusError
    • true : 最初のエラーがフォーカスされます
    • false : フォーカスされなくなります

検証用に handleSubmit で返された値をコンソールに表示しています。

input に入力した値が register に登録された検証内容で検証されます。

register でエラーが発生した場合、その register に設定した key で error から取り出すことができます。{error.key}
エラーが存在しているかどうかでエラーメッセージを表示しています。

[応用編]バリデーション

基本編との違いは

  • submit を押さなくても onChange でバリデーションが行われる
  • 一つのフォームで条件を3つに増やしそれぞれ複数のエラーを表示させる

というところです。下記のような動きになります。

実際に変更されたコードを見ていきましょう。

mode: “onChange”を追加しました。
このようにすることで submit を押さなくてもエラーが表示されるのでリアクティブな感じに実装できます。

上記の実装は一つのフォームで複数の条件とその条件に対応したエラーを表示させるというものです。
types でどの条件のエラーかを判別することができます。

さいごに

2パターンのバリデーションを実装してみました。 他にもさまざまなバリデーションに対応できるように、多くのメソッドが実装されていて拡張性の高いフォームライブラリとなっています。Formik や ReduxForm に比べると新しいライブラリで日本語の記事が少ないこともありますが、勢いのあるライブラリだと思います。 ぜひ使ってみてはいかがでしょうか。

The following two tabs change content below.

Riku-S

事業開発部 web application engineer
高校の情報技術科でc言語やネットワークに関する知識を学ぶ。一時は公務員を目指すが、エンジニアの夢を捨てきれずエンジニアとしてアーティスへ入社。現在、事業開発部としてGo言語を使用した自社サービスの開発に携わっている。 資格:情報検定、ITパスポート試験
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします