45. よく使うRxJSオペレーター — map / filter / switchMap

RxJSのオペレーターは、Observableを流れる値を加工する部品です。pipe() は「データが通る加工ライン」で、その中にオペレーターを並べると、値がラインを通るたびに順番に加工されます。map は値を別の形に変換し、filter は条件を満たす値だけを通します。まずはこの2つと、次に説明する switchMap の3つを覚えれば実務の大半をカバーできます。

switchMap は「届いた値をもとに新しい通信を始め、しかも前の通信が残っていたら捨てて乗り換える」オペレーターです。定番は検索画面で、検索語が変わるたびにAPIを呼ぶ場面を考えると、前の検索語のリクエストはもう不要です。switchMapなら古いリクエストを自動でキャンセルし、常に最新の検索語の結果だけが画面に届きます。

つまずきやすいのは、subscribeの中でさらにsubscribeを重ねてしまう書き方です。ネストが深くなるうえ、古いリクエストの結果が後から届いて画面を上書きする不具合の原因になります。「Observableの結果を使って次の通信をしたくなったら switchMap」と覚えておくと、この落とし穴を避けられます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AsyncPipe } from '@angular/common';
import { Subject, switchMap, map } from 'rxjs';

type Product = { id: number; name: string };

@Component({
  selector: 'app-product-search',
  imports: [AsyncPipe],
  template:
    '<input (input)="onInput($event)" placeholder="商品名で検索">' +
    '@for (name of names$ | async; track name) { <p>{{ name }}</p> }',
})
export class ProductSearchComponent {
  private http = inject(HttpClient);
  private keyword$ = new Subject<string>();

  // 加工ライン: 検索語 → (乗り換えつつ)API呼び出し → 名前だけに変換
  names$ = this.keyword$.pipe(
    // 検索語が変わったら前のリクエストを捨てて新しいリクエストに乗り換える
    switchMap((q) =>
      this.http.get<Product[]>('/api/products', { params: { q } })
    ),
    map((products) => products.map((p) => p.name))
  );

  onInput(e: Event) {
    this.keyword$.next((e.target as HTMLInputElement).value);
  }
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