8.
Expressの基礎
Expressとは
Node.jsのWebアプリケーション
ExpressはNode.jsで利用できる、WebアプリケーションおよびAPI構築できる軽量で高速なWebアプリケーションフレームワークです。
シンプルで拡張可能
シンプルな設計とモジュール性を持ち、プロジェクトの要件に合わせてカスタマイズできます。また、多くのサードパーティモジュールが利用可能で、新しい機能を追加しやすくなっています。
Expressの主な機能
ルーティング
HTTPリクエストに対するルーティングを簡単に設定できます。ルーティングは、HTTPメソッド（GET、POST、PUT、DELETEなど）とURLパスに基づいて処理されます。
ミドルウェア
Expressはミドルウェアをサポートし、リクエストとレスポンスの間でカスタムの処理を挿入できます。認証、セッション管理、ログ記録、入力検証などの一般的なタスクを実行するのに便利です。
テンプレートエンジン
HTMLを生成するためのテンプレートエンジンをサポートします。一般的なテンプレートエンジンとしては、EJS、Pug、Handlebarsなどがあります。
静的コンテンツ
静的なコンテンツ（CSS、JavaScript、画像など）を公開するミドルウェアを簡単に設定できます。
RESTful APIの作成
RESTfulなAPI構築するためのツールとして使用されています。HTTPメソッドからエンドポイントを作成し、JSONなどのデータフォーマットでデータを送受信できます。
Express の基本
サーバ起動
Expressでは、Node.jsサーバを簡単に起動できます。
サーバ作成
express() でサーバを作成します。
server.js
const app = express();
サーバ待機
サーバを起動すると、ポート番号とホストで待機状態になります。
server.js
app.listen(ポート, ホスト, () => {
//処理
);
- デフォルトポート：3000
- デフォルトホスト：localhost
ルーティング
Express は、get() や post() などでHTTPクエストをマッピングできます。 指定のURLでアクセスすると、対応のリクエストメソッドとコールバック関数が実行されます。
GETリクエスト
app.get(URLパス、コールバック関数);
POSTリクエスト
app.post(URLパス、コールバック関数);
すべてのリクエスト
app.all(URLパス、コールバック関数);
GETリクエストの場合
GETリクエストは get() を利用し、リクエスト＆レスポンスのオブジェクトを引数としたコールバック関数を設定します。
app.get(URLパス, (req, res) => {
//処理
});
Expressでサーバ作成
ExpressでWebサーバの起動してみましょう。
ファイル構成
express_sample/
├── node_modules/
├── .env
├── package-lock.json
├── package.json
└── server.js
モジュール
- express
- dotenv
インストールと設定
npm 初期化
npmで初期化します。
npm init -y
パッケージインストール
「express」「dotenv」パッケージをインストールします。
npm i express dotenv
設定ファイル「.env」
「.env」を作成してホストとポート番号を設定します。
.env
HOST=localhost
PORT=3000
Expressサーバ
プロジェクト内に「server.js」を作成します。
モジュール読み込み
expressモジュールを読み込みます。
server.js
const express = require('express');
設定読み込み
dotenvモジュールを使って、「.env」のホストとポートを読み込みます。
server.js
const dotenv = require('dotenv');
dotenv.config();
const host = process.env.HOST;
const port = process.env.PORT;
Expressサーバ作成
「server.js」でExpressサーバを作成します。
server.js
const app = express();
マッピング
GETリクエストで「/」にアクセスしたときの処理を実装します。
server.js
app.get("/", (req, res) => {
});
リクエストオブジェクトreqから、本文、URL、クエリパラメーターをログ表示します。
server.js
app.get("/", (req, res) => {
console.log(req.body);
console.log(req.url);
console.log(req.query);
res.send("Hello Express!");
});
- 本文：req.body
- URL：req.body
- クエリパラメータ：req.query
レスポンス
レスポンスオブジェクトresの send() でクライアントにレスポンスします。
res.send(結果);
server.js
app.get("/", (req, res) => {
...
res.send("Hello Express!");
});
サーバの待機
listen() でサーバ待機処理します。
server.js
app.listen(port, host, () => {
console.log(`Server listen: http://${host}:${port}`);
});
サーバ起動確認
Express サーバを起動し、ブラウザで確認してみます。
node でサーバ起動
ターミナルで「server.js」を実行します。
node server
Server listen: http://localhost:3000
ブラウザで確認
ブラウザで「http://localhost:3000」にアクセスします。「Hello Express!」が表示されれば成功です。
GETパラメータの確認
http://localhost:3000?keyword=apple のように GETパラメータでアクセスしてみます。
ターミナルでログで、GETパラメータが取得できるか確認してみましょう。
undefined
/?keyword=apple
{ keyword: 'apple' }
Express サーバ停止
Express サーバ停止したいときは、起動中のターミナルで Ctrl + C を押します。
ソース
const express = require('express');
const dotenv = require('dotenv');
dotenv.config();
const host = process.env.HOST
const port = process.env.PORT
const app = express();
app.get("/", (req, res) => {
console.log(req.body);
console.log(req.url);
console.log(req.query);
res.send("Hello Express!");
});
app.listen(port, host, () => {
console.log(`Server listen: http://${host}:${port}`);
});
演習
問題1
server.js を修正して、 /profile に GETアクセスしてレスポンスを返してみましょう。※プログラムを修正したら、サーバの再起動が必要です。