Angular と RxJS6 で進化した非同期処理制御！forkJoin の代替オペレーターでスマートコーディング

2024-06-20

Angular と RxJS6 における forkJoin 関数は、複数の Observable を同時に実行し、すべての Observable が完了した後に結果を処理する機能を提供します。しかし、最近の Angular バージョンでは、forkJoin の resultSelector オプションは非推奨となり、代わりに pipe と map オペレーターを使用することが推奨されています。

非推奨になった理由

resultSelector オプションは、複数の Observable の結果を組み合わせて新しい値を生成するために使用されます。しかし、このオプションは、以下の理由で非推奨となりました。

コードの読みやすさが低下する
テストが複雑になる
エラー処理が困難になる

代わりに pipe と map オペレーターを使用する

resultSelector オプションの代わりに、pipe と map オペレーターを使用することで、以下の利点が得られます。

コードが読みやすくなる

具体的な書き換え方法

以下のコード例は、forkJoin と resultSelector オプションを使用していたコードを、pipe と map オペレーターを使用したコードに書き換えたものです。

// 非推奨なコード
const observable1 = of(1);
const observable2 = of(2);

forkJoin(observable1, observable2)
  .subscribe(result => {
    const combinedValue = result[0] + result[1];
    console.log(combinedValue); // 3 を出力
  });

// 推奨されるコード
const observable1 = of(1);
const observable2 = of(2);

observable1.pipe(
  forkJoin(observable2),
  map(([value1, value2]) => value1 + value2)
)
  .subscribe(combinedValue => console.log(combinedValue)); // 3 を出力

forkJoin の resultSelector オプションは非推奨となったため、代わりに pipe と map オペレーターを使用するようにしましょう。これにより、コードが読みやすくなり、テストが簡単になり、エラー処理が容易になります。

上記以外にも、combineLatest や withLatestFrom などの RxJS オペレーターを使用することで、forkJoin と同様の処理を行うことができます。それぞれのオペレーターの特性を理解し、状況に応じて適切なオペレーターを選択することが重要です。

サンプルコード：非同期処理の完了を待ってから処理を実行

HTML コード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular forkJoin Example</title>
</head>
<body>
  <div>非同期処理の合計： {{ combinedValue }}</div>

  <script src="https://unpkg.com/@angular/core@latest/bundles/core.umd.js"></script>
  <script src="https://unpkg.com/rxjs@latest/bundles/rxjs.umd.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

TypeScript コード

import { Component } from '@angular/core';
import { Observable, forkJoin, of } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  combinedValue: number;

  constructor() {
    const observable1 = this.getAsyncData(1);
    const observable2 = this.getAsyncData(2);

    forkJoin(observable1, observable2)
      .pipe(
        map(([value1, value2]) => value1 + value2)
      )
      .subscribe((result) => (this.combinedValue = result));
  }

  getAsyncData(value: number): Observable<number> {
    return of(value).pipe(delay(Math.random() * 1000));
  }
}

説明

HTML コードでは、combinedValue プロパティを使用して、非同期処理の合計値を表示する div 要素を定義します。
TypeScript コードでは、AppComponent クラスを定義します。
constructor メの中で、以下の処理を行います。
- getAsyncData 関数を使用して、2 つの非同期処理を Observable として定義します。この関数は、引数として渡された値を返し、ランダムな遅延を加えます。
- forkJoin オペレーターを使用して、2 つの Observable を同時に実行します。
- pipe オペレーターと map オペレーターを使用して、forkJoin の結果を処理します。map オペレーターは、forkJoin の結果の配列を受け取り、配列の最初の要素と 2 番目の要素を合計した値を返します。
- subscribe メソッドを使用して、map オペレーターの出力結果を購読し、combinedValue プロパティに代入します。
getAsyncData 関数は、引数として渡された値を Observable として返し、ランダムな遅延を加えます。

このコードを実行すると、以下のようになります。

2 つの非同期処理が同時に実行されます。
2 つの非同期処理が完了すると、forkJoin オペレーターが結果の配列を発行します。
map オペレーターが結果の配列を受け取り、配列の最初の要素と 2 番目の要素を合計した値を返します。
combinedValue プロパティに代入された値が HTML コードに反映され、非同期処理の合計値が表示されます。

このサンプルコードは、forkJoin と pipe と map オペレーターを使用して、非同期処理の完了を待ってから処理を実行する方法を理解するためのものです。実際のアプリケーションでは、状況に応じてコードを調整する必要があります。

forkJoin 以外の方法

以下に、いくつかの代替手段と、それぞれの利点と欠点について説明します。

combineLatest

利点:
- すべての Observable から最新値を受け取った時点で結果を発行します。
- 複数の Observable の値が変化するたびに、結果が更新されます。
欠点:
具体的な使用例:

例:

const observable1 = of(1);
const observable2 = of(2);

combineLatest(observable1, observable2)
  .subscribe(([value1, value2]) => console.log(value1 + value2)); // 1 + 2 = 3 を出力

withLatestFrom

利点:
- メインの Observable から値を受け取ったときに、最新の副次 Observable の値と組み合わせて結果を発行します。
- メインの Observable が完了しても、副次 Observable が新しい値を発行するたびに結果が更新されます。
具体的な使用例:

const observable1 = of(1);
const observable2 = of(2);

observable1.pipe(
  withLatestFrom(observable2)
)
  .subscribe(([value1, value2]) => console.log(value1 + value2)); // 1 + 2 = 3 を出力

merge

利点:
- どの Observable が先に完了しても、すべての値が発行されます。
欠点:
具体的な使用例:

const observable1 = of(1, 2, 3);
const observable2 = of(4, 5, 6);

merge(observable1, observable2)
  .subscribe(value => console.log(value)); // 1, 2, 3, 4, 5, 6 を順に出力

race

利点:
- 最初に完了した Observable の値のみを発行します。
欠点:
具体的な使用例:

const observable1 = of(1).pipe(delay(1000));
const observable2 = of(2).pipe(delay(500));

race(observable1, observable2)
  .subscribe(value => console.log(value)); // 2 を出力