- Container component の問題点(例) Container A Presentational C Container B Presentational D 全体構成の説明 • ページごとのコンポーネ ント A, B がある • A, B はそれぞれ子コン ポーネント C を表示する • C は更に D, E を表示す る Presentational E
- Container component の問題点(例) Container A Presentational C Container B Presentational D Presentational D • Presentational D のため のメソッド • A のページと B のページ で少し D メソッドのロジッ クが異なる Presentational E
- Container component の問題点(例) Container A Presentational C Container B Presentational D Presentational D • Presentational D のため のメソッドを A, B で実装 し渡していく Presentational E method D - A method D - B method D
- Container component の問題点(例) Container A Presentational C Container B Presentational D Presentational E • Presentational E のため のメソッド • A のページと B のページ で同じロジック Presentational E
- Container component の問題点(例) Container A Presentational C Container B Presentational D Presentational E • Presentational E のため のメソッドを A, B で実装 し渡していく Presentational E method E method E method E
- Container component の問題点(例) Container A Presentational C Container B Presentational D 全体を見ると • 不必要に処理が分散さ れている Presentational E method E method E method E method D - A method D - B method D
- Container component の問題点(例) Container A Presentational C Container B Presentational D 全体を見ると • 不必要に処理が分散さ れている Presentational E method E method E method E method D - A method D - B method D コンポーネント再設計急務
- 再検討したコンポーネントの役割(例) 全体を見ると • メソッド D も E も Container component A が持つ • 一部 Page 1 と 2 で異な るパラメータとかだけ Page component で管理 する ※ 必要以上の DRY を推奨 しているわけではないです Container A Presentational C Presentational D Presentational E method E method E method D method D Page 1 Page 2 param D - 1 params D - 2