LoginSignup
6

More than 3 years have passed since last update.

RxJSオペレーター逆引き

Last updated at Posted at 2020-06-30

はじめに

仕事でAngularをやることになりRxJSを使うことになったのだが、
最新バージョンでのオペレーターについて全然知らなかった&記事がなかったので逆引きを作成してみる。
また、だいたいがDeepL翻訳頼みの和訳。
ちゃんと理解できているものは少ないのでこんなものなんだ程度に…
間違っている部分などあれば遠慮なくご指摘ください。

現場で見返せるようにQiitaに投稿しておくことにしました。
Qiita初投稿なので至らない点ありましたら何卒ご容赦を…

参考にしたサイトや記事

RxJS - API List

Learn RxJS

偉大なる先人

RxJS Observable まとめ

バージョン

rxjs: "~6.5.4"

生成

できること オペレーター 備考
ajax通信する ajax
観測可能なオブジェクトを作成 create
すぐに完了する空のObservableを作成する empty 非推奨となり、EMPTY定数、またはスケジュールされた定数を使用するように。
イテレータからObservableに変換する from
DOM要素のイベントからObservableを作成する fromEvent Hot Observable
fromEventでは扱えないイベントをObservableに変換する fromEventPattern Hot Observable
Observableをfor文っぽい形で生成する generate
一定間隔ごとに値を発信するObservableを作成する interval
引数に入れた値をそのままObservableにしたい of
連続した数字のObservableを作成する range 指定された範囲内の数値を連続して出力するObservableを作成します。
一定時間後に一定間隔で値を発信するObservableを作成する timer
何も流れてこないObservableを作成する never NEVER定数を使用するために非推奨となりました。
配列のObservableを生成する pairs
2つのObservableでif文を使いたい iif iifはdeferで簡単に実装でき、利便性と可読性のためだけに存在している
一番発行の速い Observable を使う race
それ以外の独自方法でシーケンスを作りたい Subjectのどれかを使用

値の変換

できること オペレーター 備考
Observableに含まれる値数を数えたい count
値中のObservableを直列に展開したい concatMap
Observable が発行した値を observable として発行する concatMapTo
値ごとにObservableを引き延ばしたい expand
2つのObservableをフラット化 exhaust 最初のObservableが発行されたら次を発行。最初の発行前に次のが発行されると無視される。
2つのObservableをフラット化 exhaustMap concatMap() とだいたい同じ
値中のObservableを並列に展開したい flatMap map と mergeAll とを組み合わせたもの
Observable全体をキーごとにグループ分けしたい groupBy
値を変えたい map
Observable発行時なにかしたい mapTo Observableが値を放出するたびに、与えられた定数値をObservableに出力
Observable の値を変換して、別の Observable と合成する mergeMap
Observable の値を特定の Observable に変換して発行する mergeMapTo
値全体に対して何らかの計算をして、一つの結果値を得たい reduce sumやaverage的なことを自作する時に使用。aggregateは言語によってはdeprecated
値と前回の結果とで何らかの計算をして次のObservableに流したい scan windowやthrottle的なことを自作する時に使用。
外側の Observable が発行する度に内側の Observable に切り替わる switchAll 切り替わると切り替わる前のObservableは終了する?
値中のObservableを並列に展開するが、新しいObservableから値が来たら古いObservableを無視したい switchMap 複数の内部サブスクリプションを維持したい場合は、mergeMap
Observable が発行する度に指定された Observable が発行する switchMapTo ソースからの放出値を考慮する必要がある場合は、switchMap
Observable全体を配列に変換したい toArray
値を前後で束ねてObservableにして、新たな値にしたい window
ソースからの値のオブザーバブルで、カウントが満たされるたびに放出 windowCount
提供された各時間スパンでソースから収集された値のObservable windowTime
指定した時間の間にソースから値の観測値を収集して放出 windowToggle
指定した時間ごとにObservableを発行する windowWhen

