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

TypeScriptNode.jsexpressインストール
Node.jsのフレームワークExpressで簡単なAPIをサクッと作成する手順
Memo

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

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

公式サイト

やること

環境

  • 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というプロジェクトディレクトリを作成します。

terminal
$ cd ~/express-sample

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

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

terminal
$ mkdir ~/express-sample

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

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

terminal
$ 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コマンドで必要パッケージをインストールします。

terminal
$ yarn add express

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

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

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

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

  "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 を作成します。

terminal
$ vi tsconfig.json

tsconfig.json の設定例

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ディレクトリを作成します。

terminal
$ mkdir src

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

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

terminal
$ vi src/index.ts

expressをインポート

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

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

expressの初期化

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

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

jsonを利用するための設定

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

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

エンドポイントの作成

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

get

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

app.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形式でレスポンスを返せます。

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

その他

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

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

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

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

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

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

src/index.ts全体

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

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

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

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

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

terminal
$ 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へリクエストします。

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

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

パラメーターの指定

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

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

ログを確認

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

log
{ hoge: '111' }

postでリクエスト

api/sampleへリクエスト

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

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

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

パラメーターの指定

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

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

ログを確認

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

log
{ hoge: '222' }

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

終わりに

最後までご覧いただきありがとうございます。
この記事ではNode.jsのフレームワークExpressで簡単なAPIをサクッと作成する手順について紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。