はじめに こんにちは！ 開発 2 部の小林です。 弊社の各プロジェクトでは、React Hook Form (以後 RHF とする) と Zod を用いて、様々な要件のフォームの実装をしています。 今回は、API 側から取得した値に基づいて、text, number, checkbox のように、入力項目を出し分けられる型が動的なフォーム(以後 動的フォーム とする)を作成しました。 この記事では、実装した動的フォームのコード例と、実装の過程で直面した課題+その解決策について紹介します。 はじめに 対象読者 Zod の schema で動的なフォームを表す方法 動的フォームに通常の Zod schema を使用できない理由 動的に schema を設定できる descriminated union 作成した動的フォームの説明 要件 設計 具体的なコード例 Schema Form Field

はじめに こちらはバイセルテクノロジーズ Advent Calendar 2022の 24 日目の記事です。 前日の記事は田中さんの「環境構築をコマンドでまとめてみた」の記事でした。 ​ こんにちは！ テクノロジー戦略本部 開発二部の小林です。 ​ 自分が担当したプロジェクトでは、弊社で初めてバリデーションライブラリとして Zod を使用し、React-Hook-Form × Zod の構成でフォームを作成しました。 ​ 本記事では、実際にプロジェクトで実装した事例を紹介したいと思います。 ​React-Hook-Form × バリデーションライブラリの技術選定に迷っている方がいましたら、ご参考になれば幸いです。 はじめに 対象読者 React-Hook-Form とは Zod とは なぜ React-Hook-Form とバリデーションライブラリを組み合わせるのか バリデーションライブラ