Express.jsでルーティングを使用する方法

Express.jsでルーティング処理を作成する方法を紹介します。コードもGit Hubに掲載するので参考にしてください。

概要

Express.jsは、簡単にルーティングを定義できる機能を提供しています。
ルーティングは、HTTPリクエストを処理するためのエンドポイントを指定することで定義されます。

以下では、ルーティングの概念、ルートの定義、ルートハンドラの作成、ルーティングパラメータの処理、およびルートのオプションについて詳しく説明します。

ここでは、以下バージョンを使用した、ルーティング方法を説明します。

Express v4.18.1
nodejs v19.7.0

また、今回作成するコードは全て、GitHubに掲載しています。

ルーティングの概念

ルーティングは、クライアントからのリクエストが特定のエンドポイントに到達した際に、Express.jsアプリケーションがどのように処理するかを定義します。

ルーティングは、HTTPメソッド(GET、POST、PUT、DELETEなど)とパス(URL)の組み合わせで定義されます。

ルートの定義方法

ルーティング使用する方法はいくつかありますが、以下の4つの方法が一般的です。

  1. appメソッドを使用する方法
app.<HTTPメソッド>('<パス>', (req, res) => {
  // ルートの処理
});
  1. Routerオブジェクトを使用する方法
const router = express.Router();

router.<HTTPメソッド>('<パス>', (req, res) => {
  // ルートの処理
});

app.use(router);
  1. ルートハンドラ関数を直接使用する方法
const routeHandler = (req, res) => {
  // ルートの処理
};
app.<HTTPメソッド>('<パス>', routeHandler);
  1. ルートチェーンを使用する方法
app.route('<パス>')
  .get((req, res) => {
    // GETリクエストの処理
  })
  .post((req, res) => {
    // POSTリクエストの処理
  });
  • HTTPメソッド: HTTPリクエストのメソッドを指定します(例: get、post、put、deleteなど)。
  • パス: クライアントからのリクエストがマッチするURLパスを指定します。

以下見出しからは、コードを記述します。

appメソッドを使用する方法

appMethod.js

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

app.use(express.json());

app.get("/hello", (req, res) => {
  res.send("Hello, Express!");
});

app.post("/users", (req, res) => {
  const user = req.body;
  // ユーザーの作成処理など...
  res.json({ id: 1, name: user.name });
});

app.put("/users/:id", (req, res) => {
  const userId = req.params.id;
  const user = req.body;
  // ユーザーの更新処理など...
  res.json({ id: userId, name: user.name });
});

app.delete("/users/:id", (req, res) => {
  const userId = req.params.id;
  // ユーザーの削除処理など...
  res.json({ message: `User ${userId} has been deleted.` });
});

app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

解説

  • Expressモジュールのインポートとアプリケーションの作成
const express = require("express");
const app = express();

この部分で、Expressモジュールを読み込み、新しいExpressアプリケーションインスタンスを作成しています。

  • ミドルウェアの登録
app.use(express.json());

これにより、Expressアプリケーションは、JSON形式のリクエストボディを解析できるようになります。

  • GETリクエストハンドラー
app.get("/hello", (req, res) => {
  res.send("Hello, Express!");
});

これにより、サーバーは"/hello"へのGETリクエストに対して"Hello, Express!“をレスポンスとして返します。

  • POSTリクエストハンドラー
app.post("/users", (req, res) => {
  const user = req.body;
  // ユーザーの作成処理など...
  res.json({ id: 1, name: user.name });
});

これにより、"/users"へのPOSTリクエストは新しいユーザーの作成を試み、成功するとユーザー情報をJSON形式で返します。

  • PUTリクエストハンドラー
app.put("/users/:id", (req, res) => {
  const userId = req.params.id;
  const user = req.body;
  // ユーザーの更新処理など...
  res.json({ id: userId, name: user.name });
});

これにより、"/users/:id"へのPUTリクエストは指定されたIDのユーザーの更新を試み、成功すると更新されたユーザー情報をJSON形式で返します。

  • DELETEリクエストハンドラー
app.delete("/users/:id", (req, res) => {
  const userId = req.params.id;
  // ユーザーの削除処理など...
  res.json({ message: `User ${userId} has been deleted.` });
});

これにより、"/users/:id"へのDELETEリクエストは指定されたIDのユーザーの削除を試み、成功するとユーザーが削除されたことを伝えるメッセージをJSON形式で返します。

  • サーバーの起動
app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

この部分で、サーバーがポート3000でリスンするように設定しています。サーバーが起動したら、“サーバーがポート3000で起動しました"というメッセージがコンソールに表示されます。

このコードでは、Expressを使用して異なるHTTPメソッドに対する複数のパスのハンドラーを定義し、それらをExpressサーバーに登録しています。 各ハンドラーは、リクエストを受け取り、適切な処理を行った後にレスポンスを返します。

テスト

# GETリクエストのテスト
curl -X GET http://localhost:3000/hello
# POSTリクエストのテスト
curl -X POST -H "Content-Type: application/json" -d '{"name":"John Doe"}' http://localhost:3000/users
# PUTリクエストのテスト
curl -X PUT -H "Content-Type: application/json" -d '{"name":"Jane Smith"}' http://localhost:3000/users/1
# DELETEリクエストのテスト
curl -X DELETE http://localhost:3000/users/1

