Node.jsのフレームワークExpressで簡単なAPIをサクッと作成する手順をメモしました。

Express（エクスプレス）

Express とは？

Express とは、オープンソースで提供されている Node.js アプリケーション向けのWeb フレームワークです。
Webアプリを作る上で必要なリーティング、ビューヘルパーセッション管理の機能などがミドルウェアとしてデフォルトで提供されています。

Expressで提供されているミドルウェア

Expressでは様々なミドルウェアが提供されています。

body-parser

HTTPリクエストの本文を解析します。参照：body、co-body、およびraw-body。

compression

HTTP応答を圧縮します。

connect-rid

一意のリクエストIDを生成します。

cookie-parser

Cookieヘッダーを解析し、データを入力しreq.cookiesます。Cookieとキーグリップも参照してください。

cookie-session

Cookieベースのセッションを確立します。

cors

さまざまなオプションを使用して、クロスオリジンリソースシェアリング（CORS）を有効にします。

csurf

CSRFエクスプロイトから保護します。

errorhandler

開発エラー処理/デバッグ。

method-override

ヘッダーを使用してHTTPメソッドをオーバーライドします。

morgan

HTTPリクエストロガー。

multer

マルチパートフォームデータを処理します。

response-time

HTTP応答時間を記録します。

serve-favicon

ファビコンを提供します。

serve-index

指定されたパスのディレクトリリストを提供します。

serve-static

静的ファイルを提供します。

session

サーバーベースのセッションを確立します（開発のみ）。

timeout

HTTPリクエスト処理のタイムアウト期間を設定します。

vhost

仮想ドメインを作成します。

Express のミドルウェア モバイル・アプリケーション向けの一連の堅固な機能を提供されています。

公式サイト

Express - Node.js Web アプリケーション・フレームワーク

やること

• Expressサンプルプロジェクトの作成
• 必要なパッケージのインストール
• 設定ファイルを作成
• APIの作成
• Expressアプリケーションを起動
• Expressアプリの動作テスト

環境

• Mac OS Big SUR 11.3.1
• yarn 1.22.10
• Node 14.15.3
• express 4.17.1

事前準備

Node.js 環境が必要

事前準備として Node.js が利用できる環境で実施します。
Node.js の環境の構築について詳しくはこちらの記事を参考にしてください。

yarn コマンドのインストール

事前準備として Yarn が利用できる環境で実施します。
Yarn コマンドのインストールについて詳しくはこちらの記事を参考にしてください。

TypeScript環境で実施

事前準備として TypeScript が利用できる環境で実施します。
TypeScript の実行環境の構築について詳しくはこちらの記事を参考にしてください。

Expressサンプルプロジェクトの作成

プロジェクトディレクトリを作成

~/express-sampleというプロジェクトディレクトリを作成します。

zshCopy code$ cd ~/express-sample

プロジェクトディレクトリへ移動

作成した~/express-sample ディレクトリへ移動します。

zshCopy code$ mkdir ~/express-sample

yarn を初期化をして package.json を作成

yarn でプロジェクトの初期化を行います。
npm で実施する方は必要に応じて変更してください。

zshCopy code$ yarn init -y
yarn init v1.22.10
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.08s.

必要なパッケージのインストール

必要なパッケージ

experssとTypeScriptのパッケージをインストールします。

• express
• @types/express
• typescript
• @types/node
• ts-node

パッケージのインストール

yarn addコマンドで必要パッケージをインストールします。

zshCopy code$ yarn add express

開発に関連するパッケージのため -Dオプションを付与しています。

zshCopy code$ yarn add -D @types/express typescript @types/node ts-node

インストールしたパッケージを確認

package.json を開きインストールされたパッケージを確認します。

jsonCopy code  "devDependencies": {
    "@types/express": "^4.17.12",
    "@types/node": "^15.12.5",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.4"
  },
  "dependencies": {
    "express": "^4.17.1"
  }

設定ファイルを作成

tsconfig.json を作成

プロジェクトルートへ tsconfig.json を作成します。

zshCopy code$ vi tsconfig.json

tsconfig.json の設定例

jsonCopy code// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "lib": [
      "es2020"
    ],
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "src",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
  "compileOnSave": false
}

ts-config のオプションはこちらの記事を参考にしてください

APIの作成

ソースディレクトリの作成

プロジェクトルートへsrcディレクトリを作成します。

zshCopy code$ mkdir src

アプリケーションのファイルを作成

作成したソースディレクトリへ index.ts を追加します。

zshCopy code$ vi src/index.ts

expressをインポート

import文でexpressをインポートします。

typescriptCopy code// src/index.ts
import express from 'express';

