USB Cケーブル【1M 2本セット】 USB A to USB-C 急速充電 タイプc ケーブル 高耐久 PD対応 断線防止 データ転送 Type-c コード for iPhone 16/15 Pro/Plus/Pro Max、for MacBook Pro/Air/IPad Pro 12.9/11/Air 5th/4th Mini などTypec機種対応
￥999 (2025年4月29日 13:06 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
React Hook Formとは
React Hook Form は、Reactでフォームを扱いやすくするためのライブラリです。
React では通常、フォームの各入力欄を useState で管理し、それを集めてバリデーションして…という処理が必要になります。
React Hook Form を使うと、そういった作業を簡潔に書けるようになります。
具体的には以下のようなことができます：
- 入力値の管理
- バリデーション（必須、桁数、数値制限など）
- エラーメッセージの表示
- フォームの送信処理
Reactとの関係性
React Hook Form の中核は useForm() というカスタムフックです。
これは React の Hook システム（useState や useEffect など）と同じ考え方で、フォームの状態を扱えるようにしたものです。
React の設計に沿っているため、シンプルなコードが書けます
実際にどう使うのか
useForm の初期化
まずは useForm を使って、フォーム全体の管理を準備します。
import { useForm } from "react-hook-form";
const { register, handleSubmit, formState: { errors } } = useForm();
-
register- 各 input に適用して、フォームとして認識させる
-
handleSubmit- フォーム送信時にバリデーションを走らせてから処理を行う
-
errors- バリデーションでエラーになった項目の情報が入る
入力欄の登録
次に、フォームの中にある や に register を使って登録します。
input {...register("title", { required: "タイトルは必須です" })} />
ここで "title" はフィールド名です。オブジェクト形式でバリデーションルールも指定できます。
エラーの表示
バリデーションエラーがある場合は、errors に情報が入ります。
それを使って、該当する入力欄の下にエラー文を表示します。
{errors.title && p>{errors.title.message}p>}
フォーム送信処理
送信時には handleSubmit を使います。
バリデーションが通ったときのみ、引数で指定した関数が呼ばれます。
const onSubmit = (data) => {
console.log(data); // data は各 register() に対応する値のまとまり
};
form onSubmit={handleSubmit(onSubmit)}>
{/* 各 input 要素 */}
button type="submit">送信button>
form>
よく使うバリデーションの例
register("time", {
required: "時間の入力は必須です",
min: {
value: 1,
message: "時間は0以上である必要があります"
}
})
React Hook Form のメリット
- 入力値を useState で個別に管理する必要がない
- バリデーション処理をわかりやすく書ける
- コードが短くなり、読みやすくなる
ちなみに、loadingはサポートしてなかったので今回私はそこだけuseStateを使いました。
参考リンク
ここに貼ってあるコードをコピペして使いました