Routerオブジェクトを使用する方法

routerObject.js

const express = require("express");
const app = express();
const router = express.Router();

router.use(express.json());

router.get("/hello", (req, res) => {
  res.send("Hello, Express!");
});

router.post("/users", (req, res) => {
  const user = req.body;
  // ユーザーの作成処理など...
  res.json({ id: 1, name: user.name });
});

router.put("/users/:id", (req, res) => {
  const userId = req.params.id;
  const user = req.body;
  // ユーザーの更新処理など...
  res.json({ id: userId, name: user.name });
});

router.delete("/users/:id", (req, res) => {
  const userId = req.params.id;
  // ユーザーの削除処理など...
  res.json({ message: `User ${userId} has been deleted.` });
});

app.use(router);

app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

解説

  • Expressモジュールのインポートとアプリケーションとルーターの作成
const express = require("express");
const app = express();
const router = express.Router();

上記のコードではExpressモジュールを読み込み、Expressアプリケーションとルーターのインスタンスを作成しています。

  • ミドルウェアの登録
router.use(express.json());

これにより、ルーターがJSON形式のリクエストボディを解析できるようになります。

  • GETリクエストハンドラー
router.get("/hello", (req, res) => {
  res.send("Hello, Express!");
});

“/hello"エンドポイントへのGETリクエストに対して、“Hello, Express!“というメッセージをレスポンスとして返します。

  • POSTリクエストハンドラー
router.post("/users", (req, res) => {
  const user = req.body;
  // ユーザーの作成処理など...
  res.json({ id: 1, name: user.name });
});

“/users"エンドポイントへのPOSTリクエストに対して、新しいユーザーを作成し、作成したユーザーの情報をJSON形式でレスポンスとして返します。

  • PUTリクエストハンドラー
router.put("/users/:id", (req, res) => {
  const userId = req.params.id;
  const user = req.body;
  // ユーザーの更新処理など...
  res.json({ id: userId, name: user.name });
});

“/users/:id"エンドポイントへのPUTリクエストに対して、指定したIDのユーザーを更新し、更新したユーザーの情報をJSON形式でレスポンスとして返します。

  • DELETEリクエストハンドラー
router.delete("/users/:id", (req, res) => {
  const userId = req.params.id;
  // ユーザーの削除処理など...
  res.json({ message: `User ${userId} has been deleted.` });
});

“/users/:id"エンドポイントへのDELETEリクエストに対して、指定したIDのユーザーを削除し、ユーザーが削除されたことを示すメッセージをJSON形式でレスポンスとして返します。

  • ルーターのアプリケーションへの登録
app.use(router);

ルーターをアプリケーションに登録します。これにより、ルーターで定義したエンドポイントがアプリケーションで使用可能になります。

  • サーバーの起動
app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

この部分で、サーバーがポート3000でリッスンするように設定しています。サーバーが起動したら、“サーバーがポート3000で起動しました"というメッセージがコンソールに表示されます。

このコードでは、Expressを使用して異なるHTTPメソッドに対する複数のパスのハンドラーを定義し、それらをExpressサーバーに登録しています。
各ハンドラーは、リクエストを受け取り、適切な処理を行った後にレスポンスを返します。

テスト

# GETリクエストのテスト
curl -X GET http://localhost:3000/hello
# POSTリクエストのテスト
curl -X POST -H "Content-Type: application/json" -d '{"name":"John Doe"}' http://localhost:3000/users
# PUTリクエストのテスト
curl -X PUT -H "Content-Type: application/json" -d '{"name":"Jane Smith"}' http://localhost:3000/users/1
# DELETEリクエストのテスト
curl -X DELETE http://localhost:3000/users/1

ルートハンドラ関数を直接使用する方法

handler.js

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

const helloHandler = (req, res) => {
  res.send("Hello, Express!");
};

const userPostHandler = (req, res) => {
  const user = req.body;
  // ユーザーの作成処理など...
  res.json({ id: 1, name: user.name });
};

const userPutHandler = (req, res) => {
  const userId = req.params.id;
  const user = req.body;
  // ユーザーの更新処理など...
  res.json({ id: userId, name: user.name });
};

const userDeleteHandler = (req, res) => {
  const userId = req.params.id;
  // ユーザーの削除処理など...
  res.json({ message: `User ${userId} has been deleted.` });
};

app.get("/hello", helloHandler);
app.post("/users", userPostHandler);
app.put("/users/:id", userPutHandler);
app.delete("/users/:id", userDeleteHandler);

app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

解説

  • Expressモジュールのインポートとアプリケーションの作成
const express = require("express");
const app = express();

上記のコードでは、Expressモジュールを読み込み、新しいExpressアプリケーションインスタンスを作成しています。

  • ハンドラー関数の定義
const helloHandler = (req, res) => {
  res.send("Hello, Express!");
};

