こんにちは、ライターのマサトです！
今回は、Node.jsで簡単にWebサーバーを構築できるhttpモジュールの基本的な使い方について学習をしていきましょう！
この記事では、
- 「httpモジュール」とは？
- 「httpモジュール」の使い
という基本的な内容から、
- GETデータを受信する方法
- POSTデータを受信する方法
などの応用的な使い方に関しても解説していきます。この記事で、httpモジュールをしっかり学習して自分のスキルアップを目指しましょう！
「httpモジュール」とは？
それでは、まず最初に「httpモジュール」の基本的な知識から身に付けていきましょう！ 「httpモジュール」は、その名の通りHTTPサーバーやHTTPクライアントとしての機能を構築するために使われます。
簡単に言えば、自分のwebサイトをネット上に公開したり、フォームなどからデータを送受信できるわけです。もちろん、静的なWebサイトだけでなくTwitterのような大きなWebサービスを構築することも可能になります。
本記事では、その中心となるHTTP通信を行うための基本的な使い方について解説していきますので参考にしてみてください！
「httpモジュール」の使い方
この章では、「httpモジュール」の基本的な使い方について見ていきましょう！ 主に、簡単なWebサーバーを構築する方法について学んでいきます。
Webサーバーの作り方
まずは、「httpモジュール」をどのように使ってWebサーバーを作れば良いのかについて見ていきましょう！ 「httpモジュール」に限りませんが、Node.jsはモジュールをrequire()で呼び出して使う必要があります。
var http = require('http');
まず、最初にこのように記述してから「createServer()」メソッドを使ってWebサーバーを構築していきます。
http.createServer( サーバー側の処理 )
createServer()の引数には、ヘッダー情報や表示するコンテンツを設定するなどさまざまな処理を記述することになります。
createServer()で簡易Webサーバーを作る
それでは、実際に簡単なWebサーバーを作ってみましょう！ まず、基本的な骨組みは次のようになります。
var http = require('http');
var server = http.createServer(function(request, response) {
//ここに処理を記述する
})
server.listen(8080);
require()でhttpモジュールを使えるようにしてから、createServer()を使って構築していきます。
最後にlisten()でポート番号を指定すれば、「localhost:8080」にブラウザからアクセスすることができます。あとは、createServer()の中身ですが、最低限の記述としてヘッダー情報とコンテンツを次のように記述してみましょう。
var server = http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
response.end('Hello World
');
})
writeHead()で「Content-Type」を設定し、end()の引数にHTMLを指定しています。これにより、「Hello World」という文字列をブラウザに表示するだけの簡易Webサーバーが完成するというわけです。
HTMLファイルを表示するサーバーを構築する
今度は文字列ではなく、別途作成したHTMLファイルをブラウザに表示するサーバーを作ってみましょう！ そこで、次のように簡単なindex.htmlファイルを作ります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプルサイト</title> </head> <body> <h1>サンプルサイト</h1> </body> </html>
このHTMLファイルを、先ほど作ったWebサーバーで簡単に表示するには次のように記述します！
var http = require('http');
var html = require('fs').readFileSync('views/index.html');
var server = http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(html);
})
server.listen(8080);
2行目に注目してください！ Node.jsでファイルを扱うためのfsモジュールを使って「index.html」を読み込んでいるのが分かりますね。これを変数htmlに格納し、end()の引数に設定することでブラウザに表示できるようになるわけです。
今回利用したfsモジュールについての基本から応用技については、次の記事で詳しくまとめているんで参考にしてみてください！
GETデータを受信する方法
ここからは、HTTP通信でも一般的なGET通信について見ていきましょう！ 基本的に、ブラウザからWebサイトにアクセスする時はGET通信でサーバーへリクエストを自動的に送信します。
また、フォームなどのデータを送信する場合はPOST通信で送るのが一般的です。そこで、サーバーに来るリクエストがGET通信であるかどうかを判断するには次のように記述します。
http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
if(request.method === 'GET') {
//ここに処理を記述する
}
})
IF文の条件式に注目してください！ 「request.method」には、サーバーへ送られたリクエストの種類が格納されています。
これを例えば「GET」で比較して、trueの場合の処理を記述すればGET通信だけを区別することができるわけです。
POSTデータを受信する方法
「GET」の受け取り方が分かったところで、今度は「POST通信」について見ていきましょう！ POSTの場合も基本的な区別の方法はGETの時と同じです。
http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
if(request.method === 'POST') {
//ここに処理を記述する
}
})
このように「POST」という文字列と比較するだけなので簡単です。ただし、POSTの場合は何らかのデータが送信されているのが普通なので、このデータを受けとる処理が必要です。
これにはon()メソッドを次のように記述するのがもっとも簡単でしょう！
if(request.method === 'POST') {
var postData = '';
request.on('data', function(chunk) {
postData += chunk;
}).on('end', function() {
response.end('あなたが送信したのは、' + postData);
})
}
request.on()の中で関数を記述し、その引数である「chunk」に送信されたデータが格納されています。フォームの場合などは複数のデータが送られてくるので、変数に「+=」で追加していくように格納していくのが良いでしょう。
最後に、続けて「on(‘end’)」イベント処理内で取得したデータを画面に表示させています。
まとめ
今回は、Node.jsで簡単なWebサーバーを構築できるhttpモジュールについて学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
- require()でhttpモジュールを使えるよう状態にしておく
- createServer()メソッドを使うことで簡単にWebサーバーを構築できる
- request.methodからGET / POSTなどの通信種類を判別できる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
