Express.jsの導入とREST APIの概念

はじめに

前回の記事では、バックエンド連携の全体像について学びました。今回は、その中核をなすExpress.jsの導入とREST APIの概念について詳しく解説します。Express.jsはNode.jsでWebアプリケーションやAPIを構築するための最も人気のあるフレームワークで、Reactアプリケーションとバックエンドを連携させる際の基盤となります。

Express.jsとは

Express.jsはNode.jsのための高速で、革新的で、最小限のWebフレームワークです。以下の特徴があります：

• 軽量で柔軟な中間件（ミドルウェア）架构
• ルーティングシステムの提供
• HTTPユーティリティメソッドの提供
• テンプレートエンジンとの統合が容易

プロジェクトのセットアップ

まずは、新しいExpress.jsプロジェクトを作成しましょう。

mkdir my-express-app
cd my-express-app
npm init -y
npm install express

基本的なExpressサーバーの作成

最小限のExpressサーバーを作成してみましょう。

// server.js
const express = require('express');
const app = express();
const port = 3000;

// 基本的なルートの設定
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// サーバーの起動
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

サーバーを起動するには、以下のコマンドを実行します：

node server.js

ブラウザでhttp://localhost:3000にアクセスすると、「Hello World!」と表示されます。

REST APIの基本概念

REST（Representational State Transfer）は、Webサービス設計のための architectural style（建築様式）です。RESTful APIは以下の原則に従います：

1. 統一インターフェース: 標準化された方法でリソースと対話
2. ステートレス: 各リクエストは独立しており、必要なすべての情報を含む
3. キャッシュ可能: レスポンスはキャッシュ可能であるべき
4. クライアント/サーバー架构: 関心の分離
5. 階層化システム: クライアントはエンドサーバーに直接接続しているかどうかを知らない

HTTPメソッドとCRUD操作

REST APIでは、HTTPメソッドを使用してリソースに対する操作を表現します：

Express.jsでのRESTfulルーティング

では、TODOアイテムを管理する簡単なREST APIを作成してみましょう。

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

// ミドルウェアの設定（JSONボディのパース）
app.use(express.json());

// 簡易的なデータストア（後ほどデータベースに置き換えます）
let todos = [
  { id: 1, title: 'Reactを学ぶ', completed: false },
  { id: 2, title: 'Expressを学ぶ', completed: false }
];

// GET /todos - すべてのTODOを取得
app.get('/todos', (req, res) => {
  res.json(todos);
});

// GET /todos/:id - 特定のTODOを取得
app.get('/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const todo = todos.find(t => t.id === id);

  if (!todo) {
    return res.status(404).json({ error: 'Todo not found' });
  }

  res.json(todo);
});

// POST /todos - 新しいTODOを作成
app.post('/todos', (req, res) => {
  const { title, completed = false } = req.body;

  if (!title) {
    return res.status(400).json({ error: 'Title is required' });
  }

  const newTodo = {
    id: todos.length > 0 ? Math.max(...todos.map(t => t.id)) + 1 : 1,
    title,
    completed
  };

  todos.push(newTodo);
  res.status(201).json(newTodo);
});

// PUT /todos/:id - TODOを更新
app.put('/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const todoIndex = todos.findIndex(t => t.id === id);

  if (todoIndex === -1) {
    return res.status(404).json({ error: 'Todo not found' });
  }

  const { title, completed } = req.body;

  // 更新されたTODOを作成
  const updatedTodo = {
    id,
    title: title || todos[todoIndex].title,
    completed: completed !== undefined ? completed : todos[todoIndex].completed
  };

  todos[todoIndex] = updatedTodo;
  res.json(updatedTodo);
});

// DELETE /todos/:id - TODOを削除
app.delete('/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const todoIndex = todos.findIndex(t => t.id === id);

  if (todoIndex === -1) {
    return res.status(404).json({ error: 'Todo not found' });
  }

  todos = todos.filter(t => t.id !== id);
  res.status(204).send();
});

// サーバーの起動
app.listen(port, () => {
  console.log(`TODO API server running at http://localhost:${port}`);
});

APIのテスト方法

作成したAPIは、以下のツールでテストできます：

1. curlコマンド:

   # すべてのTODOを取得
   curl http://localhost:3000/todos

   # 新しいTODOを作成
   curl -X POST -H "Content-Type: application/json" -d '{"title":"新しいTODO"}' http://localhost:3000/todos

2. Postman: GUIでAPIリクエストを作成・テストできるツール
3. Thunder Client (VSCode拡張): VSCode内でAPIテストが可能

ミドルウェアの活用

Express.jsの強力な機能の一つがミドルウェアです。リクエストとレスポンスの間で処理を行う関数です。

// ロギングミドルウェア
app.use((req, res, next) => {
  console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`);
  next(); // 次のミドルウェアまたはルートハンドラーに処理を渡す
});

// エラーハンドリングミドルウェア
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ error: 'Something went wrong!' });
});

次のステップ

今回作成したAPIはメモリ上にデータを保存しているため、サーバーを再起動するとデータが失われます。次の記事では、MySQLデータベースを導入し、データの永続化を行う方法を学びます。さらに、Prisma ORMを使用して、より安全かつ効率的にデータベース操作を行う方法を解説します。

まとめ

Express.jsを使用すると、簡単にRESTful APIを構築できます。今回学んだ内容：

1. Express.jsの基本的なセットアップ方法
2. REST APIの設計原則とHTTPメソッドの使い分け
3. CRUD操作に対応するルーティングの実装方法
4. ミドルウェアの概念と活用方法

これらの知識は、Reactアプリケーションとバックエンドを連携させるための基盤となります。次のステップでは、データベース連携を学び、本格的なアプリケーション開発に進みましょう。