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(リソースの削除）
| 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ページが表示されれば成功です。
