はじめに
仕事で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オブジェクトのラッパー |