【React Hook Form】+【zod】環境構築

はじめに

この記事は【React Hook Form】と【zod】を使ったフォームの作り方の備忘録である。

react-hook-form公式ドキュメント
zod公式ドキュメント

導入方法

以下コマンドを実行する

npm install react-hook-form
npm install @hookform/resolvers zod

Zodとは

Zodは、TypeScript向けに設計されたスキーマバリデーションライブラリである。
Zodを使用すると、オブジェクトや配列などのデータ構造を型安全に定義し、そのデータが期待通りの形式であるかを検証できる。

Zodの主な特徴としては、次の点が挙げられる。

• シンプルなAPI: Zodは直感的なAPIを提供し、TypeScriptユーザーに馴染みやすい設計になっている。
• 型推論のサポート: TypeScriptの型推論を活用することで、型定義とバリデーションを一元管理できる。
• 柔軟なバリデーション: 基本的な型チェックから、カスタムバリデーションやネストされたオブジェクトの検証まで幅広く対応。