Express (Node.js) チートシート

Expressアプリケーションの基本的な初期化とサーバー起動方法です。

// expressモジュールをインポート
const express = require('express');

// Expressアプリケーションを作成
const app = express();

// ポート番号を設定 (環境変数 PORT があればそれを使用、なければ3000)
const port = process.env.PORT || 3000;

// ルートパス ('/') へのGETリクエストに対するハンドラ
app.get('/', (req, res) => {
  res.send('Hello World! 👋');
});

// 指定したポートでリクエストを待ち受ける
app.listen(port, () => {
  console.log(`サーバーがポート ${port} で起動しました 🚀`);
  console.log(`http://localhost:${port}`);
});
        

特定のエンドポイント（URI）とHTTPメソッドに対するリクエストを処理する方法を定義します。

基本的なメソッド

主要なHTTPメソッドに対応する基本的なルーティング設定です。

// GETリクエスト
app.get('/users', (req, res) => {
  // ユーザー一覧を取得して送信
  res.json([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]);
});

// POSTリクエスト
app.post('/users', (req, res) => {
  // 新しいユーザーを作成 (リクエストボディが必要 - 後述のミドルウェア参照)
  const newUser = req.body; // req.body を使うには body-parser 等のミドルウェアが必要
  console.log('Creating user:', newUser);
  res.status(201).send('User created successfully! ✨');
});

// PUTリクエスト (特定リソースの更新)
app.put('/users/:id', (req, res) => {
  const userId = req.params.id;
  const updatedData = req.body;
  console.log(`Updating user ${userId}:`, updatedData);
  res.send(`User ${userId} updated.`);
});

// DELETEリクエスト (特定リソースの削除)
app.delete('/users/:id', (req, res) => {
  const userId = req.params.id;
  console.log(`Deleting user ${userId}`);
  res.send(`User ${userId} deleted.`);
});

// すべてのHTTPメソッドに対応
app.all('/secret', (req, res, next) => {
  console.log('Accessing the secret section ...');
  next(); // 次のハンドラへ処理を渡す
});
        

ルートパラメータ

URLパスの一部をパラメータとして抽出し、req.params オブジェクトで利用します。

// 例: /users/123/books/456
app.get('/users/:userId/books/:bookId', (req, res) => {
  const userId = req.params.userId;
  const bookId = req.params.bookId;
  res.send(`User ID: ${userId}, Book ID: ${bookId}`);
});
        

ヒント ルートパラメータには正規表現を使って制約をかけることも可能です。

// userId は数値のみ受け付ける
app.get('/users/:userId(\\d+)', (req, res) => {
  res.send(`User ID (digits only): ${req.params.userId}`);
});
        

ルートハンドラ

単一のルートに対して複数のハンドラ関数を配列として指定できます。next() を呼び出すことで次のハンドラに処理が移ります。

const handler1 = (req, res, next) => {
  console.log('First handler executed.');
  req.customData = 'Passed from handler1'; // リクエストオブジェクトにデータを追加
  next();
};

const handler2 = (req, res) => {
  console.log('Second handler executed.');
  res.send(`Data from previous handler: ${req.customData}`);
};

app.get('/multi-handler', [handler1, handler2]);
        

app.route()

特定のルートパスに対するチェーナブルなルートハンドラを作成できます。同じパスに対する異なるHTTPメソッドの処理をまとめるのに便利です。

app.route('/items')
  .get((req, res) => {
    res.send('Get a list of items');
  })
  .post((req, res) => {
    res.send('Add a new item');
  });
        

Express Router

モジュール式のマウント可能なルートハンドラを作成します。アプリケーションが大きくなった場合にルート定義を分割・整理するのに役立ちます。

routes/users.js (例):

const express = require('express');
const router = express.Router();

// このルーターのミドルウェア (このルーター内の全ルートに適用)
router.use((req, res, next) => {
  console.log('Time:', Date.now());
  next();
});

// ルートパス ('/') は /users にマウントされる
router.get('/', (req, res) => {
  res.send('Users home page');
});

// /users/about
router.get('/about', (req, res) => {
  res.send('About users');
});

module.exports = router;
        

app.js (メインファイル):

const express = require('express');
const app = express();
const usersRouter = require('./routes/users'); // ルーターをインポート

// '/users' パス以下を usersRouter で処理するようマウント
app.use('/users', usersRouter);

// ... (他の設定やルート)

app.listen(3000);
        

リクエストオブジェクト(req)、レスポンスオブジェクト(res)、およびアプリケーションのリクエスト/レスポンスサイクルにおける次のミドルウェア関数へのアクセス権を持つ関数です。ミドルウェアは主に以下の目的で使用されます。

