TypeScript & Angular での HTTP レスポンス処理：サンプルコード

TypeScriptとAngularにおけるHTTPレスポンスの処理

HttpClientサービスのインジェクション

まず、HttpClientサービスをコンポーネントにインジェクションする必要があります。以下は、コンポーネントのコンストラクタにHttpClientサービスをインジェクションする例です。

constructor(private http: HttpClient) { }

HTTPリクエストの実行

HttpClientサービスには、get(), post(), put(), delete()などのメソッドが用意されており、これらのメソッドを使用してHTTPリクエストを実行することができます。以下は、get()メソッドを使用してAPIエンドポイントからデータを取得する例です。

this.http.get('https://api.example.com/data')
  .subscribe(response => {
    this.data = response;
  });

レスポンスの処理

HTTPリクエストが成功すると、subscribe()メソッドに渡されたコールバック関数が呼び出されます。このコールバック関数には、レスポンスデータが引数として渡されます。レスポンスデータは、JSON形式やXML形式など様々な形式で取得することができます。

1 JSON形式のレスポンス

レスポンスデータがJSON形式の場合は、JSON.parse()関数を使用してJavaScriptオブジェクトに変換することができます。以下は、JSON形式のレスポンスデータをJavaScriptオブジェクトに変換し、コンポーネントのプロパティに格納する例です。

this.http.get('https://api.example.com/data')
  .subscribe(response => {
    this.data = JSON.parse(response);
  });

2 XML形式のレスポンス

レスポンスデータがXML形式の場合は、DOMParserを使用してDOMオブジェクトに変換することができます。以下は、XML形式のレスポンスデータをDOMオブジェクトに変換し、必要なデータを取り出す例です。

this.http.get('https://api.example.com/data.xml')
  .subscribe(response => {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(response, 'text/xml');

    const elements = xmlDoc.getElementsByTagName('item');
    for (const element of elements) {
      const id = element.getAttribute('id');
      const name = element.textContent;
      console.log(`id: ${id}, name: ${name}`);
    }
  });

エラーハンドリング

HTTPリクエストが失敗した場合、subscribe()メソッドに渡されたコールバック関数のerror引数にエラーオブジェクトが渡されます。このエラーオブジェクトを使用して、エラー処理を行うことができます。以下は、HTTPリクエストのエラーを処理する例です。

this.http.get('https://api.example.com/data')
  .subscribe(
    response => {
      console.log('success!');
    },
    error => {
      console.error('error:', error);
    }
  );

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

コンポーネントの定義

@Component({
  selector: 'app-http-example',
  templateUrl: './http-example.component.html',
  styleUrls: ['./http-example.component.css']
})
export class HttpExampleComponent implements OnInit {

  data: any;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fetchData();
  }

  fetchData() {
    this.http.get('https://jsonplaceholder.typicode.com/posts/1')
      .subscribe(response => {
        this.data = response;
        console.log(this.data);
      });
  }
}

テンプレート

<div>
  <h2>HTTP Response Example</h2>
  <p>ID: {{ data.id }}</p>
  <p>Title: {{ data.title }}</p>
  <p>Body: {{ data.body }}</p>
</div>

コードの説明

• import ステートメントを使用して、必要なライブラリ (HttpClient) をインポートします。
• @Component デコレータを使用して、コンポーネントを定義します。
• constructor メソッドで、HttpClient サービスをコンポーネントにインジェクションします。
• ngOnInit ライフサイクルフックで、fetchData メソッドを呼び出してデータフェッチを開始します。
• fetchData メソッドは、HttpClient サービスの get() メソッドを使用して、指定されたURLからデータを取得します。
• subscribe() メソッドは、HTTPリクエストが完了したときに呼び出されるコールバック関数を定義します。
• コールバック関数内で、レスポンスデータをコンポーネントのプロパティ (data) に格納し、コンソールにログ出力します。
• テンプレートは、コンポーネントのプロパティ (data) をバインドして、レスポンスデータを画面に表示します。

• TypeScriptを使用して、Angularコンポーネントを作成する方法
• HttpClient サービスを使用して、非同期HTTPリクエストを行う方法
• レスポンスデータを処理して、コンポーネントのプロパティに格納する方法
• テンプレートを使用して、レスポンスデータを画面に表示する方法

Angular パイプを使用して、レスポンスデータを加工してからテンプレートに表示することができます。例えば、次のパイプを使用して、レスポンスデータの日付をフォーマットすることができます。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {

  transform(value: Date | string, format?: string): string {
    if (!value) {
      return '';
    }

    let date: Date;
    if (typeof value === 'string') {
      date = new Date(value);
    } else {
      date = value;
    }

    return new Intl.DateTimeFormat('ja-JP', { dateStyle: format || 'long' }).format(date);
  }
}

テンプレートでは、次のようにパイプを使用することができます。

<p>Date: {{ data.date | dateFormat }}</p>

カスタムオペレーターを使用する

RxJS のカスタムオペレーターを使用して、レスポンスデータを処理することができます。例えば、次のオペレーターを使用して、レスポンスデータから特定のフィールドを抽出することができます。

import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

const extractData = <T, D>(data: T, field: keyof T): Observable<D> => {
  return of(data[field]);
};

this.http.get('https://api.example.com/data')
  .pipe(
    map(extractData('id', 'name'))
  )
  .subscribe(data => {
    console.log(data);
  });

NgRx Storeを使用する

NgRx Storeを使用して、アプリケーション全体のステートを管理し、HTTPレスポンスデータをステートに格納することができます。コンポーネントは、ステートから必要なデータを取得することができます。

サードパーティライブラリを使用する

Axiosやfetch APIなどのサードパーティライブラリを使用して、HTTPリクエストを行い、レスポンスを処理することができます。