はじめに

Day05までで、Node.js側にAPIができた。

GET http://localhost:3000/hello

今回はこのAPIを、
Angularから呼び出して画面に表示する。

ここから一気に、

• フロントとバックがつながる
• Webアプリっぽさが出る
• 責務分離の意味が実感できる

段階に入る。

---

今回のゴール

• AngularでHttpClientを使えるようにする
• APIを呼び出すServiceを作る
• 画面に結果を表示する

---

① HttpClientを有効にする

まず app.module.ts に追加。

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    HttpClientModule
  ],
})
export class AppModule {}

これを入れないとHTTPは使えない。

---

② API用Serviceを作る

Angularでは、
API呼び出しは Componentに直接書かない。

Serviceに分離する。

// hello.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface HelloResponse {
  message: string;
}

@Injectable({
  providedIn: 'root'
})
export class HelloService {

  private apiUrl = 'http://localhost:3000/hello';

  constructor(private http: HttpClient) {}

  getHello(name?: string): Observable<HelloResponse> {
    return this.http.get<HelloResponse>(this.apiUrl, {
      params: name ? { name } : {}
    });
  }
}

ここで重要なのは、

• 返ってくる型を明示している
• URLをServiceに閉じ込めている

---

③ Componentから呼び出す

// app.component.ts

import { Component } from '@angular/core';
import { HelloService, HelloResponse } from './hello.service';

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

  message: string = '';

  constructor(private helloService: HelloService) {}

  loadMessage() {
    this.helloService.getHello('mame')
      .subscribe((res: HelloResponse) => {
        this.message = res.message;
      });
  }
}

---

④ HTML側

<button (click)="loadMessage()">APIを呼ぶ</button>

<p>{{ message }}</p>

ボタンを押すと、

• Angular → Node.js API
• JSON受信
• message更新
• 画面再描画

という流れが起きる。

---

ここで起きていること

流れを整理すると：

ボタン押す
  ↓
Component
  ↓
Service
  ↓
Node.js API
  ↓
JSON返却
  ↓
画面更新

フロントとバックが
HTTPという線でつながっている。

---

Observableって何？

正直に言うと、
最初はよく分からなくて普通。

今は、

「非同期で値が返ってくる箱」

くらいの理解で十分。

subscribeしないと値が来ない、
それだけ覚えておけばOK。

---

なぜComponentに直接書かないのか

もしComponentに直接APIを書いたら、

• 画面ロジック
• APIロジック

が混ざる。

将来APIが変わったときに、
全部のComponentを修正することになる。

Serviceに分離しておけば、

• URL変更
• 共通処理追加

が1か所で済む。

---

Day06のまとめ

• AngularはHttpClientでAPIを呼ぶ
• API呼び出しはServiceに書く
• Componentは表示担当
• TypeScriptの型がフロントとバックをつなぐ

ここまで来ると、
「Webアプリの骨組み」が完成している。

---

次回予告

Day07：フォーム入力をAPIに送る（POST処理）

ここから
「読むアプリ」から「書き込むアプリ」に進む。