ド文系人事総務 AsyncPipeのソースコードを読む

ラクス　フロントエンドLT会 - vol.8　で発表させていただいたスライドです。
https://rakus.connpass.com/event/255095/

Transcript

1. ド文系人事総務 AsyncPipeのソースコードを読む 2022/09/08　フロントエンドLT会 - vol.8
2. 自己紹介 ざこ　@zako1560 • 苗字の「こざ◯」から「ざこ」 • 京都の機械メーカーで人事総務 • 水漏れしてるトイレの部品交換したり、 新卒面接したり、人事制度改定したり... • Angularで社内人事評価アプリ作ってます • 20:30に寝て4:00に起きます 2
3. 本日のテーマ Async Pipe 3
4. Async Pipe ObservableやPromiseといった非同期データを テンプレートに直接バインドできる機能 4
7. コンポーネントが破棄された際に 自動で購読解除してくれる 購読解除（unsbscribe）が必要 →解除し忘れると 　メモリリーク・バグの原因に 7
8. 🎉🎉 便利やな〜！！ 🥳🥳 （長野県出身） 8
9. 🤯 9
10. 10 親コンポーネント 子コンポーネント
11. 11 親コンポーネント 子コンポーネント
12. なんのnull？ 12
13. AsyncPipe初期値null問題 13
16. 　　・・・ 16
17. 　　・・・ AsyncPipeのtransform()が初めて呼び出された場合 • Observavle（obj）があれば ◦ _subsuribe()でObservavleを購読する ◦ 購読したObservableに値が流れてきたら、 _latestValueを更新する ▪ markForCheck()を呼び出す →再度transform()が呼び出される 17
18. 　　・・・ 購読したObservableに値が流れてきたら、 _latestValueを更新する・・・ Observableにまだ値が流れてきていなかったら？？？ 18
19. 　　・・・ 購読したObservableに値が流れてきたら、 _latestValueを更新する・・・ Observableにまだ値が流れてきていなかったら？？？ _latestValueの初期値が返る！！ 19
20. 　　・・・ 20
21. 　　・・・ 21 初期値null問題
22. どうすれば・・・🥺 22
23. null安全なディレクティブを通す *ngIf *ngFor 23
24. *ngIfの内部は、name$ | asyncが返す値 がfalsyなら無視される 24
25. 25 わかりやすい記事の数々・・・ ありがとうございます
26. 　　・・・ console.log() console.log() 26 おまけ
27. 　　・・・ console.log() console.log() obj = new BehaviorSubject<>(‘hogehoge’).asObservable() obj = of(‘hogehoge’) といった購読と同時に値が流れる Observableの場合、 nullは返されない 27 おまけ
28. ご静聴ありがとうございました！！ 28