フィルタ・カット

できること オペレーター 備考
指定した Observable が発行したら最新の値を発行 audit
指定された時刻が来たら最新の値を発行 auditTime
指定した Observable が発行するまで遅延する debounce 指定したObservableが発行する前に次の値が発行したら遅延した値は消える
指定した時間まで遅延する debounceTime 指定した時間が経つ前に次の値が発行したら遅延した値は消える
重複削除 distinct Observableが発行する値の重複を排除
直前の値と重複していたら削除 distinctUntilChanged Observableが発行する値のうち、直前の値と同じ場合は排除
keyと重複していたら削除 distinctUntilKeyChanged Observableが発行する値のうち、特定の Key に対して直前の値と同じ場合は排除
値が変わった時だけ値を通したい distinctUntilChanged
Observableを条件式でフィルタしたい filter
指定した条件を満たす値を発行 find predicateで指定する条件を満たす値を発行
指定した条件を満たす値のインデックスを発行 findIndex
最初の値だけ通したい first
ObservableのonComplete/onErrorだけを通したい ignoreElements
最後の値だけ通したい last 値が無い時はエラーとなる
値の特定のプロパティの値が欲しい pluck 各ソース値(オブジェクト)を、指定されたネストされたプロパティにマップします。
値を一つだけ通したい single 式を通過したものだけ通す。値が無い時はエラーとなる2つ以上来たはerrorとなる
値を一定間隔で削りたい sample throttleと似た機能
period で指定された時間が経った時に最新の値を発行する sampleTime
Observableを指定した件数まで飛ばしたい skip
Observableを条件式が成立するまで飛ばしたい skipWhile
Observableを他のObservableから値が来るまで飛ばしたい skipUntil
Observableを最後から指定した件数を飛ばしたい skipLast
Observableを先頭から指定した件数までで切りたい take
Observableを先頭から条件式が成立しなくなるまでで切りたい takeWhile
Observableを先頭から他のObservableから値が来るまでで切りたい takeUntil
Observableを最後から指定した件数までにしたい takeLast 最後はOnCompleteが無いと決まらないことに注意。
値が高頻度で飛びすぎなのを削りたい throttle
指定した時間Observableを無視 throttleTime
Observableの中から指定した位置の値を取り出す elementAt

時間や前後

できること オペレーター 備考
値を前後で束ねて配列にして、新たな値にしたい buffer
指定したbufferSizeに達するまで、ソースの値をバッファリング bufferCount
指定したbufferTimeSpanに達するまで、ソースの値をバッファリング bufferTime
指定した間Observableの値をバッファリング bufferToggle
バッファを閉じる、放出する、リセットするタイミングを指定する bufferWhen
Observableを遅延させたい delay
Observable の発行をdelayDurationSelectorで返却するObservableの分だけ遅延 delayWhen
値に前回値からの経過時間を付与したい timeInterval rxjsではインターフェースとなる
値にタイムスタンプを付与したい timeStamp rxjsではインターフェースとなる

Observableの分岐・合成

できること オペレーター 備考
Observablesが完了したときにcombineLatestを適用 combineAll
複数のObservableのうち、どれか一つに値が来たら、他のObservableの直前の値と合わせて流したい combineLatest
終了時に次のObservableを繋げたい concat
外側の Observable が発行されたら内側の Observable の発行が完了するまで待つ concatAll
Observable開始時指定した値を発行 startwith
Observable終了時指定した値を発行 endWith
複数のObservableの最後の値を新たなObservableにしたい forkJoin
複数のObservableをそのままmergeしたい merge
外側の Observable が発行されたら内側の Observable が発行し始める mergeAll 最初のObservableが発行されたら次を発行。最初の発行前に次のが発行されるとそれぞれの値を発行する
Observable の値を別の Observable に変換してアキュムレーターで蓄積する mergeScan
Observable の値のうち2つをペアにする pairwise 1,2,3,4→[1,2],[2,3],[3,4]といった感じ
Observable が発行するときに、別の Observable の最新の値と合成して発行する withLatestFrom
複数のObservableのうち、すべてに一つ値が来たら、合わせて流したい zip
外側の Observable を内側の Observable に合成して発行する zipAll
ConnectableObservableを普通のobservableとして扱う refCount
Observable 自体を predicate の条件で分離する partition 真の場合と偽の場合の2つのObservableを持つ配列を出力
スケジューリングされるObservableに変換 scheduled

