(React.js) コンテナープレゼンテーションパターンの 設計 コンテナープレゼンテーションパターンの設計 r-sugi 1 

自己紹介 フリーランスエンジニア 5年目 コンテナープレゼンテーションパターンの設計 r-sugi 2 

今回のアジェンダ フロントエンドの複雑さにどう立ち向かっていくか？ 解決案を 1つ提示するので、みんなであれこれ議論したい コンテナープレゼンテーションパターンの設計 r-sugi 3 

フロントエンド設計手法、枯れない問題 (1/2) Class使うか使わないか？ (使わないなら )どうやって、データと振る舞いを集約させるか？ レイヤー分けるか？ (分けるなら )その粒度は？ D/I使うか使わないか？ (使わないなら )テストするとき、困らない？ コンテナープレゼンテーションパターンの設計 r-sugi 4 

フロントエンド設計手法、枯れない問題 (2/2) 移り変わりが激しい バックエンドほど設計手法が枯れない 治安が良くないから話し合わない (?) 登壇内容を一部切り取って、 「これはアンチパターン！」とか Xで晒された 駆け出しエンジニアが多い バックエンドの設計手法を理解した上で、フロントエンドの設計について話 し合う母数が少ない 他の職種と比べて単価が低い 優秀な人は単価が高い職種 (例 : バックエンド , インフラ , DevOps)へ移動 (?) コンテナープレゼンテーションパターンの設計 r-sugi 5 

投稿済の記事 コンテナープレゼンテーションパターンの設計 r-sugi 6 

NG: hooksに切り出すだけ import React from "react"; import useDogImages from "./useDogImages"; export default function DogImages() { const dogs = useDogImages(); return dogs.map((dog, i) => ); } コンテナープレゼンテーションパターンの設計 r-sugi 7 

ハイライト (1/3) ドメインモデルへ変換してビューに渡す コンテナープレゼンテーションパターンの設計 r-sugi 8 

コンテナープレゼンテーションパターンの設計 r-sugi 9 

ハイライト (2/3) コンテナーからプレゼンテーション（ルート）に propsで渡す コンテナープレゼンテーションパターンの設計 r-sugi 10 

コンテナープレゼンテーションパターンの設計 r-sugi 11 

ハイライト (3/3) プレゼンテーション（ルート）から他プレゼンテーションに propsで渡す コンテナープレゼンテーションパターンの設計 r-sugi 12 

コンテナープレゼンテーションパターンの設計 r-sugi 13 

NGパターン コンテナープレゼンテーションパターンの設計 r-sugi 14 

コンテナープレゼンテーションパターンの設計 r-sugi 15 

まとめ モデルについて フロントエンドのアプリケーション用のモデルを定義する I/Fについて コンテナー・プレゼンテーション間の I/Fを厳密に定義する (EventType) propsで型の再定義をしない（例 :callback関数） モデルの一部のプロパティのみを渡さない（例 :idだけ渡す） コンテナープレゼンテーションパターンの設計 r-sugi 16