どのように?
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
使い方
まず全体のコードを見てましょう。以下はサンプルコードを書いてみました。
'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をインポートしています。
import {useForm} = from "react-hook-form"
上記はTypescriptで書かれているので、それぞれの要素を定義するためtypeで要素を設定しています。
type Input = {
text: string,
}
この場合では、textという値がstringであるべきだということです。
const {
register,
handleSubmit,
formState: { errors },
} = useForm<Input>();
useFrmから使いたいものをそれぞれ取ってきているような形です。今回はregiterとhandleSubmitとformStateというものですね。
register | inputタグをreact-hook-formで使用できるように登録する |
handleSubmit | これはfunctionでありイメージとしてはreact-hook-formの作業が行われるfunctionみたいな感じ |
formState | ここにはreact-hook-formからの情報みたいなもの。今回ではerrorsというものにエラー内容が格納されるようになっている。 |
handleSubmitの使い方
<form onSubmit={handleSubmit(onSubmit)}>
上記の通り、onSubmit引数は成功時に実行されるfunctionと理解していただくといいでしょう。
今回では以下のようにしている。
const onSubmit = (e: Input) => {
console.log(e);
const text = e.text;
console.log(text);
};
最初に、受け取った要素をeとして、そのままコンソールに出力しています。さらに、フォームからのデータを確認するために、e.textを使用して実際の入力内容もコンソールに出力しています。

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