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
220
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
RxJSのカスタムオペレータに挑戦しよう!
Angular触ろうの会 in Fukuoka #5(2018/03/16)の発表資料です。
ponday
March 16, 2018
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.7k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
480
これまでのReact、これからのReact
honda
0
340
Gatsbyお試し
honda
0
140
styled-components or emotion?
honda
0
730
Web ComponentsとAngular
honda
0
160
Atomic Design周りについての私見
honda
1
800
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
890
Other Decks in Programming
See All in Programming
Haskell/Servantを通してWebミドルウェアを捉え直す
pizzacat83
1
610
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
yuriko1211
0
550
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.4k
【やさしく解説 設計編 #1】「ドメイン駆動」と「実装駆動」ってなに? 〜設計の考え方を、たとえ話で学ぼう〜
panda728
PRO
1
140
Claude Team Plan導入・ガイド
tk3fftk
0
240
PostgreSQL 18で考えるUUID主キー
kazuhiro1982
0
420
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
1
230
PHP初心者セッション2026 〜生成AIでは見えない裏側を知る:今だからLAMPを通して仕組みを学ぶ〜
kashioka
0
690
コーディングルールの鮮度を保ちたい for SRE NEXT 2026 / keep-fresh-go-internal-conventions-sre-next-2026
handlename
0
150
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
0
290
初めてのKubernetes 本番運用でハマった話
oku053
0
130
AI Engineeringは、AIプロダクトだけのものか? 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
2
110
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
50
15k
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
30 Presentation Tips
portentint
PRO
1
350
Git: the NoSQL Database
bkeepers
PRO
432
67k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.8k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
65
57k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
450
Six Lessons from altMBA
skipperchong
29
4.4k
Building Applications with DynamoDB
mza
96
7.1k
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を起こす