Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Deep dive into component / classi-angular-night...
Search
Wataru KASAHARA
June 13, 2019
Programming
0
2.2k
Deep dive into component / classi-angular-night-number-3
Wataru KASAHARA
June 13, 2019
Tweet
Share
More Decks by Wataru KASAHARA
See All by Wataru KASAHARA
NgRx component と component-store について / mini-ng-japan-2020
kasaharu
0
820
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.6k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.4k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
34
Other Decks in Programming
See All in Programming
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
890
Jakarta EE meets AI
ivargrimstad
0
390
Kotlin 2.0 and Beyond
antonarhipov
2
150
XStateでReactに秩序を与えたい
gizm000
0
730
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Securify_エンジニア採用資料
3shake
0
110
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
The Invisible Customer
myddelton
119
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Designing with Data
zakiwarfel
98
5k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Being A Developer After 40
akosma
84
590k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
A designer walks into a library…
pauljervisheath
201
24k
Speed Design
sergeychernyshev
22
430
Transcript
Deep dive into component 2019/06/13 Classi Angular Night #3
Classi 株式会社 笠原渉
• 笠原 渉 (かさはら わたる) • Classi 株式会社 •
フロントエンドエンジニア • Angular 日本ユーザー会 staff About me @kasaharu
Deep dive into component Component
Deep dive into component Component 画面の表示に欠かせない マークアップをするところ 親から子へ プロパティ受け渡す 受け取ったプロパティを
表示用に加工
マークアップするだけなら単純だが… - 条件によって生成 or 破棄 - Input が与えられたら画面更新 -
イベントが発火しても画面更新 … などなど Deep dive into component
マークアップするだけなら単純だが… - 条件によって生成 or 破棄 - Input が与えられたら画面更新 -
イベントが発火しても画面更新 … などなど Deep dive into component コンポーネントの ライフサイクル コンポーネントの変更検知
- コンポーネントのライフサイクルについて - どうやって変更検知しているか - パフォーマンスに優しい書き方 目次
Component Lifecycle
Component lifecycle ライフサイクルメソッド知ってますか?
- ngOnInit : generate component すると書いてあるアレ - ngOnChanges :
入力値が変わったときの処理を書くアレ - ngOnDestroy : Observable の購読完了処理をしたりするアレ Component lifecycle
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - 8 つのメソッドがある - この順番で実行される
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - 初回は ngOnInit より先に呼ばれる - Input プロパティが渡されていないと呼ばれない - SimpleChanges 型のオブジェクトを引数で受け取 れ、今のプロパティと前のプロパティがわかる - firstChange フラグで初回かどうかもわかる 入力値を使って処理をする場所
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - コンポーネント生成後に呼ばれる - Input プロパティに値がセットされた後に呼ばれる ことが保証されている - どんなコンポーネントも 1 回は呼ばれる 初期化処理をする場所
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - 変更検知のたびに呼ばれる - 変更検知については後述
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - コンポーネント内の外部のビューに値が反映され た後に呼び出される - 呼び出されるのは最初の ngDoCheck の後のみ
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - コンポーネント内の外部のビューに値が変更され た後に呼び出される - 初回は ngAfterContentInit の後に、その後は ngDoCheck の後に呼ばれる
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - コンポーネント内のビューの値が反映されたあと に呼ばれる - ngAfterContentChecked の後に呼ばれる
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - コンポーネント内のビューの値が変更されたあと に呼ばれる - 初回は ngAfterViewInit の後に、その後は ngAfterContentChecked の後に呼ばれる
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - コンポーネントが破棄されるときに呼ばれる - Observable の購読解除などをやる場所
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy - ここで再度 ngDoCheck
Component lifecycle lifecycle method ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit
ngAfterViewChecked ngOnDestroy 変更検知のたびに呼ばれる → ngAfterContentChecked が呼ばれる → ngAfterViewChecked が呼ばれる → コストが高い できればここで処理をしない
変更検知
- 変更検知とは? - JS 側で発生したイベントを Angular に伝える仕組み -
誰が伝えているか? - Zone.js - 何を検知する? - XHRによる非同期通信、タイマー処理、クリックイベント など 変更検知
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 Click 検知
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngDoCheck ngAfterContentChecked
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngDoCheck ngAfterContentChecked
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngDoCheck ngAfterContentChecked
ngAfterViewChecked
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngAfterViewChecked
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210 ngAfterViewChecked
変更検知 どこかのコンポーネントで 変更検知のトリガーとなるイベントが発生 最上位のコンポーネントから順に 全てのコンポーネントで変更検知が走る
- フレームレートが 60fps あるとスムーズなアニメーション - つまり 1 フレームあたり 16msec しか使えない
- ref. RAIL モデル - 変更検知のたびに全てのコンポーネントを精査するとパフォーマンスに 悪い 変更検知
- フレームレートが 60fps あるとスムーズなアニメーション - つまり 1 フレームあたり 16msec しか使えない
- ref. RAIL モデル - 変更検知のたびに全てのコンポーネントを精査するとパフォーマンスに 悪い 変更検知 ChangeDetectionStrategy
- ChangeDetectionStrategy - 変更検知についての戦略を決める - Default - CheckAlways
strategy : 毎回チェックする - OnPush - CheckOnce strategy : 1 度だけチェックする → Input が変わらない限りコンポーネントの状態が変化しないと判断 変更検知
変更検知 HomeComponent Child100Component Child300Component Child200Component Child310 Child320 Child210
- OnPush 実際にどれくらい効果があるんですか? 変更検知
- OnPush 実際にどれくらい効果があるんですか? - angular/platform-browser の enableDebugTools を使うと計測できる -
ref. Developer Tools for Angular 変更検知
- enableDevTools を設定すると Chrome DevTools で計測できる - ng.profiler.timeChangeDetection()
- 簡単な構成でも 13msec -> 2msec くらいになる 変更検知
パフォーマンスを気にしたコーディング
- OnPush を使うためには Input プロパティ以外でコンポーネントの状態 が変わらないように実装する必要がある - Presentational component
は基本的に Input プロパティが変更された 場合のみ変更処理を必要とし、その他では変わらないようにしておくと 良い - Input プロパティが多くなると ngOnChanges の処理が膨らむ可能性が あるので getter などを使って適切に処理をわける パフォーマンスを意識したコーディング
- CheckOnce にして変更検知の回数を減らす - generate コマンドのオプションでも設定可能 - $ ng g
c home -c OnPush ChangeDetectionStrategy
- Input が変わる度に更新する値がある場合 ngOnChanges を使う - Input プロパティが増えると条件分岐が増えてくる -
→ getter を使うとよい ngOnChanges
- Input ごとに getter を用意することで処理が複雑にならない - template でメソッドが呼ばれる → AfterViewChecked
のたびに処理される - getter に重い処理(配列操作など)があるとパフォーマンスが悪くなる - → setter を使うとよい getter
- 該当の Input が変更されると setter が呼ばれる - template からは変更検知のたびに getter
が呼ばれる - 処理自体は setter にあり getter は処理済みの値を返すのみなので影響は少ない setter
- ライフサイクルメソッドのメリット・デメリットを知る - ChangeDetectionStrategy.OnPush でパフォーマンス改善 - getter, setter
で実装の複雑さを減らす - enableDebugTools で計測してみる まとめ
We are Hiring! Classiでは一緒に働く仲間を募集しています 詳細はWantedlyページにて https://www.wantedly.com/companies/classi/projects