【Express.js】Webフレームワークの基礎を学習【初心者に分かりやすく解説】

Expresss.jsはNode.jsの為の最小限の軽量Webフレームワークです。

「Ruby on Rails」や「Django」といったフルスタックのWebフレームワークを使う前に軽量のWebフレームワークを使う事で、具体的にどの様な処理が走っているか理解を深める事が出来ます。

事前準備（Node.jsのダウンロード）

Node.js及びパッケージ管理ツールのnpmをインストールします。

Node.jsをインストールすると同時にnpmもインストールされるので、まずはNode.jsの公式サイトにアクセスします。

「最新版」と、「LTS（Long Term Support）」の２種類が表示されますが、最新版は不具合等もある可能性があるので、初心者はLTSを試すのがオススメです。

インストールの確認

コマンドラインで「node –version」と「npm –version」と入力して、nodeとnpmがインストールされた事を確認します。

node --version
v12.13.0

npm --version
6.12.0

npm(パッケージ管理)の初期化

まずは、デスクトップで「sample-project」フォルダーを作成し、初期化します。

npm init

「package.json」ファイルを作成するための質問が色々とされますが、基本的に「Enter」でデフォルトのままで結構です。

package name: (sample) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

Is this OK? (yes) yes

package.json ファイルが作成された事を確認して下さい。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

先ほどの設定が色々と書かれていますよね。

Express.jsのインストール

続いて、「express.js」のインストールを行います。

npm install express --save

公式サイトでは、「–save」オプションが付いていますが、実はnpmのバージョン5.0から「–save」はデフォルトで付与されます。なので、

npm install express

でOKです。

インストールが完了したら、「package.json」 ファイルを確認して下さい。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

「”dependencies”」に「”express”: “^4.17.1″」が追加されている事が分かりますでしょうか？（バージョンは異なっていても構いません）

この様に、インストールされたパッケージが管理されていきます。

Express.jsでHello Worldを表示

まずは「Hello World」を表示させます。

「index.js」ファイルを作成します。

touch app.js

先ほどのnpmの設定で「”main”: “index.js”」としたからですが、ここを「app.js」等にしてもOKです。

「index.js」に以下の4行を追記します。

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

そして、「index.js」を「node index.js」で実行します。

node index.js

Example app listening on port 3000!

ブラウザーを開いて、「http://localhost:3000」 にアクセスすると、「Hello World画面」が表示されるはずです。

Hello Worldの解説

たった4行のコードで表示出来ましたが、具体的にどの様な処理が走っているか確認していきましょう。

expressモジュール読み込み

const express = require('express')<br>
const app = express()

まず、expressモジュールをrequireで読み込み、expressアプリケーションを作成して変数appに登録しています。

変数宣言にconstを使用している事に注意して下さい。

古いコードでは変数にvarを使用しているものを見るかもしれませんが、同じ事です。

ミドルウェアの作成

ここが、初心者の一番の難関だと思います。

app.get('/', (req, res) => res.send('Hello World!'))

アロー関数（=>）を使用した形式となっていますが、アロー関数は大丈夫ですか？不安な人は、Java Scriptのアロー関数を復習しておいて下さい。

アロー関数を使わないと、以下の書き方になります。

app.get('/', function (req, res) {
  res.send('Hello World!')
})

公式サイトのミドルウェアの作成のページを見てみましょう。

アロー関数を使わない古い解説資料ですが、こちらの方がイメージしやすいと思いますので、あえて使います。

ポイントは

• HTTPメソッドは何か？
• パスは何か？
• HTTPリクエストとレスポンス

の3つです。

HTTPメソッドは何か？

ミドルウェア関数が適用されるHTTPメソッドについてまず確認しましょう。

まず、「app.get」なので、GETメソッドですね。

HTTPリクエストメソッドって？

HTTPリクエストメソッドについてはOKですか？

HTTPリクエストメソッドは高々8種類しかありませんが、特に良く使われる４つのメソッドについて押さえておきましょう。

• GET（リソースの取得）
• POST（データ追加）
• PUT（リソースの更新）
• DELETE(リソースの削除）

HTTPリクエストメソッドについて

CRUD	意味	メソッド
Create	作成	POST/PUT
Read	読み込み	GET
Update	更新	PUT
Delete	削除	DELETE

この４つのメソッドは、Webアプリケーションの基礎のCRUD処理と対応するので特に大切です。

HTTPメソッドの詳しい話を知りたい人は、Webを支える技術を読むのがオススメです。

パス（ルート）の設定

app.get('/', function (req, res) {
  res.send('Hello World!')
})

ルーティングは簡単ですよね。第一引数の「”/”」がパスです。

「http://localhost:3000」でページが表示されていましたが、この「”/”」を「”/about”」とすると、「http://localhost:3000/about」となります。

HTTPレスポンスの設定

HTTPレスポンスは、res.sendメソッドで「Hello World!」を返しています。resはresponseの略です。

 res.send('Hello World!')

テキストを返していますが、htmlファイルを返したい場合は「res.sendFile()」関数を使用します。

サーバーの始動

最後に、Expressサーバーの起動について記述します。

app.listen(3000, () => console.log('Example app listening on port 3000!'))

「node index.js」コマンドを実行すると、Expressサーバーが起動します。

ブラウザからアクセスする為のポートは3000に設定していますが、別に3000でなくても大丈夫です。

3000の場合、「http://localhost:3000」にアクセスすると、ページが表示されます。

先ほどの実行ログを見返して下さい。

node index.js

Example app listening on port 3000!

「console.log」の箇所「Example app listening on port 3000!」がきちんと表示されていますよね。

nodemonで常時監視

それでは、「index.js」のファイルで「Hello World」をh1タグとして表示される様に変更してみましょう。

app.get('/', (req, res) => res.send('<h1>Hello World!</h1>'));

ブラウザをリロードしても表示は変わりませんよね。

変更を反映するには、「サーバーの停止（Ctrl+C）」=>「再実行（node index.js）」を行い、ファイル変更を反映させます。

しかし、毎回「サーバーの停止」=>「再実行」でファイル変更を反映させるのは非効率ですよね？

ですので、リアルタイムに変更させる「nodemon」の出番です。

「nodemon」って何か「ドラえもん」みたいな名前ですよね。

一般的にソフトウェアで使われる「デーモン（daemon）」はバックグラウンドで動くソフトウェアの事です。要は、縁の下の力持ちですね。

デーモンって「悪魔（demon)」ではなく、「守護神（daemon）」なので、誤解なきよう。

daemon（守護神）とはギリシャ神話に登場し、神々が煩わされたくないと考えた雑事を処理した存在である。

Wikipedia

それにしても、Wikipediaの説明の使いっ走り感。。。

nodemonのインストール

インストールは簡単です。

npm install -g nodemon

とすればOKです。

-gオプションを付けてグローバルにインストールしていますので、今後どのプロジェクトでも使用できます。

nodemonの起動

nodemonを起動させます。

nodemon index.js

以下の表示がコマンドラインに表示されればOKです。

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Example app listening on port 3000!

nodemonを起動中に変更

例えば、「index.js」にaboutページを追加しましょう。

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

app.get('/', (req, res) => res.send('<h1>Hello World!</h1>'));

app.get('/about', (req, res) => res.send('<h1>This is About page</h1>'));

app.listen(3000, () => console.log('Example app listening on port 3000!'));

nodemoが変更を感知して、以下のメッセージがコマンドラインに表示されます。

[nodemon] restarting due to changes...
[nodemon] starting `node index.js`
Example app listening on port 3000!

サーバーを停止→再起動する事なく、aboutページが表示されれば成功です。