HttpClient と Observable ― サーバーと通信する

導入

画面に表示するデータの多くは、自分のアプリの外――サーバーのAPI――から取ってきます。Angularではこれを HttpClient で行い、結果は RxJS の Observable という形で受け取ります。

説明

HttpClient の get<T>(url) はすぐに結果を返さず、Observable という「これから値が流れてくる予約券」のようなものを返します。.subscribe() して初めて実際にリクエストが送られます。

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

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <ul>
      <li *ngFor="let u of users">{{ u.name }}</li>
    </ul>
  `,
})
export class AppComponent implements OnInit {
  private http = inject(HttpClient);
  users: User[] = [];

  ngOnInit(): void {
    this.http.get<User[]>('/api/users').subscribe((data) => {
      this.users = data;
    });
  }
}

テンプレート側で購読・解除を自動化する async パイプもよく使われます。

export class AppComponent {
  private http = inject(HttpClient);
  users$ = this.http.get<User[]>('/api/users');
}

<li *ngFor="let u of users$ | async">{{ u.name }}</li>

sequenceDiagram
  participant C as Component
  participant H as HttpClient
  participant S as サーバーAPI
  C->>H: get('/api/users')
  H-->>C: Observable（まだ値はない）
  C->>H: subscribe(callback)
  H->>S: HTTPリクエスト
  S-->>H: レスポンス（JSON）
  H-->>C: callbackにデータを渡す

HttpClient.get<T>(url) … T 型のデータを取得するリクエストを表す Observable<T> を返します（この時点ではまだ通信していません）。
.subscribe(callback) … ここで初めて実際にリクエストが送られ、結果が届いたら callback が呼ばれます。
async パイプ（users$ | async）… テンプレート側で subscribe／購読解除を自動管理してくれる書き方。手動で解除し忘れる事故を防げます。
RxJSの pipe(map(...), filter(...)) などの演算子で、Observable の流れ自体を加工できます（取得したデータの変換・絞り込み）。
provideHttpClient() をアプリのブートストラップに登録しておく必要があります。

まとめ

HttpClient はサーバー通信を Observable という「流れ」として扱います。取得 → subscribe → 画面反映という一連の流れさえ押さえておけば、実務のAPI連携もこの延長です。フォーム（レッスン16）・ルーティング（レッスン17）・通信（このレッスン）が揃うと、CRUD（作成・表示・更新・削除）を伴う実務アプリの骨格が組めるようになります。