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

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. 3 コンポーネント設計
5. Copyright © 2019 Classi Corp. All Rights Reserved. • view 層に責任を持つ • XHR の呼び出しやローカルストレージなどの操作は service でおこなう ◦ 詳細は ドキュメント - スタイルガイド 参照 4 コンポーネント設計 - コンポーネントの役割
6. Copyright © 2019 Classi Corp. All Rights Reserved. • コンポーネントのごとの役割は？ 5 コンポーネント設計 - 次に考えること
7. Copyright © 2019 Classi Corp. All Rights Reserved. • コンポーネントのごとの役割は？ 6 コンポーネント設計 - 次に考えること どこでなにをするか？
8. Copyright © 2019 Classi Corp. All Rights Reserved. 7 コンポーネント設計 - 2 ヶ月前に考えていたこと Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
9. 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 で責務を分 離
10. 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() でパラ メータを受け取りそれを 表示 • 表示のための加工処理
11. 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 を参考に分割 (詳細は割愛)
12. 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 の組み立 てを行う
13. 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 の役割が多い…
14. Copyright © 2019 Classi Corp. All Rights Reserved. • 問題点 ◦ 役割が多い ◦ 1 ページ 1 Container component だと URL は違うが同じ様な ページの場合、各 Container component のロジックが似通う ▪ 詳細は次の例で 13 コンポーネント設計 - Container component の問題点
15. 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
16. 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
17. 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
18. 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
19. 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
20. 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
21. 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 コンポーネント再設計急務
22. 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
23. 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 と責務を分 離
24. 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 • 先ほどと同様
25. 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
26. 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 の組み立 て
27. 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
28. 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
29. Copyright © 2019 Classi Corp. All Rights Reserved. 28 async pipe
30. Copyright © 2019 Classi Corp. All Rights Reserved. Angular でのアプリケーション開発 ↓ Observable との付き合い方 29 Observable との付き合い方
31. Copyright © 2019 Classi Corp. All Rights Reserved. Angular でのアプリケーション開発 ↓ Observable との付き合い方 30 Observable との付き合い方 その Observable どうやって購読してますか？
32. Copyright © 2019 Classi Corp. All Rights Reserved. 31 Observable な値を view で表示 - subscribe
33. Copyright © 2019 Classi Corp. All Rights Reserved. 32 Observable な値を view で表示 - subscribe 購読が必要
34. Copyright © 2019 Classi Corp. All Rights Reserved. 33 Observable な値を view で表示 - subscribe component 破棄時に unsubscribe
35. Copyright © 2019 Classi Corp. All Rights Reserved. 34 Observable な値を view で表示 - subscribe Observable な値が増えると管理が大変
36. Copyright © 2019 Classi Corp. All Rights Reserved. 35 Observable な値を view で表示 - subscribe async pipe を使おう
37. Copyright © 2019 Classi Corp. All Rights Reserved. 36 Observable な値を view で表示 - async pipe
38. Copyright © 2019 Classi Corp. All Rights Reserved. 37 Observable な値を view で表示 - async pipe テンプレート側で購読が可能
39. Copyright © 2019 Classi Corp. All Rights Reserved. 38 Observable な値を view で表示 - async pipe コンポーネント側での購読が不要 unsubscribe も不要
40. Copyright © 2019 Classi Corp. All Rights Reserved. 39 TSLint の設定
41. Copyright © 2019 Classi Corp. All Rights Reserved. • cyclomatic-complexity ◦ 循環的複雑度のチェック ◦ Angular に限らないがメンテナンスしやすいアプリケーション維持 のため設定したほうが良い • ordered-imports ◦ import 文の順番をアルファベット順にする • max-file-line-count ◦ 1 ファイルの行数を制限 ◦ スタイルガイド にも 400 行制限が推奨されている 40 TSLint の設定
42. Copyright © 2019 Classi Corp. All Rights Reserved. 41 initTestEnvironment
43. Copyright © 2019 Classi Corp. All Rights Reserved. 42 initTestEnvironment その xxxTestingModule 何回目の import ですか？
44. Copyright © 2019 Classi Corp. All Rights Reserved. 43 initTestEnvironment initTestEnvironment() で import しておきましょう！
45. Copyright © 2019 Classi Corp. All Rights Reserved. 44 initTestEnvironment
46. Copyright © 2019 Classi Corp. All Rights Reserved. 45 initTestEnvironment テスト用環境の初期化
47. Copyright © 2019 Classi Corp. All Rights Reserved. 46 initTestEnvironment デフォルトでは BrowserDynamicTestingModule の み読み込まれる
48. Copyright © 2019 Classi Corp. All Rights Reserved. 47 initTestEnvironment 2 つ以上の module を 読み込む場合は配列にする
49. Copyright © 2019 Classi Corp. All Rights Reserved. 48 We are Hiring！ Classiでは一緒に働く仲間を募集しています 詳細はWantedlyページにて https://www.wantedly.com/companies/classi/projects