React Hook Form キャッチアップ

React Hook Form：

Reactでフォームを扱おうとすると、毎回useStateで状態を管理して、バリデーションを書いて、エラー表示して…
これ、地味に手間。
React Hook Form（略：RHF）を使えば、それらを最小のコードで綺麗に書けるようになる。

なぜReact Hook Formを使うのか？

状態の自動管理
バリデーションの簡潔化
パフォーマンスに強い（再レンダリングを最小限に）
スケーラブルで実務向き

基本の使い方（流れ）

useForm() でフォームを初期化
register() でフォーム要素に紐づけ
handleSubmit() で送信処理
errors でエラーメッセージ管理

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

tsx
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("username", { required: "ユーザー名は必須です" })} />
  {errors.username && <p>{errors.username.message}</p>}

  <button type="submit">ログイン</button>
</form>

フォームバリデーションをZodで型安全に

Zodを使えば、スキーマ（構造）とバリデーションを同時に定義できる。

tsx
const schema = z.object({
  username: z.string().min(1, "ユーザー名は必須です"),
  password: z.string().min(6, "6文字以上で入力してください"),
});

useFormにスキーマを渡す：

tsx
const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<z.infer<typeof schema>>({
  resolver: zodResolver(schema),
});

型とバリデーションが一体化
補完も効くし、安全に実装できる

RHF × Material-UI の組み合わせ

RHFとMUIを組み合わせるときは、TextFieldに{...register("name")}を渡すだけでOK。

tsx
<TextField
  label="ユーザー名"
  {...register("username")}
  error={!!errors.username}
  helperText={errors.username?.message}
/>

errorでエラーステートを制御
helperTextでエラーメッセージ表示

RHF × Tailwind の組み合わせも◎

Tailwindを使うと、柔軟なデザインをそのまま適用できる：

tsx
<input
  {...register("keyword", { required: "キーワードを入力してください" })}
  className="border p-2 w-full"
/>
{errors.keyword && (
  <p className="text-red-500 text-sm mt-1">{errors.keyword.message}</p>
)}

ログインフォーム・検索フォームの応用

今回のサンプルでは、以下をRHFで実装：

ユーザー名＋パスワード入力
カテゴリー付き検索フォーム
入力チェック＋エラー表示
入力内容の受け取り＆処理
MUI or TailwindのUIで整った見た目

👇 サンプル：RHFログイン・検索フォームアプリ

RHFを使うとこう変わる

項目	useState手書き	React Hook Form
状態管理	1項目ずつ必要	自動でやってくれる
バリデーション	自前で実装	オプションで宣言的に書ける
エラー表示	自前ロジック	`errors`を見るだけ
再レンダリングコスト	多い	少ない（Controllerベース）
スケーラビリティ	面倒になる	大規模でも対応しやすい

まとめ

React Hook Formは、Reactでフォームを扱うベストプラクティス
型安全なバリデーションはZodと組み合わせると最強
MUIやTailwindとも簡単に統合できる
実務で「手書きでフォーム管理」してるなら、すぐにでも乗り換えたいレベル