📑

RxJS mapとmergeMapの違い

2020/10/02に公開

RxJS

tech

前提

rxjs について、まだ何もわからない方は、こちらの記事を一度読んでいただけたらと思います。

と同時にこの記事では、

ストリーム
メッセージ
pipe
subscribe

について少し解説します。
特にストリーム、メッセージは、map と mergeMap の説明でよく使います。

ストリーム

observable のことを指します。
const source = of(1,2)
上記は、of によって、変数が source が observable になっているので、変数 source はストリームといえます。

メッセージ

ストリームの中に存在する値を指します。
const source = of(1,2)
of の引数に、1 と 2 を入れていることから、ストリームである source は、メッセージ 1 と 2 をもつといえます。

pipe について

オペレータを呼び出すためのメソッドです。
オペレータは、ストリームを操作します。
今回の主題である、map,mergeMap もオペレーターの区分に該当します。

//ストリームを作る
const number = of(1,2)
//numberのメッセージで、オペレータを使うことができる。
const map = number.pipe(
    map((x) => x ** 2))
//subscribeで値を購読
map.subscribe( val => console.log(val);

1;
4;

##結局 pipe と subscribe の違いは？

pipe がオペレータを呼び出すためのメソッド
subscribe がストリームを購読するメソッドです。

Map

メッセージを処理して、新たなストリームを作成します。

//ストリーム作成
const source = of(1, 2);
//各メッセージに10を足します。
const example = source.pipe(map((val) => val + 10));

const subscribe = example.subscribe((val) => console.log(val));

11;
12;

MergeMap

複数のストリームを一つのストリームにまとめます。

// ストリーム作成
const numbers = of(1, 2, 3);

//mergeMapの引数の中では、numbersストリームのメッセージごとに、新たなストリームを作成しています。
//つまり、ストリームの中で、複数のストリームができています。
//mergeMapによって、それを一つにまとめます。
const result = numbers.pipe(mergeMap((x) => of(x)));

result.subscribe((x) => console.log(x));

1;
2;
3;

まとめ

map は、メッセージを処理して、新たなストリームを作成します。
mergeMap は複数のストリームを一つのストリームにまとめます。