カテゴリー
【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる
※ 当ページには【広告/PR】を含む場合があります。
2019/07/07
2022/10/05
「RxJS」
tap
map
mergeMap
switchMap
concatMap
リアクティブな関数型プログラミングの基礎 関数型リアクティブプログラミング (Programmer's SELECTION)
RxjsでのmapとmergeMapの違いを理解する
map
mergeMap
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
//👇オブザーバブルストリームを作成
const obs = of(0, 1, 2, 3, 4, 5, 6, 7, 8);
//※なお配列からストリームを作成する場合、fromオペレーターのほうが簡単
//const obs = from([0, 1, 2, 3, 4, 5, 6, 7, 8]);
//※ES6以降ならスプレッド構文を使って配列とofでストリーム作成が可能
//const obs = of(...[0, 1, 2, 3, 4, 5, 6, 7, 8]);
//👇オブザーバブルにパイプからmapオペレーターを仕込む
const add_one = obs.pipe(
map(x => x+1)
);
//👇ストリームの開始
add_one.subscribe(val => console.log(val));
Observable
Observable
1
2
3
4
5
6
7
8
9
mergeMap
import { of } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
// Create an Obervable
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);
// The first base Observable, base_obs, is overlayed with the second subsidiary
// Observable, sub_obs and then create new 'merged' Observable.
const merged_obs = base_obs.pipe(
mergeMap(x => sub_obs.pipe(
map(i => x+i)
)
)
);
merged_obs.subscribe(x => console.log(x));
1
2
3
4
5
6
7
8
9
「1 > 2 > 3 > ...」
リアクティブな関数型プログラミングの基礎 関数型リアクティブプログラミング (Programmer's SELECTION)
switchMapとconcatMap
mergeMap
switchMap
concatMap
switchMap
mergeMap
switchMap
import { of } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
// Create an Obervable
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);
// The first base Observable, base_obs, is overlayed with the second subsidiary
// Observable, sub_obs and then create new 'switched' Observable.
const switched_obs = base_obs.pipe(
switchMap(x => sub_obs.pipe(
map(i => x+i)
)
)
);
switched_obs.subscribe(x => console.log(x));
1
2
3
4
5
6
7
8
9
mergeMap
concatMap
import { of } from 'rxjs';
import { map, concatMap } from 'rxjs/operators';
// Create an Obervable
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);
// The first base Observable, base_obs, is overlayed with the second subsidiary
// Observable, sub_obs and then create new 'concatenated' Observable.
const concat_obs = base_obs.pipe(
concatMap(x => sub_obs.pipe(
map(i => x+i)
)
)
);
concat_obs.subscribe(x => console.log(x));
1
2
3
4
5
6
7
8
9
mergeMap
switchMap
concatMap
同期処理
リアクティブな関数型プログラミングの基礎 関数型リアクティブプログラミング (Programmer's SELECTION)
mergeMapとswitchMapとconcatMapの違いを同期処理でみてみる
interval(100)
mergeMapを使う場合
import { of, interval } from 'rxjs';
import { map, mergeMap, zip } from 'rxjs/operators';
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);
const merged_obs = base_obs.pipe(
mergeMap(x => sub_obs.pipe(
map(i => x+i),
zip(interval(100)) //👈追記。100msおきにsubの要素が流れる
)
)
);
merged_obs.subscribe(x => console.log(x));
[ 1, 0 ]
[ 4, 0 ]
[ 7, 0 ]
[ 2, 1 ]
[ 5, 1 ]
[ 8, 1 ]
[ 3, 2 ]
[ 6, 2 ]
[ 9, 2 ]
ベース > サブ
switchMapを使う場合
import { of, interval } from 'rxjs';
import { map, switchMap, zip } from 'rxjs/operators';
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);
const switched_obs = base_obs.pipe(
switchMap(x => sub_obs.pipe(
map(i => x+i),
zip(interval(100))
)
)
);
switched_obs.subscribe(x => console.log(x));
[ 7, 0 ]
[ 8, 1 ]
[ 9, 2 ]
Of(6)
Of(0,3)
concatMapを使う場合
import { of, interval } from 'rxjs';
import { map, concatMap, zip } from 'rxjs/operators';
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);
const concat_obs = base_obs.pipe(
concatMap(x => sub_obs.pipe(
map(i => x+i),
zip(interval(100))
)
)
);
concat_obs.subscribe(x => console.log(x));
[ 1, 0 ]
[ 2, 1 ]
[ 3, 2 ]
[ 4, 0 ]
[ 5, 1 ]
[ 6, 2 ]
[ 7, 0 ]
[ 8, 1 ]
[ 9, 2 ]
リアクティブな関数型プログラミングの基礎 関数型リアクティブプログラミング (Programmer's SELECTION)
Takeaway〜まとめ
- map:
1つのObservableの処理の中身を変形させたい場合に使いましょう。
- mergeMap:
2つ以上のObservableを非同期処理させたい場合に使いましょう。
- switchMap:
非同期処理したい場合で、一連の処理の過程は重要視されず、
もっとも新しい処理以外は棄却されても良い場合にはこっちを使いましょう。
- concatMap:
2つ以上のObservableで同期処理させたい場合に使いましょう。
参考
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー