はじめに

Day04では、APIを Controller と Service に分けて考える
という設計の話を整理した。

今回はその考え方を、
実際のコードとして形にする。

目的は、

• なぜ分けるのか
• どう分けるのか
• 何が読みやすくなるのか

を、コードを見ながら理解すること。

---

今回のゴール

• Controller は「受け取って返す」だけ
• Service に処理を集約する
• TypeScriptの型で役割をつなぐ

この形を作れればOK。

---

フォルダ構成

まずは構成から。

src/
 ├─ index.ts
 ├─ controllers/
 │   └─ helloController.ts
 └─ services/
     └─ helloService.ts

• index.ts：サーバー起動
• controller：APIの窓口
• service：処理担当

---

Service：処理を書く場所

まずは Service。

// src/services/helloService.ts

export type HelloResponse = {
  message: string;
};

export function createHelloMessage(name?: string): HelloResponse {
  const target = name ?? "world";

  return {
    message: `Hello ${target}`
  };
}

ここでやっていることは単純。

• 入力を受け取る
• 必要な処理をする
• 結果を返す

HTTPのことは一切知らない。

---

Controller：リクエストとレスポンス

次に Controller。

// src/controllers/helloController.ts

import { Request, Response } from "express";
import { createHelloMessage } from "../services/helloService";

export function helloController(req: Request, res: Response) {
  const name = req.query.name as string | undefined;

  const result = createHelloMessage(name);

  res.json(result);
}

Controllerがやっているのは、

• リクエストから値を取り出す
• Serviceを呼ぶ
• JSONを返す

判断はしない。処理もしない。

---

index.ts：つなぐだけ

最後にサーバー起動部分。

// src/index.ts

import express from "express";
import { helloController } from "./controllers/helloController";

const app = express();
const port = 3000;

app.get("/hello", helloController);

app.listen(port, () => {
  console.log(`API server running on http://localhost:${port}`);
});

ここはほぼ設定だけ。

---

動作イメージ

ブラウザやcurlで、

http://localhost:3000/hello

{
  "message": "Hello world"
}

http://localhost:3000/hello?name=mame

{
  "message": "Hello mame"
}

---

分割したことで何が良くなったか

この形にすると、

• 処理のテストがしやすい
• APIが増えても整理しやすい
• 将来DB処理を追加しやすい

たとえばDBを使うようになっても、
Serviceに処理を足すだけで済む。

Controllerは基本そのまま。

---

Angularとの接続を意識する

このAPIは、

• URLが決まっている
• JSONの形が決まっている

Angular側では、
このAPIを ただ呼ぶだけ。

フロントとバックの責務が
ここではっきり分かれる。

---

Day05 時点でできていればOKなこと

• Controller と Service の違いが分かる
• 処理を Service に寄せられる
• TypeScriptの型でデータをつなげる

完璧な設計である必要はない。

---

Day05 のまとめ

• Controllerは「窓口」
• Serviceは「処理担当」
• HTTPと業務ロジックを混ぜない
• この構造はNestJSにもそのまま通用する

次回は、
Angular側からこのAPIを呼び出す準備に入る。

---

次回予告

Day06：AngularでAPIを呼び出す（HttpClientの基本）