Express.jsでレスポンス情報を編集する方法

Express.jsでレスポンス情報を修正する方法を紹介します。コードもGit Hubに掲載するので参考にしてください。

概要

Express.jsでは、リクエストの処理はミドルウェア関数内で行います。
ミドルウェア関数の引数には、requestオブジェクトとresponseオブジェクトが渡されます。 これらのオブジェクトを使用して、リクエストに関連するデータの取得やレスポンスの生成などを行います。

ここでは、以下バージョンを使用した、Express.jsでレスポンス情報を修正する方法を説明します。

Express.js v4.17.1
Node.js v16.3.0

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

レスポンス情報を編集する方法

レスポンスオブジェクトは、クライアントへのレスポンスを構築するために使用されます。 Expressのルートハンドラ内で利用され、レスポンスのヘッダー、ステータスコード、データなどを設定するために利用されます。

以下のサンプルコードは、Express.jsでレスポンスオブジェクト(responseオブジェクト)を理解するための例です。GETリクエストを受け取り、異なる種類のレスポンスを生成して返します。

response.js

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

app.get("/json", (req, res) => {
  // JSONレスポンスの生成
  const jsonResponse = {
    message: "This is a JSON response",
  };
  res.json(jsonResponse);
});

app.get("/html", (req, res) => {
  // HTMLレスポンスの生成
  const htmlResponse = "<h1>This is an HTML response</h1>";
  res.type("text/html").send(htmlResponse);
});

app.get("/header", (req, res) => {
  // レスポンスヘッダーの設定
  res.setHeader("Custom-Header", "Custom Value");
  res.send("Header set");
});

app.get("/status", (req, res) => {
  // ステータスコードの設定
  res.status(201).send("Created");
});

app.get("/redirect", (req, res) => {
  // リダイレクトの実行
  res.redirect("/new-location");
});

app.get("/error", (req, res) => {
  // エラーレスポンスの生成
  const errorResponse = {
    error: "An error occurred",
  };
  res.status(500).json(errorResponse);
});

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

解説

  • Expressモジュールのインポート
const express = require('express');
const app = express();

上記コードでは、expressという名前のモジュールを読み込んで、新しいExpressアプリケーションを作成しています。

  • JSONレスポンスのルート
app.get("/json", (req, res) => {
  const jsonResponse = {
    message: "This is a JSON response",
  };
  res.json(jsonResponse);
});

“/json"エンドポイントにGETリクエストが送られた場合、このコードはJSON形式のレスポンスを返します。

  • HTMLレスポンスのルート
app.get("/html", (req, res) => {
  const htmlResponse = "<h1>This is an HTML response</h1>";
  res.type("text/html").send(htmlResponse);
});

“/html"エンドポイントにGETリクエストが送られた場合、このコードはHTML形式のレスポンスを返します。

  • レスポンスヘッダー設定のルート
app.get("/header", (req, res) => {
  res.setHeader("Custom-Header", "Custom Value");
  res.send("Header set");
});

“/header"エンドポイントにGETリクエストが送られた場合、このコードはレスポンスヘッダーにカスタムヘッダーを追加し、その結果をレスポンスとして返します。

  • ステータスコード設定のルート
app.get("/status", (req, res) => {
  res.status(201).send("Created");
});

“/status"エンドポイントにGETリクエストが送られた場合、このコードはレスポンスステータスコードを201(Created)に設定し、その結果をレスポンスとして返します。

  • リダイレクトのルート
app.get("/redirect", (req, res) => {
  res.redirect("/new-location");
});

“/redirect"エンドポイントにGETリクエストが送られた場合、このコードはリダイレクトを行い、新しいURL("/new-location”)にユーザーをリダイレクトします。

  • エラーレスポンスのルート
app.get("/error", (req, res) => {
  const errorResponse = {
    error: "An error occurred",
  };
  res.status(500).json(errorResponse);
});

“/error"エンドポイントにGETリクエストが送られた場合、このコードはレスポンスステータスコードを500(Internal ServerError)に設定し、エラーメッセージを含むJSON形式のレスポンスを返します。

  • サーバーの起動
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

このコードは、3000番ポートでサーバーを起動します。サーバーが正常に起動すると、‘Server is running on port 3000’というメッセージがコンソールに表示されます。

テスト

## JSONレスポンスを返すエンドポイント
curl -X GET http://localhost:3000/json
## HTMLレスポンスを返すエンドポイント
curl -X GET http://localhost:3000/html
## カスタムヘッダーをレスポンスに追加するエンドポイント
curl -X GET http://localhost:3000/header
## 特定のステータスコードを返すエンドポイント
curl -X GET http://localhost:3000/status
## エラーレスポンスを返すエンドポイント
curl -X GET http://localhost:3000/error

このコードでは、ルートハンドラ内でさまざまな種類のレスポンスを生成しています。
JSONレスポンス、HTMLレスポンス、カスタムヘッダー、ステータスコード、リダイレクト、エラーレスポンスなどの機能を示しています。Expressの便利なメソッドを使用して、簡潔かつ柔軟なレスポンスの生成が可能です。

まとめ

レスポンスオブジェクト(resオブジェクト)を使用することで、以下のことが可能になります。

  • レスポンスヘッダーの設定や変更ができます。
  • レスポンスのHTTPステータスコードを設定できます。
  • レスポンスのボディデータを設定できます。JSONオブジェクト、文字列、バイナリデータなどの形式でデータを返すことができます。
  • レスポンスのエンコーディングや圧縮の設定を行うことができます。
  • リダイレクトやエラーハンドリングなど、特定の状況に応じたレスポンスの制御が可能です。

レスポンスオブジェクトを使用することで、Expressアプリケーション内でレスポンスの生成に関するさまざまな操作を行うことができます。レスポンスオブジェクトには多くのプロパティやメソッドがあり、高度なカスタマイズや制御が可能です。