React Hook Formがいい感じ！

Contents

はじめに
使ってみる
Material UIと使う
まとめ

はじめに

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

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

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

React Hook Form 公式ドキュメント

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

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

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

やっているのは

useForm()
onSubmitの設定
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