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
160
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
270
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
630
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
600
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
720
Other Decks in Programming
See All in Programming
私のEbitengineの第一歩
qt_luigi
0
450
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
How to Break into Reading Open Source
kaspth
2
210
GoのIteratorに詳しくなってしまう
inatonix
1
200
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
オートマトン学習しろ / Do automata learning
makenowjust
3
130
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Securify_エンジニア採用資料
3shake
0
100
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Speed Design
sergeychernyshev
22
430
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Agile that works and the tools we love
rasmusluckow
327
20k
The Invisible Side of Design
smashingmag
296
50k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
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を起こす