【React Hook Form×Zod×MUI】複数選択+オートコンプリート+型安全なフォームを作ろう！

はじめに この記事で作るフォームのソースコードはこちら↓になります。 【React Hook Form × Zod × MUI】フォームを作ろう！の続編になります。 ソースコードや実装方針などは前編のものを継承しています。 前編の「フォームを作ろう！」では、テキスト入力フォームと選択フォームの実装例を紹介しています。 この記事では、型安全に複数選択可能でオートコンプリートなフォームを実装する方法の例を紹介していきます。 使用技術 TypeScript React Hook Form Zod MUI 作成するフォーム この記事で作成するフォームがこちらになります。 実装 実装方針 実装は以下の流れで進めていきます。 zodを用いてschemaを定義 オートコンプリート単体のコンポーネントを実装 2で作成したコンポーネントにReact Hook Formを組み込んだコンポーネントを実装 3で作