複雑なフォームに立ち向かう Next.js の技術選定

【Next.js特集】フロントエンド技術選定の裏側 〜直面する技術的課題とは？〜（Findy Job Lunch Talk）
https://findy.connpass.com/event/365033/

Transcript

1. 複雑なフォームに⽴ち向かう Next.js の技術選定 @macchiitaka 2025/09/16
2. 2 ⾃⼰紹介 @macchiitaka 2024年8⽉ IVRy に⼊社 主にWebフロントエンドの機能開発 町永 隆 Engineer
3. IVRとAIであらゆる電話対応を効率化 「アイブリー」 3 プロダクト
4. confidential 今⽇お話しすること 4
5. 5 1. 数年間 Next.js プロジェクトを運⽤する中で 直⾯した課題 2. 新しいプロジェクトで取り組んでいる改善策 3. 特にプロジェクト開始時に決めておくべき設 計判断 4. Next.js に留まらず React 開発全般について
6. confidential 課題：複雑なフォーム 10
7. 前提：toB はフォームが複雑になりやすい - そもそものビジネス要件が複雑 - 最初は⼩さなフォームだったが、次第に巨⼤で複雑な フォームに成⻑ 11
8. React Hook Form 12
10. 悩み：親⼦コンポーネントが相互依存しやすい - React は親から⼦コンポーネントへの単⽅向の依存が基本 - React Hook Form は⼦が親コンポーネントの関⼼事を把握 する設計になりがち - 本来は依存の向きを逆転させて親から⼦への単⽅向の依存 にするのが理想 - フォームの実体からしか型を抽出できない 14
11. 15 Form Input Input Form Input Input 理想 React Hook Form
12. コンポーネントの相互依存 - 相互依存するとコードの複雑度が⼀気に⾼まる - toB の複雑な業務ロジックとコードの複雑さという⼆重の 負担を背負うことになる 😢 16
13. パフォーマンスの現実 - React Hook Form は Uncontrolled で⾼パフォーマンスを謳う - フォームが⼩規模な間は Controlled/Uncontrolled で性能差はほ とんどない - ⼤規模になると⼀⾒優位だが watch などを頻繁に使うため結局重 くなる傾向 - ⻑期的に⾼パフォーマンスを維持するには、変更容易性が重要 - React Hook Form の持ち込む複雑性が変更の余地を削る 17
14. React Hook Form は - フォームが⼤きくなればなるほど⾟くなりがち - 本来ビジネス要件が複雑で⾟いこそライブラリに助けて欲しい - 複雑で⾟い時にライブラリでさらに⾟くなる - 複雑なフォームから React Hook Form を取り除くのは難しい - 複雑性を抱えたまま機能開発することになる - 「みんなが使っているから」で選べるライブラリではない ※ → どうすれば複雑なフォームの変更容易性を維持できるのか？ ※ エコシステムを最⼤限活⽤する観点では⼀定合理的 18
15. Server Actions - RPC のようにサーバーサイドで form の action を処理 - Next.js では v14 から利⽤可能 - 本質的なビジネス要件の複雑さを解決はしない - UX を考慮するとブラウザ上のバリデーションは残り続ける - テスタビリティが低い 19
16. テスタビリティ 複雑なロジックに⽴ち向かうにはテストをどこまで徹底できる かが鍵 - サーバーとブラウザにまたがるテストは実装が困難 - ブラウザのみで完結する場合でも React Components や Hooks にロジックが集まるとまだテストが難しい - フロントエンドではテストコードの⽅が本体のアプリケー ションより書くのが⼤変なケースも多い 20
17. テスタビリティ React の世界から離れて、テスタビリティを向上させる - React の世界の外側のステートとして Zustand を利⽤して ビジネスロジックを React から分離する - React ⾮依存の状態管理システムとしてテストできるよう になる - React の世界と繋ぐこともできる - テストは React の外で、アプリケーションは React の世界 で動作する 21
18. 留意事項 - Global Store を推奨する意図はなく、むしろ Scoped Store を推奨 - Global Store がもたらす複雑性もある - ⽤法⽤量を守って正しくお使いください - Zustand は Scoped Store としても利⽤できる 22
20. まとめ - 複雑な toB フォームで React Hook Form を使うと、コン ポーネント間の依存関係が複雑化し認知負荷が⾼くなる - Server Actions は本質的な複雑さは解決せず、テスタビリ ティが低い - Zustand でビジネスロジックを React から分離し、React ⾮依存でテスト可能な状態管理を構築 24
21. confidential 25 We are Hiring!