Next.jsのプロダクトでzodをReact Hook Formなしで使った話

Transcript

1. Next.jsのプロダクトで zodをReact Hook Formなしで使った話 tenshin_y X: @ama_O255
2. 自己紹介 名前：矢倉 天心 会社：テテマーチ株式会社 2024/04〜 SINIS for Instagramの開発にフルサイクルエンジニアとして参加 前職ではEdTechのベンチャーで、社内専用の在庫や顧客管理の台帳Webア プリを開発してました X: @ama_O255
3. Zodとは スキーマ宣言とデータ検証ライブラリ 型安全なデータ構造と検証 公式HP：https://zod.dev/ React Hook Formとは 不要な再レンダリングを抑えて 高パフォーマンスなフォームの実現 容易なバリデーション連携 公式HP：https://www.react-hook-form.com/
4. Next.js(React)でzodを使おうとすると 十中八九React Hook Form(RHF)も使う 記事が出てくる
5. 本題 RHFを使わずに、zodを使う意思決定や要件定義の事例紹介がメイン RHFは不要！と強く主張するものではないことにご留意ください そんな考え方やケースもあるんだな〜と思って聞いてください
6. 背景 SINIS for Instagramについて Instagramの運用成果を見るダッシュボード 基本的に、入力のほとんどない見るアプリケーション 昨年末 2024/11 ~ Instagramのサードパーティ投稿クライアントの機能をやるぞ！ となり、リリース５年目にして初の作成・更新系の画面を作るこ とになる 環境 フロントエンドエンジニアの経歴を持つのは自分だけ フォームに関するライブラリはMUI程度
7. 考えたこと 検索でよく出てくる構成にするか、プロダクトの依存関係を１個減らすか 1. RHFで得られる恩恵は今回の開発で必要条件なのか 2.
8. RHFを採用した場合のチームへのメリデメ検討 メリット デメリット 記事はいっぱいあるから、もし自分が見れない時でも いい感じにキャッチアップして実装できそう(?) 頻繁な再描画を防ぐことによるパフォーマンス向上 ライブラリを追加するほど、ガーデニングの管理対象 は増える RHFのマイナーアップデートで不具合混入や挙動変 更が入って悩んだ前社での記憶 毎週のガーデニングと週１のスプリントでそのコス ト払える？ インタラクティブなエラーの表示は要件としてマスト ではない Instagramの性質上、画像や動画の入力がほぼ必須 だが、watchでなんかワークアラウンドが必要だっ た覚えがある
9. 得られる恩恵を 入れるデメリットが上回ったのでは？
10. なら、入れなくて良いのでは？ zodの使い方を自分が提示すれば
11. PowerとAIは全てを解決する
12. ふりかえり Good 入れて困ったという体験はないが少なくともRHF起因のトラブルにチームは遭遇せずに済んでいる 1. 依存関係で困ることは特にない 2. 要件の確認があったことで、不具合として連絡が来てはいない 3. More 思い切った選択のため、これから新規に入ってくるメンバーのキャッチアップの難易度 1. 今後、要件が変わったときや既存機能と要件が違う機能が出てきた時のプロダクトの複雑具合 2.
13. ご清聴ありがとうございました