ExpressでPOSTフォーム処理

ExpressでPOSTフォームフィールドにアクセスする方法 (日本語)

Expressは、Node.jsのWebアプリケーションフレームワークです。POSTリクエストを通じて送信されたフォームデータにアクセスするには、以下のような手順に従います。

Middlewareのセットアップ

• body-parserミドルウェアを使用し、POSTリクエストのボディを解析します。

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

const app = express();

app.use(bodyParser.urlencoded({ extended: fa   lse }));

POSTルートの定義

• リクエストオブジェクトのbodyプロパティにフォームデータが格納されます。
• app.post()メソッドを使用して、POSTリクエストを処理するルートを定義します。

app.post('/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const message = req.body.message;

  // フォームデータを使って何か処理を行う
  console.log('Received form data:', name, email, message);

  // レスポンスを返す
  res.send('Form submitted successfully!');
});

フォームの送信

• HTMLフォームを作成し、method="POST"とaction="/submit"を設定します。

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <label for="message">Message:</label>
  <textarea id="   message" name="message"></textarea><br>
  <input type="submit" value="Submit">
</for   m>

フォームデータの処理

• req.bodyオブジェクトからフォームフィールドの値を取得し、必要な処理を行います。
• POSTリクエストが送信されると、app.post('/submit')のコールバック関数が実行されます。

注意

• セキュリティ上の理由から、フォームデータのバリデーションとサニタイズを行うことが重要です。
• body-parserは、urlencoded形式のフォームデータを解析します。JSON形式のデータを使用する場合は、json()ミドルウェアを使用する必要があります。

ExpressでPOSTフォーム処理の例 (日本語)

基本的な例

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

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));

app.   post('/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const message = req.body.messag   e;

  console.log('Received form data:', name, email, message);

  res.send('Form submitted successfully!');
});

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

• レスポンスとして「Form submitted successfully!」を送信します。

バリデーションとエラー処理

app.post('/submit', (req, res) => {
  const { name, email, message } = req.body;

  // バリデーション
  if (!name || !email || !message) {
    return res.status(400).send('Please fill in all fields.');
  }

  // 他のバリデーションや処理を追加

  // 成功した場合
  console.log('Received form data:', name, email, message);
  res.send('Form submitted successfully!');
});

• 成功した場合、処理を続行します。
• バリデーションを行い、エラーがある場合は400ステータスコードでエラーメッセージを返します。
• フォームフィールドの値をデストラクチャリングで取得します。

データベースへの保存

const db = require('./db'); // データベース接続

app.post('/submit', async (req, res) => {
  const { name, email, message } = req.body;

  // バリデーション

  try {
    await db.query('INSERT INTO messages (name, email, message) VALUES ($1, $2, $3)', [name, email, message]);
    res.send('Form submitted successfully!');
  } catch (err) {
    console.error(err);
    res.status(500).send('An error occurred.');
  }
});

• エラーが発生した場合、エラーメッセージを返します。
• フォームデータをデータベースに保存します。
• データベース接続モジュールをインポートします。

Expressの組み込みミドルウェア

• Express 4.3以降では、組み込みのexpress.urlencoded()ミドルウェアを使用できます。

const express = require('express');

const app = express();

app.use(express.urlencoded({ extended: false }));

// ...

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

• qsやquerystringなどのサードパーティライブラリを使用して、クエリ文字列を解析することもできます。

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

const app = express();

app.post('/submit', (req, res) => {
  const formData = qs.parse(req.body);
  const name = formData.name;
  const email = formData.email;
  const message = formData.message;

  // ...
});

手動解析

• 複雑なフォームデータやカスタムフォーマットを使用する場合、手動でリクエストボディを解析することもできます。

const express = require('express');

const app = express();

app.post('/submit', (req, res) => {
  let data = '';
  req.on('data', chunk => {
    data += chunk;
  });
  req.on('end', () => {
    const formData = new URLSearchParams(data);
    const name = formData.get('name');
    const email = formData.get('email');
    con   st message = formData.get('message');

    // ...
  });
});

選択基準

• パフォーマンス
  大量のフォームデータを処理する場合は、パフォーマンスを考慮して最適な方法を選択します。
• 機能
  特定の機能が必要な場合は、サードパーティライブラリや手動解析を検討します。
• シンプルさ
  body-parserやexpress.urlencoded()は最もシンプルで使いやすい方法です。