Skip to content

結合オペレーター(Pipeable Operators) ​

RxJS の結合(Combination)オペレーターは、複数の Observable を組み合わせて新しいストリームを作り出すための強力なツールです。

IMPORTANT

このページでは Pipeable Operators(パイプライン内で使用する形式) を扱います。

Creation Functions(複数のObservableから新しいObservableを作成する形式) については、 3章 Creation Functions を参照してください。

Creation Functions vs Pipeable Operators ​

結合に関連する機能は、2つの形式で提供されています。

Creation Functions(3章で解説) ​

複数のObservableを引数として受け取り、新しいObservableを作成。

typescript
import { concat, merge, combineLatest, zip, race, forkJoin } from 'rxjs';

// Creation Function として使用
const combined$ = concat(obs1$, obs2$, obs3$);
const merged$ = merge(source1$, source2$);

詳細は Creation Functions を参照。

Pipeable Operators(このページで解説) ​

既存のObservableに対して .pipe() 内で使用。

typescript
import { concatWith, mergeWith, combineLatestWith } from 'rxjs';

// Pipeable Operator として使用
const result$ = source$.pipe(
  map(x => x * 2),
  concatWith(other$),
  filter(x => x > 10)
);

Pipeable Operators 一覧 ​

◾ このページで扱うオペレーター ​

オペレーター説明
withLatestFromメインObservableの発行に応じて、最新の他ストリームの値を組み合わせます
mergeAllHigher-order Observableを並行に平坦化します
concatAllHigher-order Observableを順番に平坦化します
switchAll最新のHigher-order Observableに切り替えます
exhaustAll実行中は新しいHigher-order Observableを無視します
combineLatestAll全ての内部Observableの最新値を組み合わせます
zipAll各内部Observableの対応する値をペア化します

◾ Creation Functions として提供されるもの ​

以下は主に Creation Function として使用されます(3章参照)。

Function説明Pipeable版
concat順番に結合concatWith (RxJS 7+)
merge並行結合mergeWith (RxJS 7+)
combineLatest最新値を組み合わせcombineLatestWith (RxJS 7+)
zip対応する値をペア化zipWith (RxJS 7+)
race最速のストリームを採用raceWith (RxJS 7+)
forkJoinすべての完了を待つ(Pipeable版なし)

さらに実践的に学びたい方へ ​

結合オペレーターを使ったリアルなシナリオ例は、
実用的なユースケース にて詳しく紹介しています。

Released under the CC-BY-4.0 license.