こんにちは！今回は、Reactを使ったフォームの管理を超シンプルにできるライブラリ、React Hook Formを使ったフォーム作成を、初心者の方にもわかりやすく解説します！
この記事では、名前を入力して送信するだけの簡単なフォームを一緒に作ってみます。
React Hook Formって何？
React Hook Formは、フォームのデータを簡単に管理できる便利なライブラリです。
特徴：
- コードがスッキリ
少ないコードでフォームを作成可能！ - パフォーマンスが良い
再描画を最小限に抑える仕組みがあり、動きが軽快です。 - エラー処理が簡単
入力ミスや未入力に対してエラーメッセージを簡単に表示できます。
公式サイトはこちら👉 React Hook Form公式ページ
シンプルなフォームを作ってみよう
React Hook Formを使った「名前を入力するだけ」の簡単なフォームを作ります。
以下の手順で進めてみましょう！
1. React Hook Formをインストール
まずは、React Hook Formをターミナルからプロジェクトにインストールします。
npm install react-hook-formこれで準備完了！
2. 実際のコード
次に、名前を入力して送信するだけのシンプルなフォームを作成します。
コード例
import React from "react";
import { useForm } from "react-hook-form";
function SimpleForm() {
// useFormを使ってフォームを管理
const {
register, // 入力欄を登録
handleSubmit, // 送信時の処理を管理
formState: { errors }, // エラーメッセージを管理
} = useForm();
// フォーム送信時の処理
const onSubmit = (data) => {
alert(`こんにちは、${data.name}さん！`);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* 入力欄：名前を入力 */}
<label>名前を入力してください:</label>
<input
{...register("name", { required: "名前を入力してください" })}
placeholder="例: 太郎"
/>
{/* エラーメッセージ */}
{errors.name && <p style={{ color: "red" }}>{errors.name.message}</p>}
{/* 送信ボタン */}
<button type="submit">送信</button>
</form>
);
}
export default SimpleForm;
3. 動作の流れを解説
- 名前を入力
- ユーザーは「名前を入力してください」と書かれた欄に名前を入力します。
- 送信
- 送信ボタンを押すと、入力された名前がアラートで表示されます。
- エラーが表示される場合
- 名前を入力せずに送信ボタンを押すと、「名前を入力してください」というエラーメッセージが赤字で表示されます。
コードのポイントを解説
useFormの使い方
React Hook Formの中心となる関数で、フォームの機能を提供します。register
フォームの入力欄を管理するために使います。handleSubmit
フォームが送信されたときに呼ばれる関数です。- エラーメッセージの管理
入力欄に問題がある場合、errorsオブジェクトを使って簡単にエラーメッセージを表示できます。
4. もっと実践的な機能
入力値に制限を追加してみよう
以下のコードでは、「名前の文字数は10文字以内」というルールを追加しています。
<input
{...register("name", {
required: "名前を入力してください",
maxLength: {
value: 10,
message: "名前は10文字以内で入力してください",
},
})}
placeholder="例: 太郎"
/>
{errors.name && <p style={{ color: "red" }}>{errors.name.message}</p>}これで、名前が10文字を超えた場合にもエラーメッセージが表示されます。
おわりに
React Hook Formは、初心者でも簡単にフォームを作成できるライブラリです。今回のようなシンプルなフォームから始めて、徐々に複雑なフォームにも挑戦してみてください！
公式ドキュメントにはさらに詳しい情報が載っているので、ぜひチェックしてみてください👉 React Hook Form公式ページ
