フォームを作成する場合、最近は個人的には react-hook-form と zod を使用して実装することが多い。 この2つの組み合わせに関する解説は他の方の記事に譲る。 こんな感じで、簡単にスキーマの定義とバリデーションの設定ができて、フォームの各フィールドと組み合わせることが可能である。 const schema = z.object({ username: z .string() .min(3, "3文字以上で入力してください") .max(10, "10文字以上で入力してください"), email: z.string().email("メールアドレスの形式で入力してください"), favoriteNumber: z .number() .max(10, "10以下の数字を入力してください") .min(1, "1以上の数字を入力してください"), }); const Form =