React Hook Formでフォームを実装してみる。

今回は「React Hook Form」というReactでいい感じにフォームを作ることができるライブラリを見つけたので、これを使って実際にフォームを作成してみたいと思います。

公式ページはこちらから
https://react-hook-form.com/jp/get-started

zennのこの記事がわかりやすかったので参考にしました。
https://zenn.dev/nus3/articles/73f6832da17f5406d4af#react-hook-form

この動画もいい感じでした。
https://www.youtube.com/watch?v=bU_eq8qyjic

上の動画と同じ人がReact Hook Formの再生リストを作ってくれてたっぽいのでメモとして置いておきます。
https://www.youtube.com/playlist?list=PLIvCYh5AD3HwEpMuJS_cds_8kxMlaIMD-

インストール

今回は実践的にNext.jsのプロジェクトにreact-hook-formをインストールしてフォームを実際に作成してみたいと思います。
tailwindcss(jitモード)は既に有効化済みです。

まずはパッケージをインストールします。
バージョンは安定板の最新バージョンです。

npm install react-hook-form@7.13.0

実際に使っていく

useFormに基本的な機能がたくさん入ってるみたいなのでこれをimport。

import { useForm } from "react-hook-form"

機能をいくつか取り出して以下のような実装にしてみました。

export const Form = () => {
  //機能を分割代入でget
  const { register, handleSubmit } = useForm()

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    //"handleSubmit "は、"onSubmit "を呼び出す前に入力を検証します
    <form
      onSubmit={handleSubmit(onSubmit)}
      class="bg-gray-300 w-screen h-screen flex flex-col items-center justify-center space-y-4"
    >
      <input placeholder="Email" {...register("email")} />
      <input placeholder="Password" {...register("password")} />
      <input type="submit" />
    </form>
  )
}

見た目はこんな感じになってます。

registerとhandleSubmit

ここでuseFormからとってきてるregisterとhandleSubmitをいい感じに使うと、フォームに入力されたデータをめちゃめちゃ簡単に取得できます。

const { register, handleSubmit } = useForm()

registerはinputタグ内で使ってます。
これを指定することで入力された値を簡単に取得することができます。
引数に与えた文字列はそのままname属性になる感じですね。

<input placeholder="Email" {...register("email")} />
<input placeholder="Password" {...register("password")} />

handleSubmitはformタグのonSubmitイベントに使ってます。入力された値の検証とかの役割があるっぽいです。

<form
  onSubmit={handleSubmit(onSubmit)}
  className="bg-gray-300 w-screen h-screen flex flex-col items-center justify-center space-y-4"
>

handleSubmitのコールバック関数として渡しているonSubmitはこんな実装になってます。

const onSubmit = (data) => {
  console.log(data)
}

handleSbmitによって検証されたフォームの入力値をコンソールに出力するよみたいな実装ですね。
実際にフォームに何か入力して送信してみましょう。

emailに「test@test」
passwordに「123123」と入力して送信ボタンを押してみます。


するとコンソールにフォームに入力した実際の値が取得できました。


あとはこれにエラー処理を追加したりバリデーションを追加したりしたらいい感じになりそうですね。
次は実際にformにバリデーションをかけてみます。

バリデーションをかけてみる

パスワードのregisterの引数に以下のように追記しました。

<input placeholder="Password" {...register("password", { required: true, minLength: 8 })} />

「required: true」というのは、「この値は入力必須ですよ」という意味です。
「minLength: 8」というのは、「この値は8文字以上入力してくださいね」という意味です。

先ほどと同じように、
emailに「test@test」
passwordに「123123」と入力して送信ボタンを押してみます。


コンソールには何も表示されませんでした。


試しにpasswordを8文字にして送信してみるときちんとコンソールに表示されました。
きちんとpasswordに8文字のバリデーションが適用されている証拠ですね。


しかしこのままだとどこでエラーが起きているのかがわかりにくいので、バリデーションエラーメッセージを表示できるようにしてみましょう。

エラーメッセージを表示してみる

新たにformState: {errors}をuseFormからとってきます。
エラーメッセージを表示したい時はこれを使います。

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm()

errosを使って実際にバリデーションエラーメッセージを表示してみましょう。
パスワード入力欄の下に以下を追記しました。

<input placeholder="Password" {...register("password", { required: true, minLength: 8 })} />
//以下を追記
{errors.password && "Password in valid"}

ショートサーキット評価ですね。
erros.passwordがtrueの場合、つまりバリデーションエラーに引っかかっている場合、右の "Password in vaild" という文字列を返します。

試しにもう一度フォームを送信してみましょう。
emailに「test@test」
passwordに「123123」と入力して送信ボタンを押してみます。


メッセージが表示されました。


このエラーメッセージは動的に変化します。
つまり以下のように8文字以上入力すると消えますし、


8文字以下になればまた出てきます。


いい感じですね。

ちなみに引っかかったバリデーションによって表示するエラーメッセージを振り分けたい場合は以下のように書くこともできます。

<input
  placeholder="Password"
  {...register("password", {
    required: "Password required",
    minLength: { value: 8, message: "Password to short" },
  })}
/>
{errors.password && <p>{errors.password.message}</p>}

何も入力せずにフォームを送信すると「Password required」が表示され、


1文字だけ入力してフォームを送信すると「Password to short」が表示されました。


こっちの方がよりわかりやすくていいですね。

まとめ

今日はReact Hook Formを使用してバリデーションをかけたりエラーメッセージを表示したりしてみました。
React Hook Formにはまだまだいろんな機能がありそうなので、今後ももっと勉強していきたいと思いました。
最後までごらんいただきありがとうございました〜！