RXJS の pipe() と subscribe() の違い

RXJSにおけるpipe()とsubscribe()の違い

RXJS (Reactive Extensions for JavaScript) では、pipe() と subscribe() という2つの重要なメソッドを使用して、Observableのデータストリームを操作します。これら2つのメソッドは、Observableを処理する際に異なる役割を果たします。

pipe()メソッド

• 例
  
• 機能
  
  • 複数の演算子を連結して、Observableのデータを処理します。
  • 各演算子は、入力ストリームを別のストリームに変換します。
  • 複数の変換を一度に適用できます。
• 役割
  Observableの変換パイプラインを構築します。

const observable = interval(1000); // 1秒ごとに値をエミットするObservable

const transformedObservable = observable.pipe(
  map(value => value * 2), // 各値を2倍にする
  filter(value => value % 3 === 0) // 3の倍数の値だけをフィルタリングする
);

subscribe()メソッド

• 機能
  
  • 購読を解除することもできます。
• 役割
  Observableのデータストリームを購読し、エミットされる値を処理します。

transformedObservable.subscribe(value => {
  console.log(value); // 3の倍数の値がログに出力される
});

要約

• pipe()は、Observableのデータストリームを操作するための変換パイプラインを構築します。

pipe()の例

import { interval, map, filter } from 'rxjs';

const observable = interval(1000); // 1秒ごとに値をエミットするObservable

const transformedObservable = observable.pipe(
  map(value => value * 2), // 各値を2倍にする
  filter(value => value % 3 === 0) // 3の倍数の値だけをフィルタリングする
);

• filter(value => value % 3 === 0): 3の倍数の値だけをフィルタリングする変換を適用します。
• map(value => value * 2): 各値を2倍にする変換を適用します。
• interval(1000): 1秒ごとに値をエミットするObservableを作成します。

transformedObservable.subscribe(value => {
  console.log(value); // 3の倍数の値がログに出力される
});

• この例では、3の倍数の値がログに出力されます。
• subscribe()で、transformedObservableを購読します。

総合的な例

import { interval, map, filter } from 'rxjs';

const observable = interval(1000);

const transformedObservable = observable.pipe(
  map(value => value * 2),
  filter(value => value % 3 === 0)
);

transformedObservable.subscribe(value => {
  console.log(value); // 3の倍数の値がログに出力される
});

toPromise(): ObservableをPromiseに変換する

• 用途
  Observableの値を非同期操作で取得したい場合。

const observable = interval(1000);

observable.pipe(
  take(2) // 最初の2つの値だけを取得
).toPromise().then(values => {
  console.log(values); // [0, 1]が出力される
});

forEach(): Observableの値を逐次処理する

const observable = from([1, 2, 3]);

observable.forEach(value => {
  console.log(value); // 1, 2, 3が出力される
});

toArray(): Observableの値を配列に変換する

const observable = interval(1000);

observable.pipe(
  take(3) // 最初の3つの値だけを取得
).toArray().subscribe(values => {
  console.log(values); // [0, 1, 2]が出力される
});

reduce(): Observableの値を累積して単一の値を生成する

const observable = from([1, 2, 3]);

observable.reduce((acc, value) => acc + value, 0).subscribe(sum => {
  console.log(sum); // 6が出力される
});

これらの代替方法は、特定のユースケースに応じて選択できます。

• reduce()は、値を累積または集計したい場合に適しています。
• toArray()は、すべての値を配列として取得したい場合に適しています。
• forEach()は、副作用的な処理に適しています。
• toPromise()は、非同期操作に適しています。