データとコンポーネントの複雑さを整理整頓する

Transcript

1. © DMM © DMM CONFIDENTIAL データとコンポーネントの複雑 さを整理整頓する 石山怜生 2025.10.15
2. © DMM 自己紹介 2 • 2024.3月入社 • 大阪出身 • 世界中どこに行っても関西弁は抜けない自信あり • わんこ大好き 石山 怜生
3. © DMM 管理画面のリプレイス
4. © DMM 4 管理画面のリプレイス • モダン化（ PHP → Next.js） • 運用コストの削減 ◦ 発行したクーポンの編集ができない等
5. © DMM 5 お話しすること • クーポンの複雑さ • コンポーネント設計について • データ変換設計について
6. © DMM 6 お話しすること • クーポンの複雑さ • コンポーネント設計について • データ変換設計について
7. © DMM クーポンって実は複雑 ...
8. © DMM 8 クーポンは複雑
9. © DMM 9 クーポンは複雑 • ログイン状態 • 獲得状態 • 値引・割引率表示 • 利用回数 • 先着ご利用回数 • 公開/獲得期限 • etc…
10. © DMM 10 クーポンは複雑 • プレミアム会員限定クーポン ◦ 詳細ボタンの条件だけで仕様書 1ページ ◦ 「DMMプレミアム会員限定」ラベル表示
11. © DMM 11 クーポンは複雑 • 公開期間 • 利用期間 • 獲得/未獲得 • 先着利用上限数 • 1ユーザーあたりの利用可能回数 • 獲得してからX日間だけ利用可能 • プレミアム会員限定 • etc…
12. © DMM 複雑な仕様を コードにそのまま入れたくない
13. © DMM コンポーネント設計 データ設計で回避
14. © DMM 14 お話しすること • クーポンの複雑さ • コンポーネント設計について • データ変換設計について
15. © DMM Presentation/Container パターン
16. © DMM 16 Presentation/Container • 責務の分離を目的とする ◦ React初期からある設計パターン • Hooks登場後も「責務分離」の考え方は今なお有効
17. © DMM 17 Presentation Component • UIの構築が責務 • ドメイン知識に依存しないコンポーネントを組み 合わせて構築 • Container Componentから受け取ったPropsを 元にUIを構築 • コンポーネントに対するイベントハンドラーを設定
18. © DMM 18 Container Component • 外部APIやGlobal Stateからのデータ取得 • データ加工やコンポーネントの出し分け • アプリケーションのビジネスロジックを実装する • Presentation Componentへpropsとして渡す ◦ UI構築に必要な値 ◦ ユーザー操作を処理するためのコールバック関 数
19. © DMM 19 Presentation/Containerパターン
20. © DMM 20 お話しすること • クーポンの複雑さ • コンポーネント設計について • データ変換設計について
21. © DMM Domain ObjectとModel
22. © DMM Domain Object
23. © DMM 23 Domain Objectとは • フロントエンドのためのデータ構造
24. © DMM 24 Domain Objectとは • アプリケーション内部で扱うために正規化された データの形 • APIや外部システムの都合は知らない
25. © DMM Model
26. © DMM 26 Modelとは • ロジックを 1箇所に集約
27. © DMM 27 Modelとは • Domain Object の生成・変換 • APIや外部システムとの変換処理 • 要件に基づいた、共通化できない機能特有の処理
28. © DMM ModelやDomain Objectがない時
29. © DMM 29 ModelやDomain Objectがないとき
30. © DMM 30 ModelやDomain Objectがない時
31. © DMM ModelやDomain Objectがある時
32. © DMM 32 Model • createFromResponse ◦ APIからDomainObjectへの変換 • createFromFormValues ◦ フォームの値（UI）からDomainObjectへの変換 • convertToRequestBody ◦ DomainObjectからリクエストへの変換 • convertToFormValues ◦ DomainObjectからフォームの値へ変換
33. © DMM 33 ModelやDomain Objectがあるとき • 条件分岐や複雑な処理をModelに閉 じられる • テストもメソッドごとに行える • コンポーネントからはgetterを呼ぶだ けで、値にアクセスできる
34. © DMM 34 ModelやDomain Objectがある時 Before After
35. © DMM 35 ModelやDomain Objectがある時
36. © DMM 36 データフロー
37. © DMM おすすめクーポン
38. © DMM 38 大人の事情
39. © DMM ありがとうございました