【TypeScript・Angular・RxJS】HTTPで取得したデータをRxJS Observablesでチェーン処理する方法

TypeScript、Angular、Observable を用いた HTTP データからの RxJS Observables のチェーン処理

このチュートリアルでは、TypeScript、Angular、Observable を使用して、HTTP データから RxJS Observables をチェーン処理する方法を説明します。この手法は、複数の API リクエストを順番に実行し、その結果を組み合わせて処理する際に役立ちます。

前提知識

このチュートリアルを理解するには、以下の知識が必要です。

• HTTP リクエスト
• RxJS Observables
• Angular
• TypeScript

手順

1. 必要なライブラリのインポート

まず、必要なライブラリをインポートする必要があります。

import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

1. 最初の HTTP リクエストの実行

最初の HTTP リクエストを実行するには、HttpClient サービスを使用します。

const firstRequest$: Observable<any> = this.http.get('https://api.example.com/data1');

最初の HTTP リクエストが完了したら、2 番目の HTTP リクエストを実行します。firstRequest$ Observable を使用して、最初の HTTP リクエストの結果を処理します。

const secondRequest$: Observable<any> = firstRequest$.pipe(
  map(data1 => {
    return this.http.get(`https://api.example.com/data2/${data1.id}`);
  }),
  catchError(error => of({ error: error }))
);

1. 処理結果の処理

2 番目の HTTP リクエストが完了したら、処理結果を処理します。

secondRequest$.subscribe(data2 => {
  console.log('Data 1:', data1);
  console.log('Data 2:', data2);
});

例

以下の例は、ユーザー ID を使用してユーザー情報と住所情報を取得する方法を示しています。

import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

export class UserService {

  constructor(private http: HttpClient) {}

  getUser(userId: number): Observable<any> {
    return this.http.get(`https://api.example.com/users/${userId}`);
  }

  getAddress(userId: number): Observable<any> {
    return this.getUser(userId).pipe(
      map(user => {
        return this.http.get(`https://api.example.com/addresses/${user.id}`);
      }),
      catchError(error => of({ error: error }))
    );
  }
}

この例では、getUser メソッドはユーザー情報を取得する Observable を返します。getAddress メソッドは、getUser メソッドからユーザー ID を取得し、その ID を使用して住所情報を取得する Observable を返します。

import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

export class UserService {

  constructor(private http: HttpClient) {}

  getUser(userId: number): Observable<any> {
    return this.http.get(`https://api.example.com/users/${userId}`);
  }

  getAddress(userId: number): Observable<any> {
    return this.getUser(userId).pipe(
      map(user => {
        return this.http.get(`https://api.example.com/addresses/${user.id}`);
      }),
      catchError(error => of({ error: error }))
    );
  }

  getUserAndAddress(userId: number): Observable<{ user: any; address: any }> {
    return this.getAddress(userId).pipe(
      map(address => {
        return {
          user: this.getUser(userId).toPromise(), // Observable を Promise に変換
          address: address
        };
      }),
      catchError(error => of({ error: error }))
    );
  }
}

• toPromise オペレーター：Observable を Promise に変換します。これは、非同期処理を同期的に処理する必要がある場合に役立ちます。
• getUserAndAddress メソッド：ユーザー ID を使用してユーザー情報と住所情報を同時に取得します。

使用方法

以下の例は、getUserAndAddress メソッドを使用してユーザー情報と住所情報を取得する方法を示しています。

const userService = new UserService(this.http);

userService.getUserAndAddress(123).subscribe(data => {
  console.log('User:', data.user);
  console.log('Address:', data.address);
});

注意事項

• エラー処理は簡略化されています。本番環境では、より詳細なエラー処理を実装する必要があります。
• API の URL は、ご自身の環境に合わせて変更してください。

import { forkJoin } from 'rxjs';

const firstRequest$: Observable<any> = this.http.get('https://api.example.com/data1');
const secondRequest$: Observable<any> = this.http.get('https://api.example.com/data2');

forkJoin([firstRequest$, secondRequest$]).subscribe(([data1, data2]) => {
  console.log('Data 1:', data1);
  console.log('Data 2:', data2);
});

combineLatest オペレーターの使用

combineLatest オペレーターは、複数の Observables の最新の値を組み合わせ、新しい Observable を返します。これは、複数の Observables から常に最新の情報を受け取る必要がある場合に役立ちます。

import { combineLatest } from 'rxjs';

const firstRequest$: Observable<any> = this.http.get('https://api.example.com/data1');
const secondRequest$: Observable<any> = this.http.get('https://api.example.com/data2');

combineLatest([firstRequest$, secondRequest$]).subscribe(([data1, data2]) => {
  console.log('Data 1:', data1);
  console.log('Data 2:', data2);
});

merge オペレーターの使用

merge オペレーターは、複数の Observables を単一の Observable に結合します。これは、複数の Observables からのイベントを順不同で処理する必要がある場合に役立ちます。

import { merge } from 'rxjs';

const firstRequest$: Observable<any> = this.http.get('https://api.example.com/data1');
const secondRequest$: Observable<any> = this.http.get('https://api.example.com/data2');

merge(firstRequest$, secondRequest$).subscribe(data => {
  console.log('Data:', data);
});

カスタムパイプの使用

import { Pipe, PipeTransform } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Pipe({
  name: 'getUserAndAddress'
})
export class GetUserAndAddressPipe implements PipeTransform {

  constructor(private http: HttpClient) {}

  transform(userId: number): Observable<{ user: any; address: any }> {
    return this.getAddress(userId).pipe(
      map(address => {
        return {
          user: this.getUser(userId).toPromise(),
          address: address
        };
      }),
      catchError(error => of({ error: error }))
    );
  }

  private getUser(userId: number): Observable<any> {
    return this.http.get(`https://api.example.com/users/${userId}`);
  }

  private getAddress(userId: number): Observable<any> {
    return this.http.get(`https://api.example.com/addresses/${userId}`);
  }
}

この例では、getUserAndAddress カスタムパイプを作成して、getUserAndAddress メソッドと同じ機能を提供しています。このパイプを使用すると、以下のコードのように、テンプレート内でユーザー情報と住所情報を取得することができます。

<div *ngIf="user">
  <h2>User: {{ user.name }}</h2>
  <p>Address: {{ user.address.street }}</p>
</div>

<ng-template #userTemplate let-user>
  <h2>User: {{ user.name }}</h2>
  <p>Address: {{ user.address.street }}</p>
</ng-template>

<ng-container *ngTemplateOutlet="userTemplate; context: { user: getUserAndAddress(userId) }"></ng-container>