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

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


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


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

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

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

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

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

今回のミドルウェアを利用するにあたってミドルウェア関数を利用します。ミドルウェア関数を実行することで以下のように処理をすることができる。こちらの記事を参考にしました。
>- 任意のコードを実行する。
>- リクエストオブジェクトとレスポンスオブジェクトを変更する。
>- リクエストレスポンスサイクルを終了する。
>- スタック内の次のミドルウェア関数を呼び出す。

## 実装
[こちらの記事](https://expressjs.com/ja/guide/using-middleware.html)を参考にアプリケーションレベルのミドルウェアを一つ設定した場合と複数設定した場合の実装を行なってみる。まずはミドルウェア一つ設定した場合の処理を行う。最初に簡単なプロジェクトの作成から始め、任意の階層にプロジェクトフォルダを作成する。
```bash
mkdir node-tutorial-app
```


cdコマンドを利用して移動してください。そして該当のプロジェクトの階層に選択して、enterキーで移動してください。基本的なlinuxについては[こちらの記事](https://qiita.com/nokonoko_1203/items/35c4078bf72cffb16171)を参考にしてください。フォルダ作成のmkdirコマンドの他にlsコマンドなどのディレクトリの一覧を表示するlsなど一覧で読むことができます。
```bash
cd node-tutorial-app
```


codeコマンド利用してプロジェクトを立ち上げてください。エディタはvscodeを用いています。
codeコマンドについては[こちらの記事](https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c)を参考にしてください。設定の仕方やプロジェクトの立ち上げ方について解説しています。
```bash
code .
```

プロジェクトを立ち上げましたらpackage.jsonの初期化を行います。vscodにてMacの方は⌘+ J(ctrl + J)でターミナルを開き、以下コマンドを実行し初期化を行なってください。なぜnpm initをして初期化をするのかの理由か[こちらの記事](https://ferret-plus.com/6104#:~:text=1.%20npm%20init,%E3%81%A8%E3%81%84%E3%81%86%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E4%BD%BF%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)を参考にしました。
>*「npm init」とは、簡潔にいえば「このディレクトリをnpmの管理下に置く」*という命令です。

以上の理由によりこのコマンドを実行するみたいです。
```bash
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をインストールするので、以下のコマンドをターミナル上で実行してください。[こちらの記事](https://expressjs.com/ja/starter/installing.html)を参考にしています。公式サイトにあるインストールの仕方です。
```bash
npm i express
```

さらにnodemonというソースを監視して、自動でサーバー再起動を行なってくれるツールをインストールします。nodemonの特徴などについては[こちらの記事](https://qiita.com/mitsuhiro_K/items/429ca479b4e191bfea4d)を参考にしてください。
```bash
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フィールド内のタスクを実行については[こちらの記事](https://ics.media/entry/12226/)を参考にしてください。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`とコマンドを打ち込みサーバーを起動すると以下のように表示されると思います。
```bash
[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」](https://nodejs.org/api/modules.html)形式によるモジュールの読み込み方法。
>importは[「ECMAScript」](https://nodejs.org/api/esm.html)形式によるモジュールの読み込み方法。

こちらの内容は[この記事](https://qiita.com/TakeshiNickOsanai/items/7899a60044d71aa8d899)を参考にしました。記事では具体的にそれぞれの読み込みアプローチを実践しており、形式の有効化まで記載しています。


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

https://nodejs.org/ja/

https://www.kagoya.jp/howto/it-glossary/develop/nodejs/

https://expressjs.com/ja/guide/using-middleware.html

https://qiita.com/nokonoko_1203/items/35c4078bf72cffb16171

https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c

https://expressjs.com/ja/starter/installing.html

https://ics.media/entry/12226/

https://qiita.com/TakeshiNickOsanai/items/7899a60044d71aa8d899

https://qiita.com/aki3061/items/d05ca6cba19e308e0778

https://zenn.dev/atata/articles/22645ad549972b