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.4k
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
890
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.8k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2.2k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.6k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
39
Other Decks in Programming
See All in Programming
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
780
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
GoのWebAssembly活用パターン紹介
syumai
3
10k
GoのGenericsによるslice操作との付き合い方
syumai
2
670
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
280
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
830
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
Java on Azure で LangGraph!
kohei3110
0
160
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
KATA
mclloyd
29
14k
Statistics for Hackers
jakevdp
799
220k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Typedesign – Prime Four
hannesfritz
42
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Done Done
chrislema
184
16k
Optimizing for Happiness
mojombo
379
70k
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