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

RxJSのカスタムオペレータに挑戦しよう！ Angular触ろうの会 in Fukuoka #5 / Mar 16, 2018 ponday
(@ponday_dev)

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

カスタムオペレータ - 自分で独自のオペレータを定義できる - バージョン5.5でpipeが提供され、使いやすくなった - 汎用的なものは大体提供されているので、使う機会はそこまで多くない - ある程度使い慣れた人向けの機能（？）

https://github.com/ReactiveX/rxjs/blob/master/doc/operator-creation.md 公式ドキュメント

分かりづらい

読み解く

オペレータ？

入力：Observable<T> 出力：Observable<R>

型を付けるとこう

型を付けるとこうココ

Observable.create - 名前の通り、Observableのインスタンスを生成する。 - 引数にSubscriber => Subscription※な関数を取る ※ 正確にはSubcriber =>
TeardownLogic 　 TeardownLogicにSubscriptionも含まれるのでわかりやすさのため

Subscriber - next/error/completeに加えてunsubscribeも持つ - Subscriberを通して次のオペレータやsubscribeに処理を渡すことができる。

サンプルオペレータの動作 sourceをsubscribeして値を取得

サンプルオペレータの動作 sourceの値をcallbackで処理して戻り値をnext

サンプルオペレータの動作 callbackでエラーが起これば errorに分岐

サンプルオペレータの動作 sourceのerrorやcompleteはそのまま流す

一番外側の関数はオペレータ＝ Observable => Observable な関数を生成するのが仕事。

どちらかと言うと中身のほうが重要

まとめ - 結構シンプルに実装できる。見慣れない要素が出てくるので難しそうに見えるだけ。 - 乱用すべきではない（と思う） - 標準のオペレータのみで簡潔に表現できるならそのほうが良い - 読みやすさを向上できるなら利用して良い
- ちゃんとサンプルで型を付けてくれていればソースリーディングの入り口に良かった気はする

相変わらずRxJSは公式のドキュメントがイマイチ...

こんなところに日本語情報が https://booth.pm/ja/items/659290

※ カスタムオペレータについての記述はありません

サンプル

数値をn倍する

条件に一致しない値が流れたらerrorを起こす

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

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

ponday

More Decks by ponday

Other Decks in Programming

Featured

Transcript