フロントエンドの設計で大事なこと

Transcript

1. 砂川 大地 フロントエンドの 設計で大事なこと フロント勉強会
2. D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun
3. D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun
4. D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun 見た目と振る舞い 「ユーザーアイコン」と「メニュー表示」
5. D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun 見た目と振る舞い 「ユーザーアイコン」と「メニュー表示」
6. UIとビジネスロジックの分離 Before After 商品一覧の例 DS Amazun
7. 見た目と振る舞いの分離 Before After アカウントメニューの例 D S プロフィール変更 メールアドレス変更 ログアウト
8. 設計にあたって重要な考え方2 依存の方向性 関心を分離したとはいえ、どこかでそれらを接続する必要がある 依存関係をシンプルに保つ必要がある
9. 設計にあたって重要な考え方2 依存の方向性 関心を分離したとはいえ、どこかでそれらを接続する必要がある 依存関係をシンプルに保つ必要がある レイヤードアーキテクチャ
10. アトミックデザイン
11. アトミックデザイン Molecules は Atoms に依存してもよいが、Organisms には依存しない
12. 設計にあたって重要な考え方2 悪い例 `AccountMenu`コンポーネントに合わせて、 `handleMenuOpen`というpropsを用意する D S
13. Container/Presentationalパターン Container データがユーザーにどのように表示されるかを管 理するコンポーネント。 Presentational 何のデータがユーザーに表示されるかを管理する コンポーネント。
14. Container/Presentational パターン 「犬のデータ」を「ギャラリーで表示する」
15. Container/Presentational パターン Container層 Presentational層 バックエンド Container層だけがバックエンドに依存する 例）PagesコンポーネントをContainer層とし、 データの取得はPagesコンポーネントでのみ行う
16. 他にも気になる方はこちらがおすすめです