Slide 1

Slide 1 text

複雑なフォームに⽴ち向かう Next.js の技術選定 @macchiitaka 2025/09/16

Slide 2

Slide 2 text

2 ⾃⼰紹介 @macchiitaka 2024年8⽉ IVRy に⼊社 主にWebフロントエンドの機能開発 町永 隆 Engineer

Slide 3

Slide 3 text

IVRとAIであらゆる電話対応を効率化 「アイブリー」 3 プロダクト

Slide 4

Slide 4 text

confidential 今⽇お話しすること 4

Slide 5

Slide 5 text

5 1. 数年間 Next.js プロジェクトを運⽤する中で 直⾯した課題 2. 新しいプロジェクトで取り組んでいる改善策 3. 特にプロジェクト開始時に決めておくべき設 計判断 4. Next.js に留まらず React 開発全般について

Slide 6

Slide 6 text

confidential 課題:複雑なフォーム 10

Slide 7

Slide 7 text

前提:toB はフォームが複雑になりやすい - そもそものビジネス要件が複雑 - 最初は⼩さなフォームだったが、次第に巨⼤で複雑な フォームに成⻑ 11

Slide 8

Slide 8 text

React Hook Form 12

Slide 9

Slide 9 text

13

Slide 10

Slide 10 text

悩み:親⼦コンポーネントが相互依存しやすい - React は親から⼦コンポーネントへの単⽅向の依存が基本 - React Hook Form は⼦が親コンポーネントの関⼼事を把握 する設計になりがち - 本来は依存の向きを逆転させて親から⼦への単⽅向の依存 にするのが理想 - フォームの実体からしか型を抽出できない 14

Slide 11

Slide 11 text

15 Form Input Input Form Input Input 理想 React Hook Form

Slide 12

Slide 12 text

コンポーネントの相互依存 - 相互依存するとコードの複雑度が⼀気に⾼まる - toB の複雑な業務ロジックとコードの複雑さという⼆重の 負担を背負うことになる 😢 16

Slide 13

Slide 13 text

パフォーマンスの現実 - React Hook Form は Uncontrolled で⾼パフォーマンスを謳う - フォームが⼩規模な間は Controlled/Uncontrolled で性能差はほ とんどない - ⼤規模になると⼀⾒優位だが watch などを頻繁に使うため結局重 くなる傾向 - ⻑期的に⾼パフォーマンスを維持するには、変更容易性が重要 - React Hook Form の持ち込む複雑性が変更の余地を削る 17

Slide 14

Slide 14 text

React Hook Form は - フォームが⼤きくなればなるほど⾟くなりがち - 本来ビジネス要件が複雑で⾟いこそライブラリに助けて欲しい - 複雑で⾟い時にライブラリでさらに⾟くなる - 複雑なフォームから React Hook Form を取り除くのは難しい - 複雑性を抱えたまま機能開発することになる - 「みんなが使っているから」で選べるライブラリではない ※ → どうすれば複雑なフォームの変更容易性を維持できるのか? ※ エコシステムを最⼤限活⽤する観点では⼀定合理的 18

Slide 15

Slide 15 text

Server Actions - RPC のようにサーバーサイドで form の action を処理 - Next.js では v14 から利⽤可能 - 本質的なビジネス要件の複雑さを解決はしない - UX を考慮するとブラウザ上のバリデーションは残り続ける - テスタビリティが低い 19

Slide 16

Slide 16 text

テスタビリティ 複雑なロジックに⽴ち向かうにはテストをどこまで徹底できる かが鍵 - サーバーとブラウザにまたがるテストは実装が困難 - ブラウザのみで完結する場合でも React Components や Hooks にロジックが集まるとまだテストが難しい - フロントエンドではテストコードの⽅が本体のアプリケー ションより書くのが⼤変なケースも多い 20

Slide 17

Slide 17 text

テスタビリティ React の世界から離れて、テスタビリティを向上させる - React の世界の外側のステートとして Zustand を利⽤して ビジネスロジックを React から分離する - React ⾮依存の状態管理システムとしてテストできるよう になる - React の世界と繋ぐこともできる - テストは React の外で、アプリケーションは React の世界 で動作する 21

Slide 18

Slide 18 text

留意事項 - Global Store を推奨する意図はなく、むしろ Scoped Store を推奨 - Global Store がもたらす複雑性もある - ⽤法⽤量を守って正しくお使いください - Zustand は Scoped Store としても利⽤できる 22

Slide 19

Slide 19 text

23

Slide 20

Slide 20 text

まとめ - 複雑な toB フォームで React Hook Form を使うと、コン ポーネント間の依存関係が複雑化し認知負荷が⾼くなる - Server Actions は本質的な複雑さは解決せず、テスタビリ ティが低い - Zustand でビジネスロジックを React から分離し、React ⾮依存でテスト可能な状態管理を構築 24

Slide 21

Slide 21 text

confidential 25 We are Hiring!