Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Way をまっすぐ歩くために / classi-angular-night-n...

Angular Way をまっすぐ歩くために / classi-angular-night-number-2

Wataru KASAHARA

March 27, 2019
Tweet

More Decks by Wataru KASAHARA

Other Decks in Programming

Transcript

  1. Copyright © 2019 Classi Corp. All Rights Reserved. Angular Way

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

    渉 (かさはら わたる) • Classi 株式会社 • フロントエンドエンジニア 1 About Me @kasaharu
  3. Copyright © 2019 Classi Corp. All Rights Reserved. 1. コンポーネント設計

    2. async pip 3. TSLint 4. initTestEnvironment 2 目次 - Angular Way をまっすぐ歩くために
  4. Copyright © 2019 Classi Corp. All Rights Reserved. • view

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

    6 コンポーネント設計 - 次に考えること どこでなにをするか?
  6. Copyright © 2019 Classi Corp. All Rights Reserved. 7 コンポーネント設計

    - 2 ヶ月前に考えていたこと Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
  7. 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 で責務を分 離
  8. 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() でパラ メータを受け取りそれを 表示 • 表示のための加工処理
  9. 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 を参考に分割 (詳細は割愛)
  10. 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 の組み立 てを行う
  11. 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 の役割が多い…
  12. Copyright © 2019 Classi Corp. All Rights Reserved. • 問題点

    ◦ 役割が多い ◦ 1 ページ 1 Container component だと URL は違うが同じ様な ページの場合、各 Container component のロジックが似通う ▪ 詳細は次の例で 13 コンポーネント設計 - Container component の問題点
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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 コンポーネント再設計急務
  20. 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
  21. 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 と責務を分 離
  22. 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 • 先ほどと同様
  23. 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
  24. 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 の組み立 て
  25. 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
  26. 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
  27. Copyright © 2019 Classi Corp. All Rights Reserved. Angular でのアプリケーション開発

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

    ↓ Observable との付き合い方 30 Observable との付き合い方 その Observable どうやって購読してますか?
  29. Copyright © 2019 Classi Corp. All Rights Reserved. 32 Observable

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

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

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

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

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

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

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

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

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

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

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

    are Hiring! Classiでは一緒に働く仲間を募集しています 詳細はWantedlyページにて https://www.wantedly.com/companies/classi/projects