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