Express

このハンドブックでは、Node.js の人気フレームワークである Express の基本的な使い方から、応用的な内容までを解説します。本稿では、最新の ESM (ECMAScript Modules) ベースでの記述を採用しています。

はじめに

Express は、Node.js 上で動作する軽量で柔軟な Web フレームワークです。高速で、簡潔なコードで Web アプリケーションや API を構築するためのツールを提供します。

• 公式サイト
• GitHubリポジトリ

Expressのインストール

Express をインストールするには、Node.js と npm (Node Package Manager) が必要です。

インストール手順

1. Node.js がインストールされていることを確認してください。
2. 新しいプロジェクトを作成します。

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

3. Express をインストールします。

   npm install express
   

基本的なルーティング

以下は基本的な Express アプリケーションの例です。

コード例

hello-app.mjs

import express from 'express';

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

// ルートに対するリクエストを処理
app.get('/', (req, res) => {
res.send('Hello, World!');
});

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

サービスを起動

node hello-app.mjs

ミドルウェア

ミドルウェアは、リクエストとレスポンスの処理を拡張するための関数です。Express アプリケーションでは、ミドルウェアを使ってさまざまな機能を追加できます。

基本的なミドルウェアの使用例

logging-app.mjs

import express from 'express';

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

// リクエストログを出力するミドルウェア
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next();
});

app.get('/', (req, res) => {
  res.send('Hello, Middleware!');
});

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

テンプレートエンジン

Express は、HTML を生成するためにテンプレートエンジンと連携できます。以下は EJS を使用する例です。

設定例

1. EJS をインストールします。

   npm install ejs
   

2. アプリケーションで設定します。

   ejs-app.mjs

   import express from 'express';
   const app = express();
   const PORT = 3000;
   app.set('view engine', 'ejs');
   app.get('/', (req, res) => {
     res.render('index', {
       name: 'World'
     });
   });
   app.listen(PORT, () => {
     console.log(`サーバーが http://localhost:${PORT} で起動しました`);
   });
   

3. views/index.ejs ファイルを作成します。

   views/index.ejs

   <h1>Hello, <%= name %>!</h1>
   

静的ファイルの配信

静的ファイル（画像、CSS、JavaScript など）を配信するには、express.static を使用します。

設定例

static-app.mjs

import express from 'express';
import path from 'path';

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

// 静的ファイルを配信
const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, 'public')));

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

エラー処理

Express では、エラーハンドリング用のミドルウェアを使用してエラーを処理します。

基本例

error-handle-app.mjs

import express from 'express';

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

app.get('/', (req, res) => {
  throw new Error('意図的なエラーです');
});

// エラー処理ミドルウェア
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('何か問題が発生しました!');
});

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

デプロイ

Express アプリケーションを本番環境にデプロイする方法を解説します。

Heroku でのデプロイ例

1. Heroku CLI をインストールします。
2. アプリケーションを Heroku にプッシュします。

   git init
   heroku create
   git add .
   git commit -m "First commit"
   git push heroku main
   

ユーティリティ

Express 関連の便利なユーティリティやライブラリはいくつかあります。それらを利用することで、より効率的にアプリケーションを構築したり、特定の課題を解決できます。以下に主要なユーティリティをいくつか挙げて説明します。

Express関連の便利なユーティリティ

ユーティリティ名	説明	インストール方法
express-generator	Express アプリケーションの雛形を自動生成する公式ツール。	npm install -g express-generator
morgan	HTTP リクエストのログを記録するミドルウェア。	npm install morgan
body-parser	POSTリクエストのデータ（JSON、URLエンコード形式など）を解析するミドルウェア。	npm install body-parser
cookie-parser	クライアント側のクッキーを解析するミドルウェア。	npm install cookie-parser
express-session	セッション管理を行うためのミドルウェア。	npm install express-session
compression	HTTP レスポンスの圧縮を行うミドルウェア。	npm install compression
helmet	セキュリティヘッダーを設定してアプリケーションを保護するミドルウェア。	npm install helmet
cors	CORS (クロスオリジンリソースシェアリング) を設定するミドルウェア。	npm install cors
multer	ファイルアップロードを処理するためのミドルウェア。	npm install multer
dotenv	環境変数を .env ファイルから読み込むためのライブラリ。	npm install dotenv
passport	ユーザー認証のための柔軟なミドルウェア。	npm install passport
express-validator	バリデーションとデータのサニタイズを簡単に行うためのミドルウェア。	npm install express-validator
http-errors	カスタムHTTPエラーを作成するためのライブラリ。	npm install http-errors
serve-static	静的ファイルを提供するためのミドルウェア（Express に組み込み済み）。	N/A

各ユーティリティの簡単な使用例

1. morgan（リクエストのログ出力）

import express from 'express';
import morgan from 'morgan';

const app = express();
app.use(morgan('combined')); // ログフォーマットを指定

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(3000, () => console.log('Server running on port 3000'));

2. dotenv（環境変数の管理）

.env ファイル:

PORT=3000

server.js:

import express from 'express';
import dotenv from 'dotenv';

dotenv.config(); // .env ファイルを読み込む

const app = express();
const port = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(port, () => console.log(`Server running on port ${port}`));

3. cors（CORS設定）

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors({ origin: '<nowiki>https://example.com'</nowiki> })); // 特定のオリジンを許可

app.get('/', (req, res) => {
  res.send('CORS is enabled for <nowiki>https://example.com'</nowiki>);
});

app.listen(3000, () => console.log('Server running on port 3000'));

4. multer（ファイルアップロード）

import express from 'express';
import multer from 'multer';

const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  res.send(`File uploaded: ${req.file.filename}`);
});

app.listen(3000, () => console.log('Server running on port 3000'));

組み合わせた活用例

以下は複数のミドルウェアを組み合わせた例です。

import express from 'express';
import morgan from 'morgan';
import cors from 'cors';
import bodyParser from 'body-parser';
import cookieParser from 'cookie-parser';
import helmet from 'helmet';

const app = express();

app.use(morgan('dev'));
app.use(cors());
app.use(bodyParser.json());
app.use(cookieParser());
app.use(helmet());

app.get('/', (req, res) => {
  res.send('Hello Secure World');
});

app.listen(3000, () => console.log('Server running on port 3000'));

これらのユーティリティを活用することで、Expressアプリケーションの開発が大幅に効率化されます。用途に応じて適切なものを選び、プロジェクトに導入してください。

下位階層のページ

• Express/Express 5の主な変更点
• Express/express-generator
• Express/裏技集

参考資料

• Express公式ドキュメント
• npm公式サイト
• Node.js公式サイト