Express入門

Expressとは？

Expressは、Node.jsで最も広く使われている Webアプリケーションフレームワークです。シンプルで柔軟なAPIを持ち、 ルーティング、ミドルウェア、テンプレートエンジンなどの機能を提供します。

# Expressのインストール
$ mkdir my-server && cd my-server
$ npm init -y
$ npm install express

# 開発用にnodemonもインストール
$ npm install -D nodemon

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

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

// ルートへのGETリクエスト
app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

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

// $ node app.js
// ブラウザで http://localhost:3000 にアクセス

ルーティング

ルーティングは、URLとHTTPメソッドに応じて 処理を振り分ける仕組みです。ExpressではHTTPメソッドに対応したメソッドでルートを定義します。

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

// JSON ボディのパース（POSTリクエスト用）
app.use(express.json());

// GET: データの取得
app.get('/api/users', (req, res) => {
  res.json([
    { id: 1, name: '太郎' },
    { id: 2, name: '花子' },
  ]);
});

// GET: パラメータ付き（/api/users/1）
app.get('/api/users/:id', (req, res) => {
  const userId = req.params.id;
  res.json({ id: userId, name: '太郎' });
});

// POST: データの作成
app.post('/api/users', (req, res) => {
  const { name, email } = req.body;
  console.log('新規ユーザー:', name, email);
  res.status(201).json({ id: 3, name, email });
});

// PUT: データの更新（全体）
app.put('/api/users/:id', (req, res) => {
  const { id } = req.params;
  const { name, email } = req.body;
  res.json({ id, name, email, updated: true });
});

// DELETE: データの削除
app.delete('/api/users/:id', (req, res) => {
  const { id } = req.params;
  res.json({ message: `ユーザー ${id} を削除しました` });
});

app.listen(3000);

リクエストとレスポンス

Expressのコールバック関数は、req（リクエスト）とres（レスポンス）の 2つのオブジェクトを受け取ります。

// === req（リクエスト）オブジェクト ===
app.get('/api/search', (req, res) => {
  // クエリパラメータ: /api/search?q=nodejs&page=2
  console.log(req.query.q);       // 'nodejs'
  console.log(req.query.page);    // '2'

  // リクエストヘッダー
  console.log(req.headers['content-type']);
  console.log(req.headers['authorization']);

  // HTTPメソッド
  console.log(req.method);  // 'GET'

  // URL情報
  console.log(req.path);    // '/api/search'
  console.log(req.url);     // '/api/search?q=nodejs&page=2'

  res.json({ query: req.query });
});

// === res（レスポンス）オブジェクト ===
app.get('/api/demo', (req, res) => {
  // JSON レスポンス
  res.json({ message: 'こんにちは' });

  // ステータスコード付き
  // res.status(201).json({ created: true });

  // テキストレスポンス
  // res.send('Hello!');

  // HTMLレスポンス
  // res.send('<h1>Hello</h1>');

  // リダイレクト
  // res.redirect('/new-url');

  // ファイルダウンロード
  // res.download('./file.pdf');

  // ステータスコードのみ
  // res.sendStatus(204);  // No Content
});

ルーターの分割

アプリが大きくなると、ルーティングをファイルごとに分割すると管理しやすくなります。express.Router()を使います。

// === routes/users.js ===
const express = require('express');
const router = express.Router();

// /api/users のルート
router.get('/', (req, res) => {
  res.json([{ id: 1, name: '太郎' }]);
});

router.get('/:id', (req, res) => {
  res.json({ id: req.params.id, name: '太郎' });
});

router.post('/', (req, res) => {
  res.status(201).json({ ...req.body, id: Date.now() });
});

module.exports = router;

// === routes/posts.js ===
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.json([{ id: 1, title: '初投稿' }]);
});

module.exports = router;

// === app.js（メインファイル） ===
const express = require('express');
const app = express();

const usersRouter = require('./routes/users');
const postsRouter = require('./routes/posts');

app.use(express.json());

// ルーターをマウント
app.use('/api/users', usersRouter);
app.use('/api/posts', postsRouter);

app.listen(3000, () => {
  console.log('サーバー起動: http://localhost:3000');
});

静的ファイルの配信

HTML、CSS、画像などの静的ファイルを配信するには、express.static()ミドルウェアを使います。

const express = require('express');
const path = require('path');
const app = express();

// publicフォルダの中身を静的ファイルとして配信
app.use(express.static('public'));

// プレフィックス付き: /static/style.css → public/style.css
app.use('/static', express.static('public'));

// 絶対パスを使う場合（推奨）
app.use(express.static(path.join(__dirname, 'public')));

// ディレクトリ構成の例:
// my-server/
// ├── app.js
// └── public/
//     ├── index.html
//     ├── style.css
//     ├── script.js
//     └── images/
//         └── logo.png

// http://localhost:3000/index.html
// http://localhost:3000/style.css
// http://localhost:3000/images/logo.png

app.listen(3000);