Express.jsでレスポンスを送信する：res.sendとres.jsonの使い分けガイド

2024-04-18

Express.jsにおけるres.sendとres.jsonの違い

Express.jsは、Node.js用のWebフレームワークであり、Webアプリケーションを効率的に構築することができます。その中で、res.sendとres.jsonは、クライアントにレスポンスを返す際に使用される重要なメソッドです。一見同じような機能に見えますが、実はいくつかの重要な違いがあります。

送信データの種類

res.send：任意のデータを文字列として送信します。これは、HTML、プレーンテキスト、JSONなど、あらゆる種類のデータに使用できます。
res.json：JavaScriptオブジェクトをJSON形式に変換して送信します。これは、APIなどで構造化されたデータをやり取りする場合に適しています。

Content-Typeヘッダー

res.send：送信するデータの種類に応じて、Content-Typeヘッダーを自動的に設定します。例えば、HTMLを送信する場合はtext/html、JSONを送信する場合はapplication/jsonとなります。
res.json：常にapplication/jsonというContent-Typeヘッダーを設定します。これは、クライアントが受信したデータがJSONであることを明示的に示すためです。

データのシリアル化

res.send：渡されたデータをそのまま文字列として送信します。複雑なオブジェクトや配列を含む場合、正しくシリアル化されない可能性があります。
res.json：渡されたJavaScriptオブジェクトをJSON形式に変換する際に、JSON.stringify関数を使用します。これは、オブジェクトの構造を保持しながら、安全かつ効率的にデータをシリアル化します。

使い分け

res.sendは、以下の用途に適しています。
- HTMLコンテンツを送信する場合
- プレーンテキストを送信する場合
- データの種類が明確でない場合
res.jsonは、以下の用途に適しています。
- APIで構造化されたデータをやり取りする場合
- JSON形式でデータを確実に送受信したい場合

例

// res.send を使用して HTML を送信
app.get('/', function(req, res) {
  res.send('<html><body><h1>Hello World!</h1></body></html>');
});

// res.json を使用して JSON データを送信
app.get('/data', function(req, res) {
  const data = { message: 'Hello from Express.js!' };
  res.json(data);
});

res.sendとres.jsonは、どちらもクライアントにレスポンスを返すために使用されますが、送信するデータの種類、Content-Typeヘッダー、データのシリアル化の仕方などに違いがあります。それぞれの違いを理解し、状況に応じて適切なメソッドを選択することが重要です。

Express.jsにおけるres.sendとres.jsonのサンプルコード

この度は、サンプルコードを追加のご要望をいただきありがとうございます。より分かりやすくするために、以下の2つの例を追加しました。

この例では、res.sendを使用して、シンプルなHTMLページを送信します。

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

app.get('/', function(req, res) {
  const html = `
<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>
  `;
  res.send(html);
});

app.listen(3000, function() {
  console.log('Server listening on port 3000');
});

このコードを実行すると、ブラウザでhttp://localhost:3000にアクセスすると、以下のHTMLページが表示されます。

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

例2：JSONデータを送信する

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

app.get('/data', function(req, res) {
  const data = {
    message: 'Hello from Express.js!',
    author: 'Bard',
    date: new Date().toISOString()
  };
  res.json(data);
});

app.listen(3000, function() {
  console.log('Server listening on port 3000');
});

{
  "message": "Hello from Express.js!",
  "author": "Bard",
  "date": "2024-04-18T00:30:00.000Z"
}

補足

上記のコードは、Node.jsとExpress.jsがインストールされていることを前提としています。
コードを実行するには、以下のコマンドを実行します。

node index.js

ブラウザで上記のURLにアクセスして、結果を確認してください。

Express.jsにおけるres.sendとres.jsonのその他の方法

従来のres.sendとres.jsonに加えて、Express.jsでクライアントにレスポンスを返す方法は他にもいくつかあります。以下に、代表的な方法とそれぞれの利点と欠点をご紹介します。

res.status

レスポンスのステータスコードを設定するために使用します。例えば、res.status(200).send('OK')のように使用すると、ステータスコード200（OK）とともにOKという文字列を送信できます。
利点：
- レスポンスのステータスを明確に示せる
- エラーハンドリングに役立つ
欠点：

res.setHeader

レスポンスヘッダーを設定するために使用します。例えば、res.setHeader('Content-Type', 'text/html')のように使用すると、Content-Typeヘッダーをtext/htmlに設定できます。
利点：
欠点：

サードパーティ製ライブラリ

res.render（EJSテンプレートエンジン）：HTMLテンプレートをレンダリングして送信するために使用します。
res.redirect：別のURLにリダイレクトするために使用します。
利点：
欠点：

// res.status を使用してステータスコードとメッセージを送信
app.get('/error', function(req, res) {
  res.status(500).send('Internal Server Error');
});

// res.setHeader を使用して Content-Type ヘッダーを設定
app.get('/data', function(req, res) {
  const data = { message: 'Hello from Express.js!' };
  res.setHeader('Content-Type', 'application/csv');
  res.send('message,author,date\nHello,Bard,2024-04-18');
});