Zod + React Hook Form で動的なデータでバリデーションを実装する - asoview! Tech Blog

こんにちは。 アソビューでフロントエンドエンジニアをやっています、白井です。 今回はフロントエンドをやっていく上で避けられないものの一つである、フォームバリデーションのお話です。 フォームバリデーションライブラリの React Hook Form と、バリデーションスキーマライブラリ Zod の組み合わせは扱いやすく便利なのですが、 バリデーションで使っているデータを後から動的に変化させたいようなシーンでは一手間加える必要があったため、今回はその方法を紹介したいと思います。 やりたいこと 実装方法の検討 ① Zod のスキーマとは別にバリデーションを行う ② React Hook Form にバリデーションに必要な情報を全て持たせる ③ React Hook Form では必要最低限の情報のみを持たせ、バリデーションで利用する動的なデータを zod のスキーマに渡す 実際の使用例 動的バリ