【Node.js実戦習得】第8回：Expressフレームワーク入門！ECカートAPIの移行と型安全ルーティング

1. Expressの正体と「ミドルウェア思想」の核心

1. IncomingMessage や ServerResponse を使いやすく拡張し、便利なメソッド（.json() や .status()）を生やすこと。
2. 複雑な条件分岐（if文の嵐）をなくし、関数を数珠つなぎにして処理する『ミドルウェア（Middleware）アーキテクチャ』を提供すること。

2. 【ハンズオン①】Expressの導入とシンプルなサーバー起動

# Express本体のインストール
npm install express

# TypeScript用の型定義ファイルを開発依存（-D）としてインストール
npm install -D @types/express

// src/index.ts
import express, { Request, Response } from 'express';

// 1. Expressアプリケーションのインスタンスを生成
const app = express();
const PORT = 3000;

// 2. ルーティングの定義（GETメソッドで、ルートパス「/」にアクセスされた場合）
app.get('/', (req: Request, res: Response) => {
  // 標準モジュールの writeHead や end を使わず、1行でステータスとテキストを返せる！
  res.status(200).send('Hello, Expressのモダンな世界へようこそ！');
});

// 3. 指定したポートで接続を待ち受ける
app.listen(PORT, () => {
  console.log(`Expressサーバーが http://localhost:${PORT} で起動しました！`);
});

npm run dev

実行結果（ターミナル）

Expressサーバーが http://localhost:3000 で起動しました！

3. 【ハンズオン②】ECカートAPIを完全移行

// src/index.ts
import express, { Request, Response } from 'express';

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

// カート内商品の型定義
interface CartItem {
  id: number;
  productName: string;
  price: number;
  quantity: number;
}

// 疑似データベース（メモリ上に保持する配列）
let cartItems: CartItem[] = [
  { id: 1, productName: 'プログラミング用高級キーボード', price: 35000, quantity: 1 },
  { id: 2, productName: 'Type-C 急速充電ケーブル 1.5m', price: 1800, quantity: 2 }
];

// 【超重要】Express内蔵の組み込みミドルウェアを有効化
// これを書くだけで、リクエストのストリームを裏で自動解析し、req.body にJSONを突っ込んでくれる！
app.use(express.json());


// 1. 【GET /api/cart】 カート内商品の一覧取得
app.get('/api/cart', (req: Request, res: Response) => {
  // .json() メソッドを呼ぶだけで、Content-Type: application/json や utf-8 のヘッダーをExpressが自動付与！
  res.status(200).json(cartItems);
});


// 2. 【POST /api/cart】 カートへの商品追加
app.post('/api/cart', (req: Request, res: Response) => {
  // ストリームのイベント監視は一切不要！すでにオブジェクトとしてパースされている
  const { productName, price, quantity } = req.body;

  // バリデーション（データチェック）
  if (!productName || typeof price !== 'number' || typeof quantity !== 'number') {
    return res.status(400).json({ message: '不正なリクエストデータです。' });
  }

  if (quantity <= 0 || price < 0) {
    return res.status(400).json({ message: '価格は0以上、数量は1以上である必要があります。' });
  }

  const newItem: CartItem = {
    id: cartItems.length > 0 ? Math.max(...cartItems.map(item => item.id)) + 1 : 1,
    productName,
    price,
    quantity
  };

  cartItems.push(newItem);

  // 201 Created で返却
  res.status(201).json(newItem);
});


// サーバーの起動
app.listen(PORT, () => {
  console.log(`カート管理Expressサーバーが起動: http://localhost:${PORT}`);
});

4. フロントエンド開発者が泣いて喜ぶ「URLパラメータ」の超簡単パース

/* 先ほどのコードの app.post の下に追加 */