const userPostHandler = (req, res) => {
  const user = req.body;
  // ユーザーの作成処理など...
  res.json({ id: 1, name: user.name });
};

const userPutHandler = (req, res) => {
  const userId = req.params.id;
  const user = req.body;
  // ユーザーの更新処理など...
  res.json({ id: userId, name: user.name });
};

const userDeleteHandler = (req, res) => {
  const userId = req.params.id;
  // ユーザーの削除処理など...
  res.json({ message: `User ${userId} has been deleted.` });
};

ここでは、それぞれのHTTPメソッドとエンドポイントに対する処理を関数として定義しています。

  • ルートの登録
app.get("/hello", helloHandler);
app.post("/users", userPostHandler);
app.put("/users/:id", userPutHandler);
app.delete("/users/:id", userDeleteHandler);

各関数を特定のエンドポイントとHTTPメソッドに紐づけています。

  • サーバーの起動
app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

この部分で、サーバーがポート3000でリッスンするように設定しています。サーバーが起動したら、“サーバーがポート3000で起動しました"というメッセージがコンソールに表示されます。

テスト

# GETリクエストのテスト
curl -X GET http://localhost:3000/hello
# POSTリクエストのテスト
curl -X POST -H "Content-Type: application/json" -d '{"name":"John Doe"}' http://localhost:3000/users
# PUTリクエストのテスト
curl -X PUT -H "Content-Type: application/json" -d '{"name":"Jane Smith"}' http://localhost:3000/users/1
# DELETEリクエストのテスト
curl -X DELETE http://localhost:3000/users/1

ルートチェーンを使用する方法

chain.js

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

app.use(express.json());

app.route("/users/:id")
  .get((req, res) => {
    const userId = req.params.id;
    // ユーザーの取得処理など...
    res.json({ id: userId, name: "John Doe" });
  })
  .post((req, res) => {
    const user = req.body;
    // ユーザーの作成処理など...
    res.json({ id: 1, name: user.name });
  })
  .put((req, res) => {
    const userId = req.params.id;
    const user = req.body;
    // ユーザーの更新処理など...
    res.json({ id: userId, name: user.name });
  })
  .delete((req, res) => {
    const userId = req.params.id;
    // ユーザーの削除処理など...
    res.json({ message: `User ${userId} has been deleted.` });
  });

app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

解説

  • Expressモジュールのインポートとアプリケーションの作成
const express = require("express");
const app = express();

この部分でExpressモジュールを読み込み、新しいExpressアプリケーションインスタンスを作成しています。

  • ミドルウェアの登録
app.use(express.json());

これにより、Expressアプリケーションは、JSON形式のリクエストボディを解析できるようになります。

  • ルートハンドラーのチェイン
app.route("/users/:id")
  .get((req, res) => {
    const userId = req.params.id;
    // ユーザーの取得処理など...
    res.json({ id: userId, name: "John Doe" });
  })
  .post((req, res) => {
    const user = req.body;
    // ユーザーの作成処理など...
    res.json({ id: 1, name: user.name });
  })
  .put((req, res) => {
    const userId = req.params.id;
    const user = req.body;
    // ユーザーの更新処理など...
    res.json({ id: userId, name: user.name });
  })
  .delete((req, res) => {
    const userId = req.params.id;
    // ユーザーの削除処理など...
    res.json({ message: `User ${userId} has been deleted.` });
  });

これにより、特定のルートに対して一連のリクエストハンドラーをチェインすることができます。ここでは、"/users/:id"というルートに対してGET、POST、PUT、DELETEの各リクエストハンドラーを設定しています。

  • サーバーの起動
app.listen(3000, () => {
  console.log("サーバーがポート3000で起動しました");
});

この部分で、サーバーがポート3000でリッスンするように設定しています。サーバーが起動したら、“サーバーがポート3000で起動しました"というメッセージがコンソールに表示されます。

テスト

# GETリクエストのテスト
curl -X GET http://localhost:3000/users/1
# POSTリクエストのテスト
curl -X POST -H "Content-Type: application/json" -d '{"name":"John Doe"}' http://localhost:3000/users/1
# PUTリクエストのテスト
curl -X PUT -H "Content-Type: application/json" -d '{"name":"Jane Smith"}' http://localhost:3000/users/1
# DELETEリクエストのテスト
curl -X DELETE http://localhost:3000/users/1

まとめ

この記事では、Express.jsを使用してルーティングを使用する方法について説明しました。以下に、主なポイントをまとめます。

ルートハンドラ関数を直接使用する方法: Express.jsでは、特定のHTTPメソッドとパスに対するハンドラ関数を直接使用することができます。これにより、リクエストが特定のエンドポイントに到達したときにどのように処理するかを定義できます。

ルートチェーンを使用する方法: Express.jsでは、app.route()メソッドを使用して、同じパスに対する複数のHTTPメソッドをチェーン化することができます。これにより、コードの重複を避けつつ、同じパスに対する異なるHTTPメソッドを一元的に管理できます。

これらの方法を使用することで、Express.jsアプリケーションのルーティングを効率的に管理することができます。それぞれの方法は、特定の状況や要件に応じて適切に使用することが重要です。