RxJSのカスタムオペレータに挑戦しよう！

Angular触ろうの会 in Fukuoka #5（2018/03/16）の発表資料です。

Transcript

1. RxJSのカスタムオペレータに挑戦しよう！ Angular触ろうの会 in Fukuoka #5 / Mar 16, 2018 ponday (@ponday_dev)
2. Profile Honda, Yusuke (@ponday_dev) Community - chibi-developer - ng-fukuoka Like - JavaScript / TypeScript / Kotlin - RxJS / Angular / Vue.js Other skills - C# / Java / Python - Spring Boot SIer / System Engineer
3. loves
4. loves
5. カスタムオペレータ - 自分で独自のオペレータを定義できる - バージョン5.5でpipeが提供され、使いやすくなった - 汎用的なものは大体提供されているので、使う機会はそこま で多くない - ある程度使い慣れた人向けの機能（？）
6. https://github.com/ReactiveX/rxjs/blob/master/doc/operator-creation.md 公式ドキュメント
8. 分かりづらい
9. 読み解く
10. オペレータ？
12. 入力：Observable<T> 出力：Observable<R>
14. 型を付けるとこう
15. 型を付けるとこう ココ
16. Observable.create - 名前の通り、Observableのインスタンスを生成する。 - 引数にSubscriber => Subscription※な関数を取る ※ 正確にはSubcriber => TeardownLogic 　 TeardownLogicにSubscriptionも含まれるのでわかりやすさのため
17. Subscriber - next/error/completeに加えてunsubscribeも持つ - Subscriberを通して次のオペレータやsubscribeに処理を渡す ことができる。
18. サンプルオペレータの動作 sourceをsubscribeして値を取得
19. サンプルオペレータの動作 sourceの値をcallbackで処理して戻り値をnext
20. サンプルオペレータの動作 callbackでエラーが起これば errorに分岐
21. サンプルオペレータの動作 sourceのerrorやcompleteはそのまま流す
22. 一番外側の関数はオペレータ ＝ Observable => Observable な関数を生成するのが仕事。
23. どちらかと言うと中身のほうが重要
24. まとめ - 結構シンプルに実装できる。見慣れない要素が出てくるので 難しそうに見えるだけ。 - 乱用すべきではない（と思う） - 標準のオペレータのみで簡潔に表現できるならそのほうが良い - 読みやすさを向上できるなら利用して良い - ちゃんとサンプルで型を付けてくれていれば ソースリーディングの入り口に良かった気はする
25. 相変わらずRxJSは公式のドキュメントがイマイチ...
26. こんなところに日本語情報が https://booth.pm/ja/items/659290
27. ※ カスタムオペレータについての記述はありません
28. サンプル
29. 数値をn倍する
30. 条件に一致しない値が流れたらerrorを起こす