データとコンポーネントの複雑さを整理整頓する
by
Reo Ishiyama
×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 ありがとうございました