この記事の目的

Promise と Observable の違いを 業務レベルの具体例 で理解する
UI フレームワーク（特に Angular）で Observable が選ばれる理由を知る
「いつ Promise を使い、いつ Observable を使うべきか」を判断できるようになる

想定読者

TypeScript / Angular の実務経験 1〜3 年目
RxJS を“なんとなく”使っているが、本質を掴みたい人
Angular の HttpClient が Promise を採用しない理由を知りたい人

1. Promise と Observable の違い（業務で発生する問題から理解する）

■ Promise が「バグの原因になる」典型パターン

ケース1：サジェスト検索（入力のたびに API 呼び出し）

Promise で実装すると…

高速タイピングで 前の API をキャンセルできない
古いレスポンスが後から返って UI が書き換わる
→ 実務で最も多い UI バグ

Observable なら…

debounceTime：入力が落ち着くまで待つ
distinctUntilChanged：同じ内容は無視
switchMap：古いリクエストを自動キャンセル

ケース2：5秒ごとの API ポーリング（在庫確認・セッション延命）

Promise：

setInterval と then が混じり可読性が低い
中断が難しい

Observable：

interval(5000).pipe(
  switchMap(() => this.http.get('/api/status'))
).subscribe(status => updateUI(status));

ケース3：画面遷移後に非同期処理が返り UI が壊れる

Promise：

キャンセル不可
画面破棄後に値が返り UI が壊れる
メモリリークの原因にもなる

Observable：

unsubscribe により確実に停止

2. Angular の HttpClient が Observable の理由（深掘り）

★理由1：HTTP は「単発」ではなく「UI 状態の一部」だから

SPA では以下が日常的に起きる：

入力値の変化
再リクエスト
画面遷移
リアルタイム更新

Promise は「単発前提」のため UI 変化に追従できない。
Observable は 継続する値の流れ（ストリーム） なので UI と相性が良い。

★理由2：HTTP キャンセルが必須（Promise では不可能）

UI では高速操作が当たり前。

ユーザーが検索ワードを連続入力
画面移動中に API が返る
古い結果が UI に反映される危険

Observable → unsubscribe() ができる
Promise → ❌ できない

★理由3：switchMap による「古いリクエストの自動キャンセル」

this.keyword$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(keyword => this.http.get(`/api/search?q=${keyword}`))
).subscribe(console.log);

★理由4：非同期処理と UI 状態の合成を容易にするため

Promise：

then チェーン地獄
複雑な合成が難しい

Observable：

combineLatest
map, switchMap, catchError

★理由5：メモリリーク防止（unsubscribe）が重要

Promise：

停止できず処理が残る → メモリリークの温床

Observable：

破棄時に unsubscribe → 安全

3. 結論：Angular が Observable を採用した理由まとめ

Angular が必要とする要件	Promise	Observable
UI と同期した API 呼び出し	✕	◎
キャンセル	✕	◎
古いリクエストの破棄	✕	◎
ポーリング	△	◎
複数ストリームの合成	△	◎
メモリリーク防止	✕	◎

4. サンプルコード：サジェスト検索

@UntilDestroy()
@Component({
  selector: 'app-search',
  template: `<input (input)="onInput($event.target.value)" />`
})
export class SearchComponent {
  private keyword$ = new Subject<string>();

  results$ = this.keyword$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(keyword =>
      this.http.get(`/api/search?q=${keyword}`)
    )
  );

  constructor(private http: HttpClient) {}

  onInput(value: string) {
    this.keyword$.next(value);
  }
}

5. 例え話：Promise vs Observable

Promise = 単発の宅配便

送れば届く
キャンセル不可
住所（UI）が変わっても持ってこられる（バグの原因）

Observable = 配送システム

状態が変われば配送先も変わる
配送停止（unsubscribe）が可能
イベント・入力・ポーリングなどの連続値に対応

6. まとめ

Promise は「単発処理」向け
Observable は「UI × 非同期」向け
Angular の HttpClient が Observable を採用する理由は
UI の安全性・柔軟性・キャンセル制御 を満たすため