Deep dive into component / classi-angular-night-number-3

Transcript

1. Deep dive into component
 2019/06/13 Classi Angular Night #3 
 Classi 株式会社 笠原渉
2. • 笠原 渉 (かさはら わたる)
 
 • Classi 株式会社
 • フロントエンドエンジニア
 • Angular 日本ユーザー会 staff
 About me
 @kasaharu
3. Deep dive into component
 Component
4. Deep dive into component
 Component 画面の表示に欠かせない マークアップをするところ 親から子へ プロパティ受け渡す 受け取ったプロパティを 表示用に加工
5. マークアップするだけなら単純だが…
 
 - 条件によって生成 or 破棄
 - Input が与えられたら画面更新
 - イベントが発火しても画面更新 … などなど
 Deep dive into component

6. マークアップするだけなら単純だが…
 
 - 条件によって生成 or 破棄
 - Input が与えられたら画面更新
 - イベントが発火しても画面更新 … などなど
 Deep dive into component
 コンポーネントの ライフサイクル コンポーネントの変更検知
7. - コンポーネントのライフサイクルについて
 - どうやって変更検知しているか
 - パフォーマンスに優しい書き方
 目次

8. Component Lifecycle
9. Component lifecycle
 ライフサイクルメソッド知ってますか？
10. - ngOnInit : generate component すると書いてあるアレ
 
 - ngOnChanges : 入力値が変わったときの処理を書くアレ
 
 - ngOnDestroy : Observable の購読完了処理をしたりするアレ
 Component lifecycle

11. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - 8 つのメソッドがある
 - この順番で実行される

12. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - 初回は ngOnInit より先に呼ばれる
 - Input プロパティが渡されていないと呼ばれない
 - SimpleChanges 型のオブジェクトを引数で受け取 れ、今のプロパティと前のプロパティがわかる
 - firstChange フラグで初回かどうかもわかる
 入力値を使って処理をする場所
13. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - コンポーネント生成後に呼ばれる
 - Input プロパティに値がセットされた後に呼ばれる ことが保証されている
 - どんなコンポーネントも 1 回は呼ばれる
 初期化処理をする場所
14. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - 変更検知のたびに呼ばれる
 - 変更検知については後述

15. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - コンポーネント内の外部のビューに値が反映され た後に呼び出される
 - 呼び出されるのは最初の ngDoCheck の後のみ

16. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - コンポーネント内の外部のビューに値が変更され た後に呼び出される
 - 初回は ngAfterContentInit の後に、その後は ngDoCheck の後に呼ばれる

17. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - コンポーネント内のビューの値が反映されたあと に呼ばれる
 - ngAfterContentChecked の後に呼ばれる

18. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - コンポーネント内のビューの値が変更されたあと に呼ばれる
 - 初回は ngAfterViewInit の後に、その後は ngAfterContentChecked の後に呼ばれる

19. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - コンポーネントが破棄されるときに呼ばれる
 - Observable の購読解除などをやる場所

20. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy - ここで再度 ngDoCheck

21. Component lifecycle
 lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy 変更検知のたびに呼ばれる
 → ngAfterContentChecked が呼ばれる
 → ngAfterViewChecked が呼ばれる
 → コストが高い
 
 できればここで処理をしない
22. 変更検知
23. - 変更検知とは？
 - JS 側で発生したイベントを Angular に伝える仕組み 
 
 - 誰が伝えているか？
 - Zone.js
 
 - 何を検知する？
 - XHRによる非同期通信、タイマー処理、クリックイベント など 
 変更検知

24. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210
25. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 Click 検知
26. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngDoCheck ngAfterContentChecked
27. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngDoCheck ngAfterContentChecked
28. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngDoCheck ngAfterContentChecked ngAfterViewChecked
29. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngAfterViewChecked
30. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngAfterViewChecked
31. 変更検知
 どこかのコンポーネントで 変更検知のトリガーとなるイベントが発生 最上位のコンポーネントから順に 全てのコンポーネントで変更検知が走る
32. - フレームレートが 60fps あるとスムーズなアニメーション
 - つまり 1 フレームあたり 16msec しか使えない 
 - ref. RAIL モデル
 
 - 変更検知のたびに全てのコンポーネントを精査するとパフォーマンスに 悪い
 変更検知

33. - フレームレートが 60fps あるとスムーズなアニメーション
 - つまり 1 フレームあたり 16msec しか使えない 
 - ref. RAIL モデル
 
 - 変更検知のたびに全てのコンポーネントを精査するとパフォーマンスに 悪い
 変更検知
 ChangeDetectionStrategy
34. - ChangeDetectionStrategy
 - 変更検知についての戦略を決める 
 
 - Default
 - CheckAlways strategy : 毎回チェックする 
 - OnPush
 - CheckOnce strategy : 1 度だけチェックする 
 　→ Input が変わらない限りコンポーネントの状態が変化しないと判断
 変更検知

35. 変更検知
 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210
36. - OnPush 実際にどれくらい効果があるんですか？
 変更検知

37. - OnPush 実際にどれくらい効果があるんですか？
 - angular/platform-browser の enableDebugTools を使うと計測できる 
 - ref. Developer Tools for Angular 
 変更検知

38. - enableDevTools を設定すると Chrome DevTools で計測できる
 - ng.profiler.timeChangeDetection() 
 
 - 簡単な構成でも 13msec -> 2msec くらいになる
 変更検知

39. パフォーマンスを気にしたコーディング
40. - OnPush を使うためには Input プロパティ以外でコンポーネントの状態 が変わらないように実装する必要がある
 
 - Presentational component は基本的に Input プロパティが変更された 場合のみ変更処理を必要とし、その他では変わらないようにしておくと 良い
 
 - Input プロパティが多くなると ngOnChanges の処理が膨らむ可能性が あるので getter などを使って適切に処理をわける
 パフォーマンスを意識したコーディング

41. - CheckOnce にして変更検知の回数を減らす
 - generate コマンドのオプションでも設定可能
 - $ ng g c home -c OnPush
 ChangeDetectionStrategy

42. - Input が変わる度に更新する値がある場合 ngOnChanges を使う
 - Input プロパティが増えると条件分岐が増えてくる 
 - → getter を使うとよい
 ngOnChanges

43. - Input ごとに getter を用意することで処理が複雑にならない
 - template でメソッドが呼ばれる → AfterViewChecked のたびに処理される 
 - getter に重い処理(配列操作など)があるとパフォーマンスが悪くなる 
 - → setter を使うとよい
 getter

44. - 該当の Input が変更されると setter が呼ばれる
 - template からは変更検知のたびに getter が呼ばれる 
 - 処理自体は setter にあり getter は処理済みの値を返すのみなので影響は少ない 
 setter

45. - ライフサイクルメソッドのメリット・デメリットを知る
 
 - ChangeDetectionStrategy.OnPush でパフォーマンス改善
 
 - getter, setter で実装の複雑さを減らす
 
 - enableDebugTools で計測してみる
 まとめ

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