Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
componentの分け方 monotips #14
Slide 2
Slide 2 text
前回の続きです。詳しくは↓ https://speakerdeck.com/hxrxchang/spafalsezhuang-tai-guan-li-d860a75 0-150e-46d0-a14f-eb1730b9c875
Slide 3
Slide 3 text
前提知識: component指向、状態管理 SPAでは、入れ子構造になっているcomponentの組み合 わせでアプリケーションを構成する。 状態はReduxとかvuexとかngrxみたいなライブラリを使っ て管理する。
Slide 4
Slide 4 text
store component client side Backend HTTP dispatch action Select
Slide 5
Slide 5 text
Componentの分け方 Container Component Presentational Component
Slide 6
Slide 6 text
Container Component Storeから状態をSelectする。 子供の関係にあるPresentational Componentに値を 渡す。 Actionをdispatchする。
Slide 7
Slide 7 text
Presentational Component 親の関係にあるContainer Componentから 値を受け取り、それを描画するだけ。 ロジックは極力持たない。
Slide 8
Slide 8 text
両方を囲っているのが detailComponent => Container Component 画像の部分は imageViewComponent => Presentational Component 詳細の部分は detailInfoComponent => Presentational Component
Slide 9
Slide 9 text
componentを分ける理由 reducer / component の責務をさらに分離。 storeとやりとりするcomponent(container component)と、 viewを表示するcomponent(presentational component)の 責務を分けて、どこでなにをやってるかさらに分かり易くする。 テストを書き易くする
Slide 10
Slide 10 text
以上が前回の振り返りです。
Slide 11
Slide 11 text
課題: componentの分け方、粒度 - 肥大化するcontainer component と presentational component - container component , presentational component だけだと足りない!!
Slide 12
Slide 12 text
肥大化のデメリット - 果てしない行数は可読性を下げる。 - component指向なのに再利用ができない。 - １つのcomponentに複数機能があるとテストがしづらい。
Slide 13
Slide 13 text
componentの分け方 - componentの粒度、役割を決めないとこれもまた難読化に - 分けるにしても人によって粒度がバラバラ - 個人プロジェクトでも時期によってあーでもないこーでもない - componentの分け方のルール = “設計” が大事
Slide 14
Slide 14 text
Atomic Design ページを - Atoms (原子) - Molecules (分子) - Organism (有機体) - template (エンジニアは意識しなくても良さそう) - pages に分ける。
Slide 15
Slide 15 text
Atoms これ以上分解不可能な最小単位 例: (単体の)テキストボックスやボタンなど Molecules Atomsを組み合わせて最小単位の機能を作る 例: テキストボックスとボタンを組み合わせて 検索フォームを作る
Slide 16
Slide 16 text
Organisms １つの独立した機能となるもの。 MoleculesとAtomsを組み合わせる。 Storeとやりとりする。 Pages Organismsを組み合わせて、ページを作る
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
componentの単位 - basics - components - containers - pages storeとやりとりするのはcontainersとpages
Slide 19
Slide 19 text
Atomic Designでもオリジナルの設計でも共通するもの - storeとやりとりするcomponentと、 表示専用のcomponentの分離 = container component と presentational componentの拡張
Slide 20
Slide 20 text
Nuxtが良さそう - pages dirでルーティング - components dirの中でatoms, molecules, organisms => これだけで設計完了 - 導入事例がたくさん - reduxよりvuexの方がわかりやすそう。 - typescript, rxjs要らない
Slide 21
Slide 21 text
No content