• 任意のコードを実行する
• リクエストオブジェクトとレスポンスオブジェクトに変更を加える
• リクエスト/レスポンスサイクルを終了させる
• スタック内の次のミドルウェア関数を呼び出す (next())

アプリケーションレベル・ミドルウェア

app.use() または app.METHOD() を使用して、アプリケーション全体または特定のHTTPメソッドにバインドします。

// 全てのリクエストに対して実行されるミドルウェア (パス指定なし)
app.use((req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next(); // 次のミドルウェアまたはルートハンドラへ
});

// '/admin' で始まるパスへのリクエストにのみ適用されるミドルウェア
app.use('/admin', (req, res, next) => {
  console.log('Admin area access attempt.');
  // ここで認証チェックなどを行う
  if (req.headers['x-admin-key'] === 'secret') {
    next();
  } else {
    res.status(403).send('Forbidden 🚫');
  }
});

// 特定のルート (GET /example) の前に実行されるミドルウェア
app.get('/example', (req, res, next) => {
  console.log('Middleware for /example GET route.');
  next();
}, (req, res) => {
  res.send('Example route reached.');
});
        

ルーターレベル・ミドルウェア

express.Router() インスタンスにバインドされます。特定のルーターが処理するリクエストにのみ適用されます。（前述のExpress Routerの例を参照）

エラー処理ミドルウェア

他のミドルウェア関数と異なり、4つの引数 (err, req, res, next) を持ちます。通常、他の app.use() やルート呼び出しの最後に定義します。

// ルートハンドラ内でエラーが発生した場合
app.get('/error-prone', (req, res, next) => {
  try {
    // 何らかのエラーを引き起こす可能性のある処理
    throw new Error('Something went wrong! 🔥');
  } catch (err) {
    next(err); // エラーをエラー処理ミドルウェアに渡す
  }
});

// エラー処理ミドルウェア (4つの引数を取る)
app.use((err, req, res, next) => {
  console.error('Error caught!:', err.stack); // エラーログを出力
  res.status(500).send('Internal Server Error 😥');
});
        

⚠️ エラー処理ミドルウェアは、他のすべての app.use() およびルート定義の後に定義する必要があります。

組み込みミドルウェア

Express にはいくつかの便利な組み込みミドルウェアがあります。

サードパーティ・ミドルウェア

npm でインストールして使用できる多くのサードパーティ製ミドルウェアがあります。

HTTPリクエストを表し、リクエストクエリ文字列、パラメータ、ボディ、HTTPヘッダーなどのプロパティを持ちます。

ExpressアプリがHTTPリクエストを受信したときにクライアントに送り返すHTTPレスポンスを表します。

express.static 組み込みミドルウェアを使用して、HTML、CSS、クライアントサイドJavaScript、画像などの静的アセットを提供します。

// 'public' ディレクトリ内のファイルをルートパスから提供
// 例: public/css/style.css は http://localhost:3000/css/style.css でアクセス可能
app.use(express.static('public'));

// 'assets' ディレクトリ内のファイルを '/static' 仮想パスプレフィックスから提供
// 例: assets/js/main.js は http://localhost:3000/static/js/main.js でアクセス可能
app.use('/static', express.static('assets'));

// 複数の静的ディレクトリを提供 (最初に見つかったものが使用される)
app.use(express.static('public'));
app.use(express.static('files'));

// express.static のオプション
// const path = require('path');
// app.use('/static', express.static(path.join(__dirname, 'public'), {
//   dotfiles: 'ignore', // ドットファイル (.env など) の扱い ('allow', 'deny', 'ignore')
//   etag: true,         // ETag生成を有効にするか (デフォルト: true)
//   extensions: ['html', 'htm'], // ファイル拡張子がない場合に試す拡張子
//   index: false,       // ディレクトリインデックスファイル (index.html) の提供 (デフォルト: 'index.html')
//   maxAge: '1d',       // Cache-Control の max-age (ミリ秒または ms 形式の文字列)
//   redirect: true,     // パスがディレクトリの場合に末尾スラッシュへリダイレクトするか
//   setHeaders: function (res, path, stat) { // カスタムヘッダーを設定する関数
//     res.set('x-timestamp', Date.now());
//   }
// }));
        

💡 静的ファイルを提供するディレクトリ (例: ‘public’) は、Nodeプロセスが実行されるディレクトリからの相対パスです。

サーバーサイドで動的にHTMLを生成するためにテンプレートエンジンを使用します。Expressは多くのテンプレートエンジンと連携できます (EJS, Pug/Jade, Handlebarsなど)。

セットアップ (EJSの例)

