【Node.js入門】誰でも分かるPOST送信・受信をする方法まとめ！

今回は、Node.jsでPOSTデータを扱うための方法について学習を進めていきましょう！

「そもそもPOSTデータって何？」
「Node.jsで構築したサーバーで受信する方法が知りたい」
「POSTデータってどうやって送信するんだっけ？」

このような内容も含めて、本記事では以下のような構成で解説していきます！

この記事で、POSTをしっかり学習してスキルアップを目指していきましょう！

「POST」とは？

一般的なHTTP通信は主に「GET」「POST」を使った方法が多く使われています。

一般的な使われ方は以下の通りです。

「GET」は何らかのデータを取得する際によく使われる

「POST」は何らかのデータを送信(登録)する際によく使われる

「よく使われる」という表現には意味がありまして、実はPOSTを使ってGETと同じことを実現することも可能です。

ただし、本来の意図としては上記の通りなので混乱しないようにしておきましょう。

また、リクエストの送信方法などにも違いがありますが、本記事ではNode.jsによるPOSTの受け取り方について詳しく見ていくことにします。

「POST」の送信

この章では、ブラウザから任意のデータをPOST送信する手順について見ていきましょう！

主に、HTMLで送信用のフォームを作成する方法を学んでいきます。

データ送信用のフォームを準備する

それでは、POSTデータを送信するためのフォームを作っていきましょう！

基本的にはformタグを利用して普通にフォームを作れば良いのですが、以下のポイントに注意する必要があります。

・method属性をPOSTにする
・name属性を必ず付与する

上記の点を踏まえて、例えば「名前」と「年齢」を入力するフォームを作ると次のようになります！

  名前：

  年齢：

  

formタグ内のmethod属性がPOSTに設定されている点に注目してください。

これにより、このフォームはPOSTデータとして送信されるようになります。

あとは、inputタグにname属性を付与して、何のデータが入力されたのかを識別できるようにしておきましょう！

「POST」の受信

この章では、送信されたPOSTデータを受信するためのサーバー環境を準備していきましょう！

主に、サーバーの構築からPOSTデータを受信する機能の作り方について学んでいきます。

「http」モジュールでサーバーを構築する

まず最初に、基本的なサーバーをNode.jsで作っていきましょう！

標準的なhttpモジュールによるサーバーを作っていきます。

次のサンプル例を見てください！

var http = require('http');
var html = require('fs').readFileSync('index.html');

http.createServer(function(req, res) {

  if(req.method === 'GET') {
    res.writeHead(200, {'Content-Type' : 'text/html'});
    res.end(html);
  }

}).listen(3000);

この例ではhttpモジュールに加えて、先ほど作成したフォームをブラウザへ表示するためにfsモジュールを利用してindex.htmlを読み込んでいます。

そして、createServer()メソッドを利用してサーバーを構築して、通信が正常であればindex.htmlを表示するように処理しています。

このあたりのNode.jsを利用したサーバー構築にまだ不安のある方は、次の記事で基本から応用までまとめているのでぜひ参考にしてみてください！

POSTを受信する機能を作る

次に、いよいよPOSTデータを受信する仕組みを作っていきましょう！

基本的な流れとしては、先ほどGETでindex.htmlを表示した処理に続けて、POSTの処理を作っていきます。

ポイントは、「req.method」に格納されているのがGETなのかPOSTなどかを判断するIF文を作成するという点です！

http.createServer(function(req, res) {
  if(req.method === 'GET') {

    res.writeHead(200, {'Content-Type' : 'text/html'});
    res.end(html);

  } else if(req.method === 'POST') {


        //ここにPOST受信処理を記述する

  }
}).listen(3000);

これにより、POSTデータを受信した場合の処理に自動で切り替えることができます。

POSTの処理としては、受信したフォームのデータをすべて変数に格納し、それを出力していきましょう！

受信したPOSTデータの受け取りは、「on()」メソッドからデータイベント処理を作ることで可能になります。

http.createServer(function(req, res) {
  if(req.method === 'GET') {
    res.writeHead(200, {'Content-Type' : 'text/html'});
    res.end(html);
  } else if(req.method === 'POST') {
    var data = '';
    
   //POSTデータを受けとる
   req.on('data', function(chunk) {data += chunk})
      .on('end', function() {

        console.log(data);
        res.end(html);

      })

   }
}).listen(3000);

「req.on()」にて関数の引数「chunk」に受信したPOSTデータが格納されているので、これを変数「data」に格納していきます。

あとはこの「data」を利用することでNode.jsからPOSTデータを活用することができるというわけです。

POSTデータの送信と受信

それでは、実際に作成したフォームからデータを送信して、Node.jsで作成したサーバーからどのように取得できるかを試してみましょう！

フォームに「名前」「年齢」を入力して送信ボタンをクリックしてデータを送信します。

すると、サーバーのコンソールログには次のような実行結果が出力されているはずです！

name=taro&age=30

これは、HTMLのフォームに付与していた「name属性 = 値」の組み合わせになります。

name属性が付与されていない入力フォームの値はサーバー側で受信することができないので、必ずname属性を付与するようにしましょう！

「POST」の活用

この章では、POSTデータの扱いについてもう少し詳しく見ていきましょう！

主に、requestモジュールを利用した方法と受信データのサイズ制限について学んでいきます。

requestモジュールを活用したPOSTについて

「requestモジュール」は、これまで利用してきたhttpモジュールよりも簡潔に通信処理を記述できるのが特徴です。

そのため、POSTデータ処理についても同じく簡単に記述できるので非常にオススメです。

一般的な使い方としては、オプション設定を記述するだけでほとんどの処理を効率よく書けます。

var options = {
    url: 'https://www.sejuku.net/blog/sample',
    method: 'POST',
    form: {"name":"太郎"}
}

この例では、POSTデータを送信するサーバーのURLと、POSTを意味するmethod、送信するデータを設定しているだけです。

これをrequesstメソッドに当てはめるだけでPOST処理が完結するわけです。

request(options, function (error, response, body) {
 
    console.log(body);
 
 
})

requestモジュールの基本的な使い方から応用までを、次の記事で体系的にまとめているのでぜひ参考にしてみてください！

POSTデータのMAXサイズ制限について

今度は、受信するPOSTデータのサイズ制限について見ていきましょう！

制限するのは送信できるMAXのデータサイズになります。

なぜ制限するのが重要かと言うと、何もしていなければ巨大なデータを送信できてしまうのでDoS攻撃などを受けてサーバーがクラッシュする可能性があるためです。

そこで、POSTデータを受けとる際に任意のサイズを超えていないかを条件分岐する必要があるわけです。

次のサンプル例を見てください！

//MAXサイズを5MBにする
var maxData = 5 * 1024 * 1024;


req.on('data', function(chunk) {

    data += chunk

    if(data.length > maxData) {
        res.writeHead(413);
        res.end('送信データのサイズは5MB以内にしてください');
    }

})

この例では、MAXサイズを5MBとしてPOSTデータを受け取ったあとに条件分岐の処理を追加しています。

もしMAXサイズを超えていた場合は、エラーコードを出力してPOSTデータの受信処理を中止するのが良いでしょう。

まとめ

今回は、Node.jsでPOSTデータを扱うための方法について学習してきました！

最後に、もう一度ポイントをおさらいしておきましょう！

・POSTデータを送信する時はフォームにmethod / name属性を付与する
・httpモジュール・requestモジュールを活用してPOSTデータを受信する
・POSTデータを受信する時はサイズ制限を実装するのを忘れない

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！