Express.js でワイルドカードルーティングをマスターしよう！ 〜基礎から応用まで徹底解説〜

Express.js でワイルドカードルーティングを使用してパスとすべての子パスを処理する方法

ワイルドカードの使用方法

Express.js では、* アスタリスク記号を使用してワイルドカードを表します。この記号は、パス内の任意の数の文字列と一致します。たとえば、次のルートは、/users または /users/alice または /users/bob などのパスに一致します。

app.get('/users/*', (req, res) => {
  // ...
});

パラメータのキャプチャ

ワイルドカードに加えて、パラメータをキャプチャするために名前付きパラメータを使用することもできます。たとえば、次のルートは、/users/123 のようなパスに一致し、req.params.id には 123 が格納されます。

app.get('/users/:id', (req, res) => {
  const userId = req.params.id;
  // ...
});

複数のワイルドカードを使用することもできます。たとえば、次のルートは、/files/images/123.jpg のようなパスに一致します。

app.get('/files/:type/*', (req, res) => {
  const fileType = req.params.type;
  const fileName = req.params[0]; // ファイル名を取得
  // ...
});

注意点

ワイルドカードルーティングを使用する際は、次の点に注意する必要があります。

• ワイルドカードルートは、より具体的なルートよりも前に配置する必要があります。そうしないと、より具体的なルートが常に一致し、ワイルドカードルートが実行されなくなります。
• ワイルドカードパラメータは、常にルートの末尾に配置する必要があります。
• ワイルドカードを使用して複数のセグメントをキャプチャする場合は、正規表現を使用する方が適切な場合があります。

例

次の例は、シンプルなブログアプリケーションにおけるワイルドカードルーティングの使用方法を示しています。

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

// 記事のリストを取得する
app.get('/articles', (req, res) => {
  // ...
});

// 記事の詳細を取得する
app.get('/articles/:id', (req, res) => {
  const articleId = req.params.id;
  // ...
});

// 記事の作成
app.post('/articles', (req, res) => {
  // ...
});

// 記事の編集
app.put('/articles/:id', (req, res) => {
  const articleId = req.params.id;
  // ...
});

// 記事の削除
app.delete('/articles/:id', (req, res) => {
  const articleId = req.params.id;
  // ...
});

// 静的ファイルへのアクセス
app.use('/static', express.static('public'));

// ポート 3000 でサーバーを起動
app.listen(3000, () => {
  console.log('サーバーが起動しました： http://localhost:3000');
});

この例では、次のルートが定義されています。

• /articles：記事のリストを取得します。
• /static：public フォルダ内の静的ファイルにアクセスします。

この例では、ワイルドカードルーティングを使用して、記事の ID をパラメータとしてキャプチャしています。これにより、記事の作成、編集、削除などの操作を簡単に実装できます。

Express.js でワイルドカードルーティングを使用する例

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

// 記事のリストを取得する
app.get('/articles', (req, res) => {
  // ...
});

// 記事の詳細を取得する
app.get('/articles/:id', (req, res) => {
  const articleId = req.params.id;
  // ...
});

// 記事の作成
app.post('/articles', (req, res) => {
  // ...
});

// 記事の編集
app.put('/articles/:id', (req, res) => {
  const articleId = req.params.id;
  // ...
});

// 記事の削除
app.delete('/articles/:id', (req, res) => {
  const articleId = req.params.id;
  // ...
});

// 静的ファイルへのアクセス
app.use('/static', express.static('public'));

// ポート 3000 でサーバーを起動
app.listen(3000, () => {
  console.log('サーバーが起動しました： http://localhost:3000');
});

この例で説明されている内容

1. モジュールのインポート: 最初に、express モジュールをインポートして、Express アプリケーションを作成します。
2. ルートの作成: 次に、さまざまな HTTP メソッド (GET、POST、PUT、DELETE) に対応するルートを定義します。
   • /articles：このルートは GET リクエストを処理し、記事のリストを取得します。
   • /articles/:id：このルートは GET、PUT、DELETE リクエストを処理し、指定された ID の記事の詳細を取得、編集、または削除します。
   • /static：このルートは静的ファイルへのアクセスを提供します。public フォルダ内のファイルは、http://localhost:3000/static/file.png のような URL でアクセスできます。
3. ミドルウェアの使用: express.static ミドルウェアを使用して、静的ファイルへのアクセスを提供します。
4. サーバーの起動: 最後に、app.listen() メソッドを使用してサーバーをポート 3000 で起動します。

この例を拡張する方法

この例は基本的なものです。アプリケーションのニーズに合わせて拡張することができます。たとえば、次のようなことができます。

• 記事の投稿や編集を処理するロジックを追加する
• ユーザー認証を実装する
• データベースへの接続を追加する
• エラー処理を改善する

正規表現を使用して、より複雑なパターンに一致するルートを定義できます。たとえば、次のルートは、/users/alice または /users/bob/profile などのパスに一致します。

app.get('/users/:username(/profile)?', (req, res) => {
  // ...
});

このルートでは、/:username パラメータを使用してユーザー名を取得します。また、オプションの /profile サブパスも許可します。このサブパスが存在する場合は、req.params.profile に値が格納されます。

第三者製のミドルウェアを使用する

express-param や path-to-regexp などのサードパーティ製のミドルウェアを使用して、ワイルドカードルーティングをより柔軟に処理することもできます。これらのミドルウェアは、パラメータの検証や変換などの追加機能を提供します。

独自のルーティングモジュールを作成することもできます。これにより、独自のルーティングロジックを実装し、アプリケーションのニーズに合わせたカスタム機能を追加できます。

どの方法を選択するかは、アプリケーションのニーズと要件によって異なります。単純なワイルドカードルーティングが必要な場合は、上記の最初の方法が最も簡単です。より複雑なパターンや追加機能が必要な場合は、正規表現、サードパーティ製のミドルウェア、またはカスタムルーティングモジュールを使用することを検討してください。

以下に、各方法の利点と欠点の簡単なまとめを示します。

Express.js でワイルドカードルーティングを実装する方法はいくつかあります。どの方法を選択するかは、アプリケーションのニーズと要件によって異なります。