expressの初期化

importしたexpressを呼び出してexpressを初期化します。

typescriptCopy code// src/index.ts
const app = express();

jsonを利用するための設定

expressでjsonを利用できるようにするための設定をおこないます。

typescriptCopy code// src/index.ts
app.use(express.json());

エンドポイントの作成

/api/sampleのエンドポイントを作成します。

get

getメソッドでリクエストがあった場合の処理になります。
クエリーパラーメータがあった場合logで記述しているreq.queryで受け取ることができます。
必要に応じてここで処理をおこないます。
res.jsonへオブジェクトを渡すとjson形式でレスポンスを返せます。

typescriptCopy codeapp.get(
  '/api/sample',
  (req: express.Request, res: express.Response): void => {
    // パラメーターを取得
    console.log(req.query);
    res.json({
      message: 'Hello, world! GET',
    });
  }
);

post

postメソッドでリクエストがあった場合の処理になります。
ボディーデータがあった場合logで記述しているreq.bodyで受け取ることができます。
必要に応じてここで処理をおこないます。
res.jsonへオブジェクトを渡すとjson形式でレスポンスを返せます。

typescriptCopy codeapp.post(
  '/api/sample',
  (req: express.Request, res: express.Response): void => {
    // リクエストボディーを取得
    console.log(req.body);
    res.json({
      message: 'Hello, world! POST',
    });
  }
);

その他

その他のリクエストの処理になります。

ステータスコードを404に指定してレスポンスを返してます。

typescriptCopy codeapp.all('*', (_req: express.Request, res: express.Response): void => {
  res.status(404).json({});
});

サーバー起動時の待ち受けの設定

サーバー起動時に8080ポートで待ち受ける設定になります。

typescriptCopy codeapp.listen(8080, () => {
  console.log(`listening on *:${8080}`);
});

src/index.ts全体

上記の設定含めた全体のソースコードになります。

typescriptCopy code// src/index.ts
import express from 'express';

const app = express();
app.use(express.json());

app.get(
  '/api/sample',
  (req: express.Request, res: express.Response): void => {
    // パラメーターを取得
    console.log(req.query);
    res.json({
      message: 'Hello, world! GET',
    });
  }
);

app.post(
  '/api/sample',
  (req: express.Request, res: express.Response): void => {
    // リクエストボディーを取得
    console.log(req.body);
    res.json({
      message: 'Hello, world! POST',
    });
  }
);

app.all(
  '*',
  (_req: express.Request, res: express.Response): void => {
    res.status(404).json({});
  }
);

app.listen(8080, () => {
  console.log(`listening on *:${8080}`);
});

Expressアプリケーションを起動

アプリケーションを起動させていきます。

npm scripts へ起動コマンドの追加

実行するコマンドを追記します。

package.json

jsonCopy code// package.json
  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc",
    "dev": "ts-node src/index.ts"
  },

devでアプリサーバーを起動

yarn devコマンドを実行します。

zshCopy code$  yarn dev
yarn run v1.22.10
$ ts-node src/index.ts
listening on *:8080

8080で待ち受ける形でアプリケーションが起動しました。

Expressアプリの動作テスト

起動させたアプリケーションへリクエストを実施してみます。

getでリクエスト

ローカルホストの指定したポートでアクセスできます。
http://localhost:8080/

api/sampleへリクエスト

curlコマンドで/api/sapmleへリクエストします。

zshCopy code$ curl http://localhost:8080/api/sample
{"message":"Hello, world!"}%             

指定したメッセージが正しく返ってきています。

パラメーターの指定

クエリーパラメータを付与してリクエスト

zshCopy code$ curl "http://localhost:8080/api/sample?hoge=111"
{"message":"Hello, world! GET"}%            

ログを確認

実行ログをみてみると正しくコンソールログで受け取ったパラメータが表示されています。

logCopy code{ hoge: '111' }

postでリクエスト

api/sampleへリクエスト

curlコマンドで/api/sapmleへリクエストします。

zshCopy code$ curl -X POST  http://localhost:8080/api/sample 
{"message":"Hello, world!"}%  

指定したメッセージが正しく返ってきています。

パラメーターの指定

クエリーパラメータを付与してリクエスト

zshCopy code$ curl -X POST -H "Content-Type: application/json" -d '{"hoge":"222"}' http://localhost:8080/api/sample
{"message":"Hello, world! POST"}% 

ログを確認

実行ログをみてみると正しくコンソールログで受け取ったパラメータが表示されています。

consoleCopy code{ hoge: '222' }

GET、POSTリクエストがそれぞれ正しく動いていること確認することができました。