Express + express.json()でJSON POSTデータを受け取る

2024-04-02

ExpressアプリケーションでJSON POSTデータを受け取る方法

必要なもの:

Node.js
Express

手順:

プロジェクトを初期化する:

npm init -y

必要なモジュールをインストールする:

npm install express body-parser

Expressアプリケーションを作成する:

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

app.use(bodyParser.json());

app.post('/api/data', (req, res) => {
  // POSTされたJSONデータを取得
  const data = req.body;

  // データ処理
  // ...

  // レスポンスを返す
  res.send('OK');
});

app.listen(3000);

クライアントからJSONデータを送信する:

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');

const data = {
  name: 'John Doe',
  age: 30
};

xhr.send(JSON.stringify(data));

解説:

app.use(bodyParser.json()): JSON形式のデータを受け取れるようにするミドルウェアを登録します。
app.post('/api/data', (req, res) => {}): /api/data エンドポイントへのPOSTリクエストを処理する関数を設定します。
req.body: POSTされたJSONデータを取得できます。
res.send(): レスポンスを返します。

ポイント:

body-parser ミドルウェアを使うことで、req.body からJSONデータを取得できるようになります。
req.body はオブジェクト型なので、プロパティ名でアクセスできます。
res.send() で返したデータは、クライアント側で受け取ることができます。

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

app.use(bodyParser.json());

app.post('/api/data', (req, res) => {
  // POSTされたJSONデータを取得
  const data = req.body;

  // データ処理
  console.log(data.name); // "John Doe"
  console.log(data.age); // 30

  // レスポンスを返す
  res.send('OK');
});

app.listen(3000);

クライアント側 (JavaScript)

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');

const data = {
  name: 'John Doe',
  age: 30
};

xhr.send(JSON.stringify(data));

サーバー側は、body-parser ミドルウェアを使ってJSON形式のデータを受け取ります。
POSTされたJSONデータは、req.body から取得できます。
クライアント側は、XMLHttpRequest オブジェクトを使ってJSONデータを送信します。
送信するデータは、JSON.stringify() メソッドを使ってJSON形式に変換する必要があります。

このサンプルコードでは、POSTされたJSONデータの名前と年齢を出力しています。
実際のアプリケーションでは、データ処理の部分を書き換えて、必要な処理を実行します。

JSON POSTデータを受け取る他の方法

express.json() ミドルウェアを使う

Express 4.16以降では、body-parser の代わりに express.json() ミドルウェアを使うことができます。

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

app.use(express.json());

app.post('/api/data', (req, res) => {
  // POSTされたJSONデータを取得
  const data = req.body;

  // データ処理
  // ...

  // レスポンスを返す
  res.send('OK');
});

app.listen(3000);

自作のミドルウェアを使う

body-parser や express.json() ミドルウェアを使わずに、自作のミドルウェアを使ってJSON POSTデータを受け取ることもできます。

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

app.use((req, res, next) => {
  if (req.method === 'POST' && req.headers['content-type'] === 'application/json') {
    let body = '';
    req.on('data', (chunk) => {
      body += chunk;
    });
    req.on('end', () => {
      req.body = JSON.parse(body);
      next();
    });
  } else {
    next();
  }
});

app.post('/api/data', (req, res) => {
  // POSTされたJSONデータを取得
  const data = req.body;

  // データ処理
  // ...

  // レスポンスを返す
  res.send('OK');
});

app.listen(3000);

qs モジュールを使うと、クエリ文字列やフォームデータのパースができます。

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

app.post('/api/data', (req, res) => {
  // POSTされたデータを取得
  const data = qs.parse(req.body);

  // データ処理
  // ...

  // レスポンスを返す
  res.send('OK');
});

app.listen(3000);