next-jsで簡単にフォームを作成する

Next.js
この記事は約6分で読めます。

どのように?

next-jsで簡単にフォームのバリデーションなどがついたものを作成するかを調べました。

そこで出てきたのがReact-hook-formでした。

react-hook-formとは?

React Hook FormはReactにおけるフォームの状態管理ライブラリです。このライブラリはパフォーマンスを重視して開発されており、再レンダリングの最小化を目指しています。また、簡単にフォームバリデーションを設定でき、エラーメッセージの自動表示も可能です。さらに、フォームデータの状態管理が容易で、カスタムコンポーネントとの連携も簡単に行えます。豊富なAPIが提供されており、フォームのバリデーションルールのカスタマイズや、フォームデータのJSON形式での出力も可能です。

使用するメリット

  • パフォーマンスの向上
    • react-hook-formを使用すると、フォームデータの状態を更新するためにuseStateなどを使用する必要がありません。これにより、再レンダリングが最小限に抑えられ、パフォーマンスを向上させる事ができます。
  • 簡単なバリデーションの実装
    • react-hook-formを使用すると、簡単なバリデーションルールを設定するだけで、フォームのバリデーションを自動化することができます。バリデーションエラーが発生した場合には、自動的にエラーメッセージを表示することが可能です。
  • フォームデータの管理が簡単
    • react-hook-formを使用すると、フォームデータの状態を手動で管理する必要がなく、フォームデータの管理が簡単になります。また、フォームデータの状態管理は、useStateなどよりも効率的に行うことができます。
  • カスタムコンポーネントとの連携が簡単
    • react-hook-formはカスタムコンポーネントと簡単に連携できます。これにより、フォームの見た目を自由にカスタムすることが可能です。
  • 豊富なAPI
    • react-hook-formは柔軟なAPIを提供しています。例えば、フォームのバリデーションルールをカスタムマイズしたり、フォームデータをJSON形式で出力したりすることが可能です。さらに、ReactNativeでも使用することができます。

インストール

いんすとーる方法はとても簡単です。npmなどを用いて、以下のコマンドを実行することでインストールすることができます。

npm install react-hook-form

使い方

まず全体のコードを見てましょう。以下はサンプルコードを書いてみました。

TSX
'use client'
import React from 'react'
import { useForm} from "react-hook-form";

type Input = {
    text: string,
}

const App = () => {
    const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm<Input>();
    const onSubmit = (e: Input) => {
        console.log(e);

        const text = e.text;
        console.log(text)
    }
    return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <label htmlFor="text">入力してね</label>
        <input id='text' type="text" {...register('text', {required: 'テキストは必要です'})} />
        <p>{errors.text?.message}</p>
        <button type='submit'>送信</button>
    </form>
  )
}
export default App

まずはimportでreact-hook-formからしようするuseFormをインポートしています。

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

上記はTypescriptで書かれているので、それぞれの要素を定義するためtypeで要素を設定しています。

TSX
type Input = {
    text: string,
}

この場合では、textという値がstringであるべきだということです。

TSX
const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm<Input>();

useFrmから使いたいものをそれぞれ取ってきているような形です。今回はregiterとhandleSubmitとformStateというものですね。

registerinputタグをreact-hook-formで使用できるように登録する
handleSubmitこれはfunctionでありイメージとしてはreact-hook-formの作業が行われるfunctionみたいな感じ
formStateここにはreact-hook-formからの情報みたいなもの。今回ではerrorsというものにエラー内容が格納されるようになっている。
それぞれの解説

handleSubmitの使い方

TSX
<form onSubmit={handleSubmit(onSubmit)}>

上記の通り、onSubmit引数は成功時に実行されるfunctionと理解していただくといいでしょう。
今回では以下のようにしている。

TSX
const onSubmit = (e: Input) => {
  console.log(e);

  const text = e.text;
  console.log(text);
};

最初に、受け取った要素をeとして、そのままコンソールに出力しています。さらに、フォームからのデータを確認するために、e.textを使用して実際の入力内容もコンソールに出力しています。

感想

実際に使ってみたら、バリデーションの設定が非常に簡単で驚きました。手間がかからず、作業がスムーズに進み、時間も節約できた感じがします。さらに、react-hook-form自体がとても使いやすく、自分にとても合っていました。なので、これからも積極的にreact-hook-formを利用していきたいと思います。これなら、自分のプロジェクトもよりスムーズに進められそうで、楽しみです。

コメント

タイトルとURLをコピーしました