【Node.js】Expressで書いたWebサーバ本体のJavaScriptファイルを1行ずつ見ていく

前回Node.jsにExpressをインクルードしてWebサーバーを立ち上げました。
Node.jsだけで行うよりずっと少ないシンプルなコードでできることがわかりました。

さて、Expressとは一体何でしょうか?
調べてみました。

Expressとは

Expressの公式サイトを見てみると以下のように紹介されています。

Express は、Web アプリケーションとモバイル・アプリケーション向けの一連の堅固な機能を提供する最小限で柔軟な Node.js Web アプリケーション・フレームワークです。

Express公式サイトより

Node.jsのフレームワークなのですね。
Webアプリケーションとモバイル・アプリケーションで色々できちゃう凄いやつらしいです。

ミドルウェアの積み重ね

Expressの基本はミドルウェアの積み重ねであり、各ミドルウェアは原則的に3つの引数を持ちます。

  • リクエストの情報が入ったオブジェクト
  • レスポンスを返すためのオブジェクト
  • ミドルウェアの処理を中断して次のミドルウェアに処理を渡すための処理

クライアント(ブラウザやスマホアプリ等)からのリクエストをExpressのサーバーで受け取った時、Expressの各ミドルウェアはその内容を解析して決まった形式のオブジェクトに展開します。

デフォルトのExpressサーバーはリクエストを受け取ってレスポンスを返すだけの最低限機能しか付いていません。
別途Express用に開発されたミドルウェアを追加することで、フォームの解析・バイナリファイルの受け取り・セッションやクッキーの処理等の機能を追加することができます。

つまり、Expressで何かの処理を行いたいときはミドルウェアを追加すれば良いのです。
ミドルウェアの処理はコードの上から下へ順番に行われるのでコードの順番を間違えると期待通りに動いてくれないので注意が必要です。

Expressのコードを見てみよう

前回、Expressを使ってサーバーを起動しました。
そのときの app.js は以下の通りです。

// app.js
var http = require('http');
var express = require('express');

var app = express();
 
app.get("/", function(req, res){
  return res.send("HelloWorld");
});
 
var server = http.createServer(app);
server.listen(3000); 

2行増えたのですが、Node.jsだけのときと比べて変わった部分は以下でしょう。

 var express = require('express');
 var app = express();
 
 app.get("/", function(req, res){
   return res.send("HelloWorld");
 }); 

Expressを使用できるようにする

まずはこちらの1行です。

 var express = require('express');

Node.jsでは require という構文を指定してパッケージ名を指定することで外部のパッケージを使用できるようになると前回学びました。

‘express’ を指定して外部のパッケージであるExpressを使用できるようにしています。

Expressアプリケーションを作成

var app = express();

実はこれをみたとき「require(‘express’); をそのまま app に入れているだけだじゃね?なんなら var app = require(‘express’); でも良いじゃね?」と勘違いしました。
当然 var app = require(‘express’); ではエラーが吐き出されて動いてくれません。

この1行は express() を実行することでExpressアプリケーションを作成し、アプリケーションオブジェクトをapp変数に格納しています。
こうすることでGETメソッドやPOSTメソッドを使えるようになります。

受送信をする

app.get("/", function(req, res){
   return res.send("HelloWorld");
 }); 

Appの後に続く get() はミドルウェア関数が適用されるHTTPメソッドです。

指定されたパス(1つ目の引数 “/“)にHTTP GET要求があったときに2つ目の引数で指定されたコールバック関数を実行します。
今回は res.send(“HelloWorld”); でHTTPレスポンスを送信します。

つまり、ブラウザにURLを入力してアクセスした(HTTP GET要求があった)ら「HelloWorld」がHTTPレスポンスで返されてブラウザに「HelloWorld」と表示されるというわけです。

あとがき

Expressの公式サイトにExpressについての説明やメソッドの使い方が詳しく書かれていました。
もっと詳しく学びたいときはこちらをご覧になると良いでしょう。

ソースコードって英字でパーっと書かれていて難しく複雑に見えますよね。(英語が苦手な人は特に!)
膨大なソースコードに出会うと吐き気を催して拒否反応を起こしてしまいますよね。

ですが、1行ずつきちんと読んでそれぞれのコードの意味がわかってくると今まで知らずにいたこと自体が勿体ないことだったと気付かされました。
食わず嫌いみたいなものですね。

勇気を持って「えいや!」と一歩踏み込むと新たな世界が開てくる。
新しいプログラミング技術を習うことはそんな感覚に近いと思いました。

関連ページ

フォローお願いします