Tweet
Tweet

Slide 1

Slide 1 text

Copyright © 2019 Classi Corp. All Rights Reserved. Angular Way をまっすぐ歩くために 2019/3/27 Classi Angular Night #2 Copyright © 2019 Classi Corp. All Rights Reserved. Classi 株式会社 笠原渉

Slide 2

Slide 2 text

Copyright © 2019 Classi Corp. All Rights Reserved. ● 笠原 渉 （かさはら わたる） ● Classi 株式会社 ● フロントエンドエンジニア 1 About Me @kasaharu

Slide 3

Slide 3 text

Copyright © 2019 Classi Corp. All Rights Reserved. 1. コンポーネント設計 2. async pip 3. TSLint 4. initTestEnvironment 2 目次 - Angular Way をまっすぐ歩くために

Slide 4

Slide 4 text

Copyright © 2019 Classi Corp. All Rights Reserved. 3 コンポーネント設計

Slide 5

Slide 5 text

Copyright © 2019 Classi Corp. All Rights Reserved. ● view 層に責任を持つ ● XHR の呼び出しやローカルストレージなどの操作は service でおこなう ○ 詳細は ドキュメント - スタイルガイド 参照 4 コンポーネント設計 - コンポーネントの役割

Slide 6

Slide 6 text

Copyright © 2019 Classi Corp. All Rights Reserved. ● コンポーネントのごとの役割は？ 5 コンポーネント設計 - 次に考えること

Slide 7

Slide 7 text

Copyright © 2019 Classi Corp. All Rights Reserved. ● コンポーネントのごとの役割は？ 6 コンポーネント設計 - 次に考えること どこでなにをするか？

Slide 8

Slide 8 text

Copyright © 2019 Classi Corp. All Rights Reserved. 7 コンポーネント設計 - 2 ヶ月前に考えていたこと Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx

Slide 9

Slide 9 text

Copyright © 2019 Classi Corp. All Rights Reserved. 8 コンポーネント設計 Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx ● Container component と Presentational component で責務を分 離

Slide 10

Slide 10 text

Copyright © 2019 Classi Corp. All Rights Reserved. 9 コンポーネント設計 - Presentational component の役割 Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx Presentational component ● 親から Input() でパラ メータを受け取りそれを 表示 ● 表示のための加工処理

Slide 11

Slide 11 text

Copyright © 2019 Classi Corp. All Rights Reserved. 10 コンポーネント設計 - Presentational component の役割 Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx Presentational component ● 親から Input() でパラ メータを受け取りそれを 表示 ● 表示のための加工処理 ここは Atomic Design を参考に分割 (詳細は割愛)

Slide 12

Slide 12 text

Copyright © 2019 Classi Corp. All Rights Reserved. 11 コンポーネント設計 - Container component の役割 Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx Container component ● URL からのパラメータ取 得 ● NgRx とやり取りする ○ action dispatch ○ store select ● 子 component の組み立 てを行う

Slide 13

Slide 13 text

Copyright © 2019 Classi Corp. All Rights Reserved. 12 コンポーネント設計 - Container component の役割 Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx Container component ● URL と 1 対 1 に対応 ● NgRx とやり取りする ○ action dispatch ○ store select ● 子 component の組み立 てを行う Container component の役割が多い…

Slide 14

Slide 14 text

Copyright © 2019 Classi Corp. All Rights Reserved. ● 問題点 ○ 役割が多い ○ 1 ページ 1 Container component だと URL は違うが同じ様な ページの場合、各 Container component のロジックが似通う ■ 詳細は次の例で 13 コンポーネント設計 - Container component の問題点

Slide 15

Slide 15 text

Copyright © 2019 Classi Corp. All Rights Reserved. 14 コンポーネント設計 - Container component の問題点(例) Container A Presentational C Container B Presentational D 全体構成の説明 ● ページごとのコンポーネ ント A, B がある ● A, B はそれぞれ子コン ポーネント C を表示する ● C は更に D, E を表示す る Presentational E

Slide 16

Slide 16 text

Copyright © 2019 Classi Corp. All Rights Reserved. 15 コンポーネント設計 - Container component の問題点(例) Container A Presentational C Container B Presentational D Presentational D ● Presentational D のため のメソッド ● A のページと B のページ で少し D メソッドのロジッ クが異なる Presentational E

Slide 17

Slide 17 text

Copyright © 2019 Classi Corp. All Rights Reserved. 16 コンポーネント設計 - 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

Slide 18

Slide 18 text

Copyright © 2019 Classi Corp. All Rights Reserved. 17 コンポーネント設計 - Container component の問題点(例) Container A Presentational C Container B Presentational D Presentational E ● Presentational E のため のメソッド ● A のページと B のページ で同じロジック Presentational E

Slide 19

Slide 19 text

Copyright © 2019 Classi Corp. All Rights Reserved. 18 コンポーネント設計 - Container component の問題点(例) Container A Presentational C Container B Presentational D Presentational E ● Presentational E のため のメソッドを A, B で実装 し渡していく Presentational E method E method E method E

Slide 20

Slide 20 text

Copyright © 2019 Classi Corp. All Rights Reserved. 19 コンポーネント設計 - 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

Slide 21

Slide 21 text

Copyright © 2019 Classi Corp. All Rights Reserved. 20 コンポーネント設計 - 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 コンポーネント再設計急務

Slide 22

Slide 22 text

Copyright © 2019 Classi Corp. All Rights Reserved. 21 コンポーネント設計 - 再検討したコンポーネントの役割 Container Component Presentational Component Component Library Angular NgRx Page Component Presentational Component Reducer Page Component Action State Effects

Slide 23

Slide 23 text