条件チェック

できること オペレーター 備考
Observableのすべての値が条件式に適合するかを調べたい every
複数のObservableに同じ値が飛んできているかを判定したい sequenceEqual
Observable の発行する値が Empty かどうか isEmpty
Observableの発行がEmptyだった場合にデフォルト値を発行 defaultIfEmpty
Emptyの場合エラーを発行する throwIfEmpty
オブジェクトがRxJS Observableであるかどうかをテスト isObservable

エラーハンドリング

できること オペレーター 備考
エラー時に再度subscribeしたい retry
Observable がエラーを発行したら notifier を基にリトライを行う retryWhen
エラー時にエラーに対処したい catchError
エラー時に次のObservableを繋げたい onErrorResumeNext
オブザーバーにアイテムを出さず、エラー通知を即座に出すObservableを作成 throwError
コールバック付きの関数から Observable を作成 bindCallback 入出力がObservablesではないので、演算子ではない
Node.jsスタイルのコールバック付きの関数から Observable を作成 bindNodeCallback
指定したソースが完了またはエラーで終了した場合に指定した関数を呼び出す finalize
Observableにタイムアウトを指定したい timeout timeout時にerrorにするか、別のObservableにするかを選べる
タイムアウト時刻まで発行が無い場合は別の Observable を発行する timeoutWith

マルチキャスト

できること オペレーター 備考
Observableを分岐したい publish Hot変換。shareはSubscribeされた時に自動でconnectする。
Observableを分岐し、分岐先には直前の値を返したい publishLast Hot変換だが、cold的要素あり。内部的にはAsyncSubjectをmulticastしたのと同じ
先頭に値を追加してObservableを分岐(?) publishBehavior BehaviourSubjectを利用し、ConnectableObservableを返す
マルチキャスト対応にする(?) publishReplay
Observableを分岐したいが、その時に好きなSubjectを使いたい multicast Hot変換
複数Subscribeしたい share
Observableを分岐&キャッシュしたい shareReplay Hot変換だが、cold的要素あり。内部的にはReplaySubjectをmulticastしたのと同じ

非同期

できること オペレーター 備考
subscribe時の処理を特定のタイミングやスレッドで行いたい subscribeOn
Observableを特定のスレッドに切り替えたい/非同期で行いたい observeOn

遅延評価

できること オペレーター 備考
Observable作成をSubscribe時まで遅延させたい defer Subscribe時にObservableを作成。defer は iif 演算子の一部として使用される
Observable作成をSubscribe時まで遅延させ、シーケンスにリソースを紐付けたい using リソースはシーケンス終了後、リソース.dispose()が呼び出される

その他

できること オペレーター 備考
Observableには影響をあたえないで何か処理したい tap いわゆるdo
Observableのイベントのメタ情報を値に付与したい/onComplete/onErrorも値化したい materialize next,complete,errorとかのメタデータを放出する
NotificationをObservableに変換 dematerialize materialize()の逆。next, error, completeとして放出。
終了時に再度subscribeしたい repeat
notifier が発行された時に本線を繰り返す Observable を作成する repeatWhen
HTTP リクエストを行うために Fetch API を使用する fromFetch
observable を promise に変換 toPromise observableを返さないので、パイプライン可能な演算子ではない
WebSocket接続を介して値の送受信をする webSocket w3c互換のWebSocketオブジェクトのラッパー

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6