// 3. 【PUT /api/cart/:id】 カート内商品の数量変更（更新）
app.put('/api/cart/:id', (req: Request, res: Response) => {
  // URLの「:id」の部分は、自動的に req.params.id に文字列として格納される！文字列だから10進数にパースするわよ
  const itemId = parseInt(req.params.id, 10);
  const { quantity } = req.body;

  if (isNaN(itemId) || typeof quantity !== 'number' || quantity <= 0) {
    return res.status(400).json({ message: '不正なリクエストデータです。' });
  }

  // 対象の商品を検索
  const item = cartItems.find(i => i.id === itemId);
  if (!item) {
    return res.status(404).json({ message: '指定された商品がカート内に見つかりません。' });
  }

  // 数量を更新
  item.quantity = quantity;
  res.status(200).json(item);
});


// 4. 【DELETE /api/cart/:id】 カート内商品の削除
app.delete('/api/cart/:id', (req: Request, res: Response) => {
  const itemId = parseInt(req.params.id, 10);

  if (isNaN(itemId)) {
    return res.status(400).json({ message: '無効なID形式です。' });
  }

  const itemIndex = cartItems.findIndex(i => i.id === itemId);
  if (itemIndex === -1) {
    return res.status(404).json({ message: '指定された商品が見つかりません。' });
  }

  // 配列から該当商品を削除
  const deletedItem = cartItems.splice(itemIndex, 1);
  res.status(200).json({ message: 'カートから商品を削除しました', data: deletedItem[0] });
});

5. 【TypeScript深化】ジェネリクスによる完璧な「型安全リクエスト」の設計

• 第1引数 (Params): req.params の型（URLパラメータ）
• 第2引数 (ResBody): res.json() で返すレスポンスボディの型
• 第3引数 (ReqBody): req.body の型（送られてくるJSONの中身）
• 第4引数 (ReqQuery): req.query の型（URL末尾の ?search=xxx などのクエリ）

/* PUTルーティングの部分を以下のように型安全に書き換え */

// 1. URLパラメータの型を定義
interface UpdateParams {
  id: string; // ※req.paramsの中身は最初すべて文字列で入ってくるわ
}

// 2. 送られてくるリクエストボディの型を定義
interface UpdateRequestBody {
  quantity: number;
}

// 3. Request型にジェネリクスを適用（レスポンス型は使わないので空のオブジェクト {} を挟む）
app.put('/api/cart/:id', (req: Request<UpdateParams, {}, UpdateRequestBody>, res: Response) => {
  const itemId = parseInt(req.params.id, 10);

  // TypeScriptの型チェックが炸裂！
  // もしここで「req.body.quantyty」（タイポ）と書くと、エディタ上で即座に赤線エラーを出してくれる！
  const { quantity } = req.body; 

  if (isNaN(itemId) || typeof quantity !== 'number' || quantity <= 0) {
    return res.status(400).json({ message: '不正なリクエストデータです。' });
  }

  const item = cartItems.find(i => i.id === itemId);
  if (!item) {
    return res.status(404).json({ message: '商品が見つかりません。' });
  }

  item.quantity = quantity;
  res.status(200).json(item);
});

6. 実務での注意点：フレームワークに溺れるな、低レイヤを忘れるな

本日のまとめ

• Expressの正体： Node.js標準の http モジュールを使いやすく抽象化した、不動のシェアNo.1を誇る「薄いWebフレームワーク」。
• ミドルウェア（Middleware）： リクエストを受け取ってからレスポンスを返すまでのパイプライン処理。app.use(express.json()) によって、面倒なストリーム解析を自動化できる。
• URLパラメータ： app.delete('/api/cart/:id') のようにパスにコロンを打つことで、動的なURLから req.params.id で簡単に値を取得できる。
• 型安全リクエスト（ジェネリクス）： Request<Params, ResBody, ReqBody, ReqQuery> の型引数を指定することで、req.body や req.params の any を排除し、完全な静的型チェックと自動補完の恩恵を受けられる。

---

次回：第9回「Expressミドルウェアを深堀する！共通ロギング・エラーハンドリング設計」に続く