メインコンテンツまでスキップ

GET リクエストと POST リクエスト

GET リクエストと POST リクエスト​

HTTP 上の通信においてクライアントからサーバーへの要求をリクエストと言いましたが、今まで扱ってきたのはその中でも GET リクエストと呼ばれるものになります。

GET リクエストでサーバーにデータを送信する場合、前頁で扱ったように、クエリパラメータとして URL の末尾に付加するしかありませんが、この方式だと困ってしまうことがあります。例えばパスワードなどを入力したときに URL にパスワード情報が載ってしまい機密情報の漏洩につながります。また、URL の長さの制限のため、大量の情報は送信できません。

そこで用いるのが POST リクエストです。POST リクエストでは、クエリパラメータとは別に、リクエストボディと呼ばれる領域を使って大容量のデータを送信できます。

HTTP リクエストのこのような区分を、HTTP メソッドと呼びます。

HTTP メソッドの比較

前頁の例を、POST リクエストを用いて書き直してみましょう。form 要素の method 属性に post を指定することで、ブラウザは送信ボタンが押されたときに POST メソッドのリクエストを発行します。

static/index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>フォーム</title>
  </head>
  <body>
    <form method="post" action="/send">
      <input name="name" />
      <input name="age" />
      <button>送信</button>
    </form>
  </body>
</html>
main.mjs
import express from "express";

const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.static("static"));

app.post("/send", (request, response) => {
  response.send(
    `あなたの名前は${request.body.name}で、${request.body.age}歳ですね。`,
  );
});
app.listen(3000);
GitHub で表示このプログラムを実行する

これまで利用していた app.get (express.Application#get メソッド) では、GET メソッドのリクエストしか受け付けられないため、/send への POST リクエストを受け付けるために app.post (express.Application#post メソッド) を利用しています。

クエリパラメータにアクセスするには、request.query (express.Request#query プロパティ)を使用しましたが、リクエストボディを使用するには、request.body (express.Request#body プロパティ)を使用します。

app.use(express.urlencoded({ extended: true })); は、リクエストボディの解釈方法を定めています。HTML のフォームが送信されたとき、ブラウザが発行する POST リクエストのリクエストボディは、クエリパラメータと同じく URL エンコードされた形式で記述されます。express.urlencoded 関数は、URL エンコードされたリクエストボディを読み取り、request.body にオブジェクトの形式でデータを保存する役割を担っています。

このシステムでは、まず次のような画面が表示されます。

名前と年齢を入力１

以下のように入力して、送信ボタンをクリックすると

名前と年齢を入力２

http://localhost:3000/send に移り、以下のような画面が表示されます。GET リクエストの時と違い、クエリパラメータが URL に表示されていないことが分かります。

名前と年齢を入力３

POST リクエストを開発者ツールで覗いてみる​

実際に POST リクエストの中身がどうなっているか覗いてみましょう。まず開発者ツールの Network タブを開き、文字を入力して送信してみます。

そして name 欄の send をクリックし、 Headers を選択すると general 欄の Requested method が POST になっています。また、 Headers の横にある Payload を選択し Form data を見ると、 name と age の情報が載っています。

ここからさらに、Form data の横の view source や view URL-encoded も見てみましょう。すると URL エンコードされたリクエストボディの中身を見ることができます。

以上のようにして、POST リクエストの中身を覗くことができます。

GETリクエストとPOSTリクエスト

演習​

古き良き掲示板システムを作ってみましょう。次のようなページを作成してください。

  • GET /: 現在の投稿されているすべての記事を表示します。/send へ POST するためのフォームも同時に表示します。
  • POST /send: リクエストボディに含まれている記事の内容を記録します。
ヒント
  • イベントハンドラの外側に現在投稿されたデータを記録するための配列を用意しましょう。
  • GET / では 配列の中身を一覧表示しましょう。フォームも忘れずに表示しましょう。
  • POST /send に新しい投稿が来たら Array#push メソッドで配列に要素を追加しましょう。
豆知識: リダイレクト

サーバー側からブラウザに対してページ遷移を指示するためには、ブラウザからのリクエストに対して、特殊なレスポンスを返します。 Express を用いてこのようなレスポンスを生成するためには、express.Response#send メソッド の代わりに、express.Response#redirect メソッド を用います。

app.post("/send", (request, response) => {
  // 省略
  response.redirect("/");
});

解答例​

解答例は以下を参照してください。

GitHub で表示このプログラムを実行する