はじめに
普段RxJSを業務で使用しており、感覚的には理解できていて日々の開発では問題なく作業できています。
しかし、質問で正確な意味や挙動を求められると「このオペレーターってどういう意味だっけ」となってしまうことが私自身多々あります。
そこでRxJSの主要オペレーターを簡潔な説明と短いコード例で記載した備忘録を残します。
RxJS主要オペレーターまとめ
①pipe
pipeはObservableを扱う上で必須の仕組みです。
mapやfilterなどのオペレーターはpipeの中に入れることで初めて処理として実行されます。
②of
単一の値や複数の値からObservableを作成します。
of('Hello', 123);
③catchError
エラー発生時に代替の処理や値を返すためのオペレーターです。
代替のデータ（例えば空の配列など）を流すことで、処理を続行させることができます。
.pipe(
catchError(() => of([]))
);
④map
入力された値を別の値に変換します。
of(2).pipe(map(x => x * 2)); // → 4
⑤switchMap, mergeMap, concatMap
1. switchMap
最新の処理だけを実行するオペレーターです。
前の処理はキャンセルされ、最後に発生した値だけが処理されます。
短時間で複数の検索リクエストが飛ぶ場面など、最新の結果だけが必要なケースで使われます。
2. mergeMap
全ての処理を並列(同時)に実行するオペレーターです。
画像アップロードAPIで複数の画像を同時に処理する、のように独立した処理を高速で実行したいケースに向いています。
3. concatMap
直列（1つずつ順番）で処理するオペレーターです。
データベースの書き込みAPIを順番に実行する必要がある場合や、処理順序を厳密に保証したい場合に役立ちます。
⑥filter
条件に合う値だけを流すオペレーターです。
of(1, 2, 3).pipe(filter(n => n % 2 === 0)); // → 2
⑦tap
値を変えずに副作用（ログ出力、外部状態の変更など）を実行するためのオペレーターです。
デバッグの際によく使われます。
of(1).pipe(tap(v => console.log(v)));
⑧forkJoin
複数のObservableが全て完了した後に結果をまとめて返すオペレーターです。
複数のAPIを同時に実行し、全ての結果が揃ってから次の処理をしたい場合に便利です。
forkJoin([api1, api2, api3]);
⑨iif
条件によって返すObservableを切り替える、RxJS版のif文です。
第一引数の関数が返す真偽値に基づいて、第二引数または第三引数のObservableを実行します。
iif(() => isLogin, apiA, apiB); // ログインしている場合はAの処理、ログインしていない場合はBの処理
⑩lastValueFrom
ObservableをPromiseに変換します。
async/awaitと組み合わせたいときに使用します。
await lastValueFrom(apiA);
おわり
現場ではRxJSからPromiseに移行する動きがあり、今後はRxJSをメインで使用する機会は減っていくかもしれません...
ただ、今回整理した内容は過去のコード理解やプログラミングの基礎学習につながりますので、前向きに考えていきたいと思います！
この備忘録がこれからRxJSを学ぶ方々の役に立てれば幸いです。