// 1. テンプレートエンジンをインストール
// npm install ejs

// 2. Expressにテンプレートエンジンを設定
app.set('view engine', 'ejs');

// 3. ビューファイルが格納されているディレクトリを設定 (デフォルトは 'views')
app.set('views', './views'); // プロジェクトルートに 'views' ディレクトリがあると仮定
        

ビューのレンダリング

ルートハンドラ内で res.render() を使用してビューをレンダリングし、データを渡します。

app.get('/profile', (req, res) => {
  const user = {
    name: '田中 太郎',
    email: 'taro.tanaka@example.com',
    isAdmin: false,
    hobbies: ['読書', '旅行', 'プログラミング']
  };
  // 'views/profile.ejs' をレンダリングし、user オブジェクトを渡す
  res.render('profile', { user: user, title: 'プロフィール' });
});
        

ビューファイル (例: views/profile.ejs)

渡されたデータを使用してHTMLを動的に生成します。

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <!-- ここに Bulma CSS などのスタイルシートをリンク -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title"><%= user.name %> のプロフィール</h1>
      <p class="subtitle">Email: <%= user.email %></p>

      <% if (user.isAdmin) { %>
        <span class="tag is-danger">管理者</span>
      <% } else { %>
        <span class="tag is-info">一般ユーザー</span>
      <% } %>

      <h2 class="title is-4 mt-4">趣味:</h2>
      <ul>
        <% user.hobbies.forEach(function(hobby){ %>
          <li><%= hobby %></li>
        <% }); %>
      </ul>
    </div>
  </section>
</body>
</html>
        

EJS Documentation Pug Documentation Handlebars Documentation

Express アプリケーションを保護するための基本的なベストプラクティスです。

• Helmetの使用: helmet ミドルウェアを使用して、一般的なセキュリティヘッダー (X-Frame-Options, Strict-Transport-Security など) を設定します。
• 依存関係の管理: npm audit を定期的に実行し、依存関係の脆弱性をチェック・修正します。
• HTTPSの使用: 本番環境では必ずHTTPSを使用し、通信を暗号化します。リバースプロキシ (Nginx, Caddy など) を使用してSSL/TLS終端を行うのが一般的です。
• 入力値の検証とサニタイズ: ユーザーからの入力 (req.body, req.query, req.params) は常に検証し、不正なデータや悪意のあるスクリプト (XSS攻撃) を防ぐためにサニタイズします。express-validator などのライブラリが役立ちます。
• レート制限: ブルートフォース攻撃やDoS攻撃を防ぐために、APIエンドポイントへのリクエスト数を制限します。express-rate-limit などのミドルウェアを使用します。
• エラー処理の強化: 詳細なエラー情報 (スタックトレースなど) を本番環境のクライアントに送信しないようにします。エラー処理ミドルウェアで適切に処理し、ログに記録します。
• セッション管理の保護: express-session を使用する場合、セキュアなクッキー属性 (secure: true – HTTPS接続時のみ送信, httpOnly: true – クライアントサイドJSからのアクセス禁止) を設定し、強力な secret を使用します。
• CORSの適切な設定: cors ミドルウェアを使用する場合、許可するオリジンを可能な限り具体的に指定します (* の使用は避ける)。
• SQLインジェクション対策: データベースとやり取りする際は、ORM (Sequelize, Mongooseなど) やパラメータ化されたクエリを使用し、SQLインジェクションを防ぎます。

// 基本的なセキュリティミドルウェアの適用例
const helmet = require('helmet');
const cors = require('cors');
const rateLimit = require('express-rate-limit');

app.use(helmet()); // セキュリティヘッダーを設定

// CORS設定 (例: 特定のオリジンのみ許可)
const corsOptions = {
  origin: 'https://your-frontend-app.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors(corsOptions));

// レート制限 (例: 15分間に100リクエストまで)
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // Limit each IP to 100 requests per `window` (here, per 15 minutes)
  standardHeaders: true, // Return rate limit info in the `RateLimit-*` headers
  legacyHeaders: false, // Disable the `X-RateLimit-*` headers
});
app.use(limiter); // 全てのリクエストにレート制限を適用

// ... 他のミドルウェアやルート設定

// 本番環境向けのエラーハンドラ (スタックトレースを漏洩させない)
app.use((err, req, res, next) => {
  console.error(err.stack); // サーバーログには記録
  res.status(err.status || 500).json({
    error: {
      message: process.env.NODE_ENV === 'production' ? 'Internal Server Error' : err.message,
      // 本番環境では詳細なエラー情報を返さない
    }
  });
});
        

Express セキュリティーに関するベストプラクティス