Copyright © 2019 Classi Corp. All Rights Reserved. 22 コンポーネント設計 - 再検討したコンポーネントの役割 Container Component Presentational Component Component Library Angular NgRx Page Component Presentational Component Page Component ● Page component を新設 して Container component と責務を分 離

Slide 24

Slide 24 text

Copyright © 2019 Classi Corp. All Rights Reserved. 23 コンポーネント設計 - Presentational component の役割 Container Component Presentational Component Component Library Angular NgRx Page Component Presentational Component Page Component Presentational component ● 先ほどと同様

Slide 25

Slide 25 text

Copyright © 2019 Classi Corp. All Rights Reserved. 24 コンポーネント設計 - Page component の役割 Container Component Presentational Component Component Library Angular NgRx Page Component Presentational Component Page Component Page component ● URL からのパラメータ取 得 ● action dispatch

Slide 26

Slide 26 text

Copyright © 2019 Classi Corp. All Rights Reserved. 25 コンポーネント設計 - Container component の役割 Container Component Presentational Component Component Library Angular NgRx Page Component Presentational Component Page Component Container component ● store select ● 子 component の組み立 て

Slide 27

Slide 27 text

Copyright © 2019 Classi Corp. All Rights Reserved. 26 コンポーネント設計 - 再検討したコンポーネントの役割(例) 全体を見ると ● メソッド 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

Slide 28

Slide 28 text

Copyright © 2019 Classi Corp. All Rights Reserved. ● Container component で頑張っていたものを Page component と Container component にわけた ● 必要に応じてロジックを共通化 ● Presentational component については継続検討中 27 コンポーネント設計 - まとめ 検討前 役割 検討後 Container component ルーティング 状態の更新 Page component 状態の取得 子 component の組み立て Container component Presentational component 表示 表示のための加工処理 Presentational component

Slide 29

Slide 29 text

Copyright © 2019 Classi Corp. All Rights Reserved. 28 async pipe

Slide 30

Slide 30 text

Copyright © 2019 Classi Corp. All Rights Reserved. Angular でのアプリケーション開発 ↓ Observable との付き合い方 29 Observable との付き合い方

Slide 31

Slide 31 text

Copyright © 2019 Classi Corp. All Rights Reserved. Angular でのアプリケーション開発 ↓ Observable との付き合い方 30 Observable との付き合い方 その Observable どうやって購読してますか？

Slide 32

Slide 32 text

Copyright © 2019 Classi Corp. All Rights Reserved. 31 Observable な値を view で表示 - subscribe

Slide 33

Slide 33 text

Copyright © 2019 Classi Corp. All Rights Reserved. 32 Observable な値を view で表示 - subscribe 購読が必要

Slide 34

Slide 34 text

Copyright © 2019 Classi Corp. All Rights Reserved. 33 Observable な値を view で表示 - subscribe component 破棄時に unsubscribe

Slide 35

Slide 35 text

Copyright © 2019 Classi Corp. All Rights Reserved. 34 Observable な値を view で表示 - subscribe Observable な値が増えると管理が大変

Slide 36

Slide 36 text

Copyright © 2019 Classi Corp. All Rights Reserved. 35 Observable な値を view で表示 - subscribe async pipe を使おう

Slide 37

Slide 37 text

Copyright © 2019 Classi Corp. All Rights Reserved. 36 Observable な値を view で表示 - async pipe

Slide 38

Slide 38 text

Copyright © 2019 Classi Corp. All Rights Reserved. 37 Observable な値を view で表示 - async pipe テンプレート側で購読が可能

Slide 39

Slide 39 text

Copyright © 2019 Classi Corp. All Rights Reserved. 38 Observable な値を view で表示 - async pipe コンポーネント側での購読が不要 unsubscribe も不要

Slide 40

Slide 40 text

Copyright © 2019 Classi Corp. All Rights Reserved. 39 TSLint の設定

Slide 41

Slide 41 text

Copyright © 2019 Classi Corp. All Rights Reserved. ● cyclomatic-complexity ○ 循環的複雑度のチェック ○ Angular に限らないがメンテナンスしやすいアプリケーション維持 のため設定したほうが良い ● ordered-imports ○ import 文の順番をアルファベット順にする ● max-file-line-count ○ 1 ファイルの行数を制限 ○ スタイルガイド にも 400 行制限が推奨されている 40 TSLint の設定

Slide 42

Slide 42 text

Copyright © 2019 Classi Corp. All Rights Reserved. 41 initTestEnvironment

Slide 43

Slide 43 text

Copyright © 2019 Classi Corp. All Rights Reserved. 42 initTestEnvironment その xxxTestingModule 何回目の import ですか？

Slide 44

Slide 44 text

Copyright © 2019 Classi Corp. All Rights Reserved. 43 initTestEnvironment initTestEnvironment() で import しておきましょう！

Slide 45

Slide 45 text

Copyright © 2019 Classi Corp. All Rights Reserved. 44 initTestEnvironment

Slide 46

Slide 46 text

Copyright © 2019 Classi Corp. All Rights Reserved. 45 initTestEnvironment テスト用環境の初期化

Slide 47

Slide 47 text

Copyright © 2019 Classi Corp. All Rights Reserved. 46 initTestEnvironment デフォルトでは BrowserDynamicTestingModule の み読み込まれる

Slide 48

Slide 48 text

Copyright © 2019 Classi Corp. All Rights Reserved. 47 initTestEnvironment 2 つ以上の module を 読み込む場合は配列にする

Slide 49

Slide 49 text

Copyright © 2019 Classi Corp. All Rights Reserved. 48 We are Hiring！ Classiでは一緒に働く仲間を募集しています 詳細はWantedlyページにて https://www.wantedly.com/companies/classi/projects