Slide 1

Slide 1 text

© DMM © DMM CONFIDENTIAL データとコンポーネントの複雑 さを整理整頓する 石山怜生 2025.10.15

Slide 2

Slide 2 text

© DMM 自己紹介 2 • 2024.3月入社 • 大阪出身 • 世界中どこに行っても関西弁は抜けない自信あり • わんこ大好き 石山 怜生

Slide 3

Slide 3 text

© DMM 管理画面のリプレイス

Slide 4

Slide 4 text

© DMM 4 管理画面のリプレイス ● モダン化( PHP → Next.js) ● 運用コストの削減 ○ 発行したクーポンの編集ができない等

Slide 5

Slide 5 text

© DMM 5 お話しすること ● クーポンの複雑さ ● コンポーネント設計について ● データ変換設計について

Slide 6

Slide 6 text

© DMM 6 お話しすること ● クーポンの複雑さ ● コンポーネント設計について ● データ変換設計について

Slide 7

Slide 7 text

© DMM クーポンって実は複雑 ...

Slide 8

Slide 8 text

© DMM 8 クーポンは複雑

Slide 9

Slide 9 text

© DMM 9 クーポンは複雑 ● ログイン状態 ● 獲得状態 ● 値引・割引率表示 ● 利用回数 ● 先着ご利用回数 ● 公開/獲得期限 ● etc…

Slide 10

Slide 10 text

© DMM 10 クーポンは複雑 ● プレミアム会員限定クーポン ○ 詳細ボタンの条件だけで仕様書 1ページ ○ 「DMMプレミアム会員限定」ラベル表示

Slide 11

Slide 11 text

© DMM 11 クーポンは複雑 ● 公開期間 ● 利用期間 ● 獲得/未獲得 ● 先着利用上限数 ● 1ユーザーあたりの利用可能回数 ● 獲得してからX日間だけ利用可能 ● プレミアム会員限定 ● etc…

Slide 12

Slide 12 text

© DMM 複雑な仕様を コードにそのまま入れたくない

Slide 13

Slide 13 text

© DMM コンポーネント設計 データ設計で回避

Slide 14

Slide 14 text

© DMM 14 お話しすること ● クーポンの複雑さ ● コンポーネント設計について ● データ変換設計について

Slide 15

Slide 15 text

© DMM Presentation/Container パターン

Slide 16

Slide 16 text

© DMM 16 Presentation/Container ● 責務の分離を目的とする ○ React初期からある設計パターン ● Hooks登場後も「責務分離」の考え方は今なお有効

Slide 17

Slide 17 text

© DMM 17 Presentation Component ● UIの構築が責務 ● ドメイン知識に依存しないコンポーネントを組み 合わせて構築 ● Container Componentから受け取ったPropsを 元にUIを構築 ● コンポーネントに対するイベントハンドラーを設定

Slide 18

Slide 18 text

© DMM 18 Container Component ● 外部APIやGlobal Stateからのデータ取得 ● データ加工やコンポーネントの出し分け ● アプリケーションのビジネスロジックを実装する ● Presentation Componentへpropsとして渡す ○ UI構築に必要な値 ○ ユーザー操作を処理するためのコールバック関 数

Slide 19

Slide 19 text

© DMM 19 Presentation/Containerパターン

Slide 20

Slide 20 text

© DMM 20 お話しすること ● クーポンの複雑さ ● コンポーネント設計について ● データ変換設計について

Slide 21

Slide 21 text

© DMM Domain ObjectとModel

Slide 22

Slide 22 text

© DMM Domain Object

Slide 23

Slide 23 text

© DMM 23 Domain Objectとは ● フロントエンドのためのデータ構造

Slide 24

Slide 24 text

© DMM 24 Domain Objectとは ● アプリケーション内部で扱うために正規化された データの形 ● APIや外部システムの都合は知らない

Slide 25

Slide 25 text

© DMM Model

Slide 26

Slide 26 text

© DMM 26 Modelとは ● ロジックを 1箇所に集約

Slide 27

Slide 27 text

© DMM 27 Modelとは ● Domain Object の生成・変換 ● APIや外部システムとの変換処理 ● 要件に基づいた、共通化できない機能特有の処理

Slide 28

Slide 28 text

© DMM ModelやDomain Objectがない時

Slide 29

Slide 29 text

© DMM 29 ModelやDomain Objectがないとき

Slide 30

Slide 30 text

© DMM 30 ModelやDomain Objectがない時

Slide 31

Slide 31 text

© DMM ModelやDomain Objectがある時

Slide 32

Slide 32 text

© DMM 32 Model ● createFromResponse ○ APIからDomainObjectへの変換 ● createFromFormValues ○ フォームの値(UI)からDomainObjectへの変換 ● convertToRequestBody ○ DomainObjectからリクエストへの変換 ● convertToFormValues ○ DomainObjectからフォームの値へ変換

Slide 33

Slide 33 text

© DMM 33 ModelやDomain Objectがあるとき ● 条件分岐や複雑な処理をModelに閉 じられる ● テストもメソッドごとに行える ● コンポーネントからはgetterを呼ぶだ けで、値にアクセスできる

Slide 34

Slide 34 text

© DMM 34 ModelやDomain Objectがある時 Before After

Slide 35

Slide 35 text

© DMM 35 ModelやDomain Objectがある時

Slide 36

Slide 36 text

© DMM 36 データフロー

Slide 37

Slide 37 text

© DMM おすすめクーポン

Slide 38

Slide 38 text

© DMM 38 大人の事情

Slide 39

Slide 39 text

© DMM ありがとうございました