第5章 Express.js

1. フレームワークとは

1.1 ライブラリとの違い

「ライブラリ」と「フレームワーク」は両方とも「他の人が作ったコードを使う」という点は同じである。違いは「誰が主導権を持つか」である。

Table 1. ライブラリとフレームワークの違い

Fig. 1 主導権の違い

ライブラリ:
自分のコード → lodash.get() を呼ぶ → 結果を受け取る
              自分が主導権を持つ

フレームワーク:
Express.js → リクエストが来た → 自分のコードを呼ぶ
             フレームワークが主導権を持つ

1.2 Express.jsの立ち位置

フレームワークには「軽量系」と「フルスタック系」がある。

Table 2. フレームワークの種類

Table 3. 他言語のフレームワーク比較

Fig. 2 Express.jsの立ち位置

httpモジュール（生のNode.js）
    ↓ 機能追加
Express.js（軽量フレームワーク）
    ↓ さらに機能追加
Nest.js（フルスタックフレームワーク）

2. 用語の整理

2.1 ルーティング

route = 経路、道筋。「どのURLに来たら、どの処理を実行するか」を決めることである。

ユーザーがアクセス        実行される処理
─────────────────────────────────────
/              →        トップページを表示
/about         →        会社概要を表示
/contact       →        お問い合わせフォームを表示

第4章のif/elseとExpress.jsのルーティングを比較する。

// 第4章：httpモジュール（生のNode.js）
if (req.url === '/') {
    res.end('トップ');
} else if (req.url === '/about') {
    res.end('会社概要');
}

// Express.js：ルーティング
app.get('/', (req, res) => res.send('トップ'));
app.get('/about', (req, res) => res.send('会社概要'));

2.2 ミドルウェア

middle = 中間、ware = 製品。「リクエストが来てから、レスポンスを返すまでの途中で実行される処理」である。

Fig. 3 ミドルウェアの流れ

リクエスト
   ↓
┌─────────────────┐
│ ミドルウェア1    │  ← ログを記録
└────────┬────────┘
         ↓
┌─────────────────┐
│ ミドルウェア2    │  ← 認証チェック
└────────┬────────┘
         ↓
┌─────────────────┐
│ 本来の処理       │  ← 実際のレスポンス作成
└────────┬────────┘
         ↓
レスポンス

共通処理を1箇所にまとめられるのがメリットである。

注意：「ミドルウェア」という言葉は文脈によって意味が異なる。

Table 4. ミドルウェアの2つの意味

2.3 フルスタック

full = 全部、stack = 積み重ね。Webシステムは複数の技術を積み重ねて作る。この積み重ねを「スタック」と呼ぶ。

┌─────────────────┐
│ フロントエンド   │  ← 画面（HTML、CSS、JavaScript）
├─────────────────┤
│ バックエンド     │  ← サーバー処理（Node.js、Java等）
├─────────────────┤
│ データベース     │  ← データ保存（MySQL等）
└─────────────────┘

「フルスタックフレームワーク」とは、これらすべてを扱う機能が最初から入っている「全部入り」のフレームワークを指す。

3. Express.jsの基本

3.1 インストールと最小構成

npm install express

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

app.get('/', (req, res) => {
    res.send('Hello World');
});

app.listen(3000);

3.2 httpモジュールとの比較

// httpモジュール（8行）
const http = require('http');
const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World');
});
server.listen(3000);

// Express.js（6行）
const express = require('express');
const app = express();
app.get('/', (req, res) => {
    res.send('Hello World');
});
app.listen(3000);

行数は似ているが、URLが増えたときの差が大きくなる。

4. HTTPメソッド

リクエストには「種類」がある。「何をしたいか」を表す。

Table 5. HTTPメソッド

// GETリクエスト（ページを見る）
app.get('/users', (req, res) => {
    res.send('ユーザー一覧');
});

// POSTリクエスト（データを登録）
app.post('/users', (req, res) => {
    res.send('ユーザーを登録しました');
});

// DELETEリクエスト（データを削除）
app.delete('/users/1', (req, res) => {
    res.send('ユーザー1を削除しました');
});

同じURLでもメソッドによって実行される処理が異なる。

GET  /users  → ユーザー一覧を返す
POST /users  → ユーザーを新規登録する

5. パラメータの取得

5.1 URLパラメータ

`:パラメータ名` という書き方で、URLの一部を変数として受け取れる。

app.get('/users/:id', (req, res) => {
    const userId = req.params.id;
    res.send(`ユーザーID: ${userId}`);
});

// /users/123 にアクセス → req.params.id は "123"
// /users/456 にアクセス → req.params.id は "456"

複数パラメータも可能である。

app.get('/users/:userId/posts/:postId', (req, res) => {
    const userId = req.params.userId;   // "123"
    const postId = req.params.postId;   // "456"
    res.send(`ユーザー${userId}の投稿${postId}`);
});

5.2 クエリパラメータ

`?` の後ろに `キー=値` の形式で付ける。

/search?keyword=nodejs&page=2
       └─────────────────┘
         クエリパラメータ

app.get('/search', (req, res) => {
    const keyword = req.query.keyword;  // "nodejs"
    const page = req.query.page;        // "2"
    res.send(`検索: ${keyword}, ページ: ${page}`);
});

5.3 リクエストボディ

POSTリクエストでJSONデータを受け取るには、ミドルウェアを設定する。

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

// JSONを受け取る準備（ミドルウェア）
app.use(express.json());

app.post('/users', (req, res) => {
    const name = req.body.name;    // "田中"
    const email = req.body.email;  // "tanaka@example.com"
    res.send(`登録: ${name}`);
});

`express.json()` はリクエストボディの文字列をJavaScriptオブジェクトに変換する。

リクエスト（生データ）: '{"name":"田中"}'
       ↓
express.json() で変換
       ↓
{ name: "田中" }  ← req.body で取得可能

5.4 3つの取得方法まとめ

Table 6. パラメータ取得方法

6. まとめ

Table 7. 第5章のまとめ