react-hook-form と zod による、基本的なバリデーション付きフォーム - Qiita

はじめに 本記事では、React 用のフォームライブラリ「react-hook-form」と「zod」の使い方を解説します。react-hook-form と zod を使えば、最小限のコードでバリデーション付きフォームを実装できます。 本記事を読むことで、以下のことが学べます。 react-hook-form の基本的な使い方 zod を使った基本的なスキーマ定義とバリデーション refine を使った高度なバリデーション TypeScriptでの記述時の型のポイント ※ コードのみの説明にするため、Water.css による最低限のデザインになっています。 react-hook-form のみでシンプルなフォームを作る まずは、名前とメールアドレスだけの簡単なフォームを作ってみましょう。react-hook-form では、useFormフックを使ってフォームの状態を管理します。 im