Webプログラミング

React Hook Formがいい感じ!

はじめに

ReactでWebアプリケーションを作る際に自力でフォームを作成するのは、現実的に考えるとやらない方がいいです。自力でフォーム用の状態管理をしたり、バリデーションを細かく作り込むのは労力が必要ですし、バグの温床になります。

そこで多くの方が外部ライブラリを使用していると思います。Reactの公式ドキュメントではFormikが紹介されていますし、React+Redux環境ではRedux-Formが人気のようです。

React Hooksを使うのであれば、React Hook Formがおすすめです

React Hook Form 公式ドキュメント

公式ドキュメントでは、前述のライブラリと比較しても少ないコード量で書ける+軽量ということをアピールしています。

GitHubのスター数は執筆時点で約6400と少ないですが、日本語のドキュメントがありますし、公式ドキュメントのデザインからしてもイケてる雰囲気がします!(適当)

使ってみる

公式ドキュメントのForm Builderタブからグラフィカルにフォームを作成し、コードを生成することができますので使ってみます。

フォームビルダーの画像

以下のコードが生成出来ました。

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

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="title" name="title" ref={register({required: true, maxLength: 20})} />
      <input type="text" placeholder="body" name="body" ref={register({required: true})} />
      <input type="datetime" placeholder="date" name="date" ref={register({required: true})} />

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

やっているのは

  1. useForm()
  2. onSubmitの設定
  3. inputタグでrefの設定

これだけです。バリデーションは以下のように設定します。

ref={register({required: true, maxLength: 20})}

yarn startで実行すると、

このような殺風景なフォームが表示されます。何もcssを適用していないのでこれでOKです。もうこの段階でformの値を取得することもバリデーションも動いています。

フォームに入力し、submitするとコンソールにデータが表示されます。onSubmitのconsole.log出力ですね。

バリデーションもちゃんと動いていて、bodyにrequiredが指定されているので、空欄にするとエラーメッセージが確認できます。エラーメッセージは

const { register, handleSubmit, errors } = useForm();

と宣言した中のerrorsという変数に自動的にエラーメッセージが入りますので、console.logで確認すると、

errorsにオブジェクトが入っています。messageに値が入っていませんが、宣言時にエラーメッセージを指定することも出来ます。

<input 
    type="text"
    placeholder="body"
    name="body"
    ref={register({ required: "本文は必須項目です。" })}
/>

このようにrequiredキーのvalueとして文字列を指定すれば、先程のerrors変数に指定した文字列が入ります。

 

Material UIと使う

このままでは見栄えが悪いのでデザインを適用します。

React Hook FormはMaterial UIとも簡単に併用することができます。

Material UIのコンポーネントにinputRefを指定すればReact Hook Formでコントロール可能です。

<TextField
      label="タイトル(必須)"
      type="text"
      name="title"
      fullWidth
      margin="normal"
      inputRef={register({ required: true, maxLength: 20 })}
      error={Boolean(errors.title)}
      helperText={errors.title && "タイトルは20文字以内にして下さい。"}
/>

errorとhelperTextはバリデーションにかかったときに、エラーを表示するためのものです。

Material UI + RHF

このように綺麗に表示できました。バリデーションもきちんと動きますし、エラーメッセージも綺麗に表示されています。

完成Gif

ちょっと見づらいかもしれませんが、Material UIのデザインで動いており、フォームの値やバリデーションがきちんと動いていると確認できると思います。

ソースコードはこちらから↓

(*追記: axiosを使用するようコードを変更しました。詳細はこちら)

React+axios+Material UIでスピナーとメッセージを表示する

今回はReact + Material UIで通信中にスピナーを表示し、通信終了時にメッセージを表示するプログラムを作成します。非同期通信にはaxiosを利用します。   こちらの記事でRe ...

続きを見る

注意ポイント

Material UIの中でもセレクトボックスなど一部のコンポーネントはReact Hook Formが使えないことがあります。その場合はReact HooksのuseStateやuseEffectなどで補う必要があります。

 

まとめ

React Hook Formを紹介しました。

基本の使い方も簡単ですし、Material UIなどUIライブラリとも簡単に併用することができるので気に入っています。

とにかく公式ドキュメントがすごくいい感じなので見てみてほしいです。

この記事は参考になりましたか?

下記のボタンよりアンケートにご協力お願いします。

-Webプログラミング
-,

© 2020 エンジニアの本棚