(React)コンテナー・プレゼンテーションパターンの設計

登壇資料:
エンジニア達の「完全に理解した」Talk　#57
https://easy2.connpass.com/event/329425/

(React)コンテナー・プレゼンテーションパターンの設計:
https://zenn.dev/rsugi/articles/1c200186e3a0e3

Transcript

1. (React.js) コンテナープレゼンテーションパターンの 設計 コンテナープレゼンテーションパターンの設計 r-sugi 1
2. 自己紹介 フリーランスエンジニア 5年目 コンテナープレゼンテーションパターンの設計 r-sugi 2
3. 今回のアジェンダ フロントエンドの複雑さにどう立ち向かっていくか？ 解決案を 1つ提示するので、みんなであれこれ議論したい コンテナープレゼンテーションパターンの設計 r-sugi 3
4. フロントエンド設計手法、枯れない問題 (1/2) Class使うか使わないか？ (使わないなら )どうやって、データと振る舞いを集約させるか？ レイヤー分けるか？ (分けるなら )その粒度は？ D/I使うか使わないか？ (使わないなら )テストするとき、困らない？ コンテナープレゼンテーションパターンの設計 r-sugi 4
5. フロントエンド設計手法、枯れない問題 (2/2) 移り変わりが激しい バックエンドほど設計手法が枯れない 治安が良くないから話し合わない (?) 登壇内容を一部切り取って、 「これはアンチパターン！」とか Xで晒された 駆け出しエンジニアが多い バックエンドの設計手法を理解した上で、フロントエンドの設計について話 し合う母数が少ない 他の職種と比べて単価が低い 優秀な人は単価が高い職種 (例 : バックエンド , インフラ , DevOps)へ移動 (?) コンテナープレゼンテーションパターンの設計 r-sugi 5
6. 投稿済の記事 コンテナープレゼンテーションパターンの設計 r-sugi 6
7. NG: hooksに切り出すだけ import React from "react"; import useDogImages from "./useDogImages"; export default function DogImages() { const dogs = useDogImages(); return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />); } コンテナープレゼンテーションパターンの設計 r-sugi 7
8. ハイライト (1/3) ドメインモデルへ変換してビューに渡す コンテナープレゼンテーションパターンの設計 r-sugi 8
9. コンテナープレゼンテーションパターンの設計 r-sugi 9
10. ハイライト (2/3) コンテナーからプレゼンテーション（ルート）に propsで渡す コンテナープレゼンテーションパターンの設計 r-sugi 10
11. コンテナープレゼンテーションパターンの設計 r-sugi 11
12. ハイライト (3/3) プレゼンテーション（ルート）から他プレゼンテーションに propsで渡す コンテナープレゼンテーションパターンの設計 r-sugi 12
13. コンテナープレゼンテーションパターンの設計 r-sugi 13
14. NGパターン コンテナープレゼンテーションパターンの設計 r-sugi 14
15. コンテナープレゼンテーションパターンの設計 r-sugi 15
16. まとめ モデルについて フロントエンドのアプリケーション用のモデルを定義する I/Fについて コンテナー・プレゼンテーション間の I/Fを厳密に定義する (EventType) propsで型の再定義をしない（例 :callback関数） モデルの一部のプロパティのみを渡さない（例 :idだけ渡す） コンテナープレゼンテーションパターンの設計 r-sugi 16