学んだことを活かして、オリジナルアプリを作ろう！

2024-04-02

Node.jsでPOSTデータ処理：基礎から実践まで

POSTデータは、WebフォームやAPIリクエストなどを通じて送信されるデータです。ユーザー入力情報やファイルアップロードなど、さまざまな種類のデータが含まれます。

Node.jsでPOSTデータ処理：基本的な流れ

必要なモジュールのインストール:
- express: Webサーバー構築用モジュール
- body-parser: POSTデータ解析用モジュール
サーバーの立ち上げ:
- expressモジュールを使ってサーバーを作成
- body-parserモジュールを組み込み、POSTデータ解析機能を有効化
POSTリクエスト処理:
- app.postメソッドを使って、POSTリクエストを受け付けるルーティングを設定
- リクエストオブジェクトから、送信されたPOSTデータを取得
- 取得したデータを処理：データベース保存、ファイルアップロード処理など
レスポンス送信:

実践例：シンプルなフォームデータ処理

以下のコードは、ユーザー入力を受け取り、データベースに保存するシンプルな例です。

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// POSTデータ解析機能を有効化
app.use(bodyParser.urlencoded({ extended: false }));

// POSTリクエスト処理
app.post('/form', (req, res) => {
  // リクエストオブジェクトから、送信された名前と年齢を取得
  const name = req.body.name;
  const age = req.body.age;

  // データベースに保存
  // ...

  // 保存結果に基づいて、レスポンスを送信
  res.send('データ保存が完了しました。');
});

// サーバー起動
app.listen(3000);

より高度な処理

ファイルアップロード処理
APIリクエスト処理
データバリデーション
エラー処理

Node.jsは、POSTデータ処理に非常に便利です。今回紹介した基本的な流れを理解すれば、さまざまな種類のPOSTデータを処理できます。

上記コードはあくまで基本的な例です。実際の開発では、必要に応じて改良・拡張が必要です。
より高度な処理については、上記の学習リソースなどを参考に、さらに学習を進めることをおすすめします。

サンプルコード：ユーザー登録フォーム

index.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// POSTデータ解析機能を有効化
app.use(bodyParser.urlencoded({ extended: false }));

// ユーザー登録処理
app.post('/register', async (req, res) => {
  // リクエストオブジェクトから、送信された名前とメールアドレスを取得
  const name = req.body.name;
  const email = req.body.email;

  // データベースにユーザー登録
  const user = await db.createUser(name, email);

  // 登録結果に基づいて、レスポンスを送信
  if (user) {
    res.send('ユーザー登録が完了しました。');
  } else {
    res.send('ユーザー登録に失敗しました。');
  }
});

// サーバー起動
app.listen(3000);

db.js

const mongoose = require('mongoose');

// データベース接続
mongoose.connect('mongodb://localhost:27017/mydb');

// ユーザーモデル
const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
});

const User = mongoose.model('User', UserSchema);

// ユーザー登録
async function createUser(name, email) {
  const user = new User({
    name,
    email,
  });

  await user.save();

  return user;
}

module.exports = {
  createUser,
};

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ユーザー登録</title>
</head>
<body>
  <h1>ユーザー登録</h1>
  <form action="/register" method="post">
    名前: <input type="text" name="name"><br>
    メールアドレス: <input type="email" name="email"><br>
    <input type="submit" value="登録">
  </form>
</body>
</html>

このサンプルコードは、以下の機能を実装します。

ユーザー入力のnameとemailを取得
MongoDBにユーザー登録
登録結果に基づいて、成功または失敗メッセージを表示

index.js:
- /registerへのPOSTリクエストを受け付け、ユーザー登録処理を実行
db.js:
- MongoDBに接続
- ユーザー登録を行うcreateUser関数を定義
index.html:
- ユーザー登録フォーム
- nameとemailフィールド
- POSTリクエストで/registerへ送信

動作確認

上記コードをそれぞれindex.js、db.js、index.htmlファイルとして保存
npm installコマンドを実行して、必要なモジュールをインストール
node index.jsコマンドを実行して、サーバーを起動
ブラウザでhttp://localhost:3000を開き、ユーザー登録フォームが表示されることを確認
フォームに名前とメールアドレスを入力し、「登録」ボタンをクリック
登録結果メッセージが表示されることを確認

このサンプルコードは、Node.jsでPOSTデータ処理を行う基本的な流れを理解するのに役立ちます。実際の開発では、必要に応じて改良・拡張してください。

Node.jsでPOSTデータ処理を行うその他の方法

Express.jsのreq.bodyプロパティ

app.post('/form', (req, res) => {
  const name = req.body.name;
  const age = req.body.age;

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

  res.send('データ処理が完了しました。');
});

multerモジュール

ファイルアップロード処理を行う場合は、multerモジュールを使うのがおすすめです。

const multer = require('multer');

const upload = multer({ dest: './uploads' });

app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;

  // ファイル処理
  // ...

  res.send('ファイルアップロードが完了しました。');
});

koa.js

Express.jsと同様に、koa.jsフレームワークを使ってPOSTデータ処理を行うこともできます。

const koa = require('koa');
const app = new koa();

app.use(async (ctx, next) => {
  if (ctx.method === 'POST') {
    const name = ctx.request.body.name;
    const age = ctx.request.body.age;

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

    ctx.body = 'データ処理が完了しました。';
  } else {
    await next();
  }
});

app.listen(3000);

NestJSは、TypeScriptを使って開発できるフレームワークです。クラスベースの設計を採用しており、モジュール化や依存性注入などが容易にできます。

@Controller('/form')
export class FormController {
  @Post()
  async submitForm(@Body() body: any): Promise<string> {
    const name = body.name;
    const age = body.age;

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

    return 'データ処理が完了しました。';
  }
}