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
180
RxJSのカスタムオペレータに挑戦しよう!
Angular触ろうの会 in Fukuoka #5(2018/03/16)の発表資料です。
ponday
March 16, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
400
これまでのReact、これからのReact
honda
0
300
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
660
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Other Decks in Programming
See All in Programming
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
400
Swift Testingのモチベを上げたい
stoticdev
2
160
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
630
クックパッド検索システム統合/Cookpad Search System Consolidation
giga811
0
100
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
1
140
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
120
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
290
読まないコードリーディング術
hisaju
0
110
color-scheme: light dark; を完全に理解する
uhyo
7
500
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
What's in a price? How to price your products and services
michaelherold
244
12k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Become a Pro
speakerdeck
PRO
26
5.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
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を起こす