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
RxJSのカスタムオペレータに挑戦しよう!
Search
ponday
March 16, 2018
Programming
0
170
RxJSのカスタムオペレータに挑戦しよう!
Angular触ろうの会 in Fukuoka #5(2018/03/16)の発表資料です。
ponday
March 16, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
1.1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
380
これまでのReact、これからのReact
honda
0
280
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
630
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
610
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
730
Other Decks in Programming
See All in Programming
Going Staff - Keynote edition
pragtob
0
360
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
110
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
430
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
2.1k
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
テスト駆動開発✅️
akitoshiga
1
170
Competitionsだけじゃない! Kaggle Notebooks Grandmasterのすすめ
corochann
2
940
CSC509 Lecture 04
javiergs
PRO
0
170
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
410
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
640
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
340
Music & Morning Musume
bryan
46
6.1k
Bash Introduction
62gerente
608
210k
Scaling GitHub
holman
458
140k
Producing Creativity
orderedlist
PRO
341
39k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Practical Orchestrator
shlominoach
186
10k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
The Cult of Friendly URLs
andyhume
77
6k
Automating Front-end Workflow
addyosmani
1365
200k
Transcript
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
loves
loves
カスタムオペレータ - 自分で独自のオペレータを定義できる - バージョン5.5でpipeが提供され、使いやすくなった - 汎用的なものは大体提供されているので、使う機会はそこま で多くない - ある程度使い慣れた人向けの機能(?)
https://github.com/ReactiveX/rxjs/blob/master/doc/operator-creation.md 公式ドキュメント
None
分かりづらい
読み解く
オペレータ?
None
入力:Observable<T> 出力:Observable<R>
None
型を付けるとこう
型を付けるとこう ココ
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を起こす