Node.js(Express)でミドルウェアを簡単に実装してみる(ローカルサーバー立ち上げまで)

前提

この記事ではExpressで必要となるミドルウェアの実装を行う。そのため簡単に記事を読むことでミドルウェアの概要に触れることで、流れなどをインプットしたい人に向けて発信します。

大まかな流れ

Node.jsの紹介
↓
ミドルウェアについて
↓
実装:Node.jsのプロジェクトの作り方とローカルサーバー立ち上げ(この記事はここまで)
↓
調べてみた(モジュールの形式よって読み込み方の違いについて)

ゴール

Node.jsにおけるミドルウェアの理解を深め、ミドルウェアとはどのようなことを示すのかまで落とし込み、ここをゴールとする。(この記事はローカルサーバーの立ち上げまでとする。)

Node.jsとは

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 以下の「Hello World」の例では、たくさんの接続を同時に処理することができます。 各接続ごとにコールバックは発火され、何もすることがない場合、Node.js はスリープします。

こちらは公式のドキュメントに紹介してある内容です。WEBページやアプリ作成に使用されるJavaScriptをサーバー側で動かすプラットフォームです。従来はWEBブラウザで動作するJavaScript(以降はJSと訳す)でしたが、Node.jsを採用することでJSの記述法でサーバー側の開発もできるようになった。
さらに詳しい内容はこちらの記事を参考にしてください。

具体的にNode.jsを用いてアプリケーションを構築するにあたってのメリット。対して利用するにあっての考慮しなければならないデメリットが挙げられています。

ミドルウェアとは

ミドルウェアとはクライアントサイド(ブラウザ、API)からリクエストが送信されてからレスポンスがを戻す前に実行される処理です。

今回のミドルウェアを利用するにあたってミドルウェア関数を利用します。ミドルウェア関数を実行することで以下のように処理をすることができる。こちらの記事を参考にしました。

• 任意のコードを実行する。
• リクエストオブジェクトとレスポンスオブジェクトを変更する。
• リクエストレスポンスサイクルを終了する。
• スタック内の次のミドルウェア関数を呼び出す。

実装

こちらの記事を参考にアプリケーションレベルのミドルウェアを一つ設定した場合と複数設定した場合の実装を行なってみる。まずはミドルウェア一つ設定した場合の処理を行う。最初に簡単なプロジェクトの作成から始め、任意の階層にプロジェクトフォルダを作成する。

mkdir node-tutorial-app

cdコマンドを利用して移動してください。そして該当のプロジェクトの階層に選択して、enterキーで移動してください。基本的なlinuxについてはこちらの記事を参考にしてください。フォルダ作成のmkdirコマンドの他にlsコマンドなどのディレクトリの一覧を表示するlsなど一覧で読むことができます。

cd node-tutorial-app

codeコマンド利用してプロジェクトを立ち上げてください。エディタはvscodeを用いています。
codeコマンドについてはこちらの記事を参考にしてください。設定の仕方やプロジェクトの立ち上げ方について解説しています。

code .

プロジェクトを立ち上げましたらpackage.jsonの初期化を行います。vscodにてMacの方は⌘+ J(ctrl + J)でターミナルを開き、以下コマンドを実行し初期化を行なってください。なぜnpm initをして初期化をするのかの理由かこちらの記事を参考にしました。

*「npm init」とは、簡潔にいえば「このディレクトリをnpmの管理下に置く」*という命令です。

以上の理由によりこのコマンドを実行するみたいです。

npm init

その後、質問が英語でされると思うのですが、全てyesで回答してください。すると以下の内容のpackage.jsonが生成されると思います。

packag.json

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

この内容から次にexpressをインストールするので、以下のコマンドをターミナル上で実行してください。こちらの記事を参考にしています。公式サイトにあるインストールの仕方です。

npm i express

さらにnodemonというソースを監視して、自動でサーバー再起動を行なってくれるツールをインストールします。nodemonの特徴などについてはこちらの記事を参考にしてください。

npm i nodemon

以上をインストールするとpacage.json内の内容は下記のように書き変わると思います。

package.json

{
  "name": "api-tutriaol",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
     "express": "^4.18.2",
     "nodemon": "^2.0.20"
  }
}

そして、nodemonをコマンドを登録して実行できるようにscriptsフィールド内にdevコマンドを追加します。testコマンドの下に "dev": "nodemon index.js"を追記してください。scriptsフィールド内のタスクを実行についてはこちらの記事を参考にしてください。scriptsフィールド内のタスクを処理するnpm scriptsという手法について解説しています。

package.json

{
  "name": "api-tutriaol",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^2.0.20"
  }
}

現段階で簡単な環境構築は終了です。vscodeのフォルダ内にpacage.jsonと同じ階層にindex.jsを作成して以下のコードを記述してください。

index.js

//expressモジュールを読み込み、変数appに格納
const express = require('express');
const app = express();

//ポート番号の指定
const PORT = 5500;


app.listen(PORT, () => console.log('サーバーが起動しました。'));

そして、ターミナル上にnpm run devとコマンドを打ち込みサーバーを起動すると以下のように表示されると思います。

[nodemon] starting `node index.js`
サーバーが起動しました。

//サーバーの閉じ方はMacの方はcontrol + c(Win: ctrl + c)。再び、サーバーを立ち上げ方は`npm run dev`。

これでコンソールの内容が出力されました。そして、ブラウザを開き今回指定したポート番号のlocalhost:5500にアクセスするとCannot Get /と表示されると思います。上記でまだブラウザに表示する内容を記述していないためです。

調べてみたこと

Reactのようなライブラリを使用したことのある方は気づいたかもしれないですが、Node.jsのモジュールの読み込みはrequireを用いられます。Reactなどで読み込むときはimportを用いられます。この違いはモジュールの形式によって読み込み方が異なるみたいです。以下の違いによるものだそうです。

requireは「CommonJS」形式によるモジュールの読み込み方法。
importは「ECMAScript」形式によるモジュールの読み込み方法。

こちらの内容はこの記事を参考にしました。記事では具体的にそれぞれの読み込みアプローチを実践しており、形式の有効化まで記載しています。

次回は具体的なミドルウェアのコードを記述していきます。

参考サイト