RxJS における主要なオペレータ
RxJS で用いられる主要なオペレータの紹介です。
数が多いため、一つ一つの利用方法は URL記載の公式ドキュメントを確認してください。
なお、解説の中で pipe 関数を実行する起点の Observable を
Source Observable と表記しています。
Combination
combineLatestWith
combineLatestWith は、Observable に別の Observable を結合させるオペレータです。
combineLatestWith を 用いることで、observer は配列で２つの値を受け取ることになります。
生成された Observable は、2つの observable が値を発行するたびに、
それぞれ値を受け取ります。
withLatestFrom
withLatestFrom は、Observable に別の Observable を結合させるオペレータです。
withLatestFrom を 用いることで、observer は配列で２つの値を受け取ることになります。
observer が初めて値を受け取るのは、結合された ２つの observable が 初めて値を送出したタイミングからとなります。
それ以降は Source Observable の値発行タイミングに基づいて、observer が動作し、
observer が受け取る配列には、それぞれの observable の最新の値が保持されます。
concatWith
concatWith は、Observable の末尾に、別の Observable を付与します。
concatWith の 引数に渡された Observable は、
Source Observable が Complete するまで subscribe すらされません。
生成された Observable は、Source Observableが complete しても、
complete することなく concatWith で紐付けられた Observable の 値の受け取りをスタートします。
mergeWith
mergeWith は、Observable に、別の Observable を付与します。
concatWith の 引数に渡された Observable は、
Source Observable とともに subscribe され値が送出されます。
生成された Observable は、merge されたそれぞれの Observable の値を
区別することなく一つの Observable の中で受け取ります。
merge された すべての Observable が complete すると、
生成された Observable は complete を発行します。
startWith
startWith は Observable の先頭に、引数で渡した任意の値を挿入します。
zipWith
filtering
take
複数回発行される subscribe の 指定分のみの イベントを取得します。
import { of } from 'rxjs';
import { take } from 'rxjs/operators';
const intervalCount = of(...[1, 2, 3, 4, 5, 6, 7, 8, 9]);
const takeFive = intervalCount.pipe(take(3));
takeFive.subscribe((x) => console.log(x)); // 1,2,3
debounceTime
delay
delay は Observable の値の送出を、単純に指定ミリ秒遅らせます。
distinctUntilChanged
distinctUntilChanged は、Source Observable から
連続して同じ値が送出された際に、値の発行を行わないようにします。
あくまで連続して同じ値が送出された際に、フィルタリング処理が行われるだけなので、
結果として observer がユニークな値のみを受け取る、というわけではありません。
import './style.css';
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const obs = of(1, 2, 2, 2, 1, 3, 3, 4).pipe(distinctUntilChanged());
obs.subscribe(console.log); // 1,2,1,3,4
filter
filter は、関数式を利用してObservable の値を制御します。
Source Observable から発行される値のうち、
関数式の中で true を返す値のみが、生成される Observable に渡されます。
takeUntil
Transformation
bufferTime
concatMap
map
map は、関数式を利用してObservable の値を変更します。
Array.map に近いイメージです。
mergeMap
scan
scan は、Observable の値それぞれに特定の関数処理を施して、
それぞれの経過を出力します。
Array.reduce に近いイメージです。
switchMap
others
catchError
Promise の中でエラーが発生した場合の処理を定義することができます。
catchError の関数内で別の Observable を返すことで、
retry
share
tap
tap は pipe の中で値を取得して処理を追加することができます。
tap は pipe の中で記述しても後続の処理に影響を与えません。
tap の挙動は subscribe と似ていますが、
subscribe が値の変更に反応する 主作用として利用されるのに対して、
tap の利用場面はデバッグや副作用の記述目的と限定的です。
switchMap
この記事内での選定基準について
Angular の下記ドキュメント内 中程に記載のあるテーブルでの記述を元に作成しています。
別途、ドキュメント後半で紹介される catchError , delay も追加しています。
その他以下の観点でオペレータを追加/変更しています。
- combineLatest : v8 で deprecated となったため、combineLatestWith に変更
- concat : v8 で deprecated となったため、concatWith に変更
- merge : v8 で deprecated となったため、mergeWith に変更
- zip : v8 で deprecated となったため、zipWith に変更
- retry : 実装上で頻繁に利用される & 他のオペレータでの代替が困難であるため
Discussion