Node.jsのExpressとは？特徴や使い方、APIを作成する方法について解説

Node.jsのExpressとは、WebアプリケーションやAPIの開発を簡素化し効率化するための軽量フレームワークです。ExpressはNode.jsの基本機能の上に構築されており、簡潔なAPIを提供することで開発の迅速化を促します。

ミドルウェアやルーティングの機能を容易に追加できるモジュラー設計を採用しているため、開発者は必要に応じて機能を柔軟に拡張できます。これにより、小規模から大規模なWebアプリケーションまで、幅広いニーズに対応可能な開発が可能です。

本記事では、Node.jsのExpressの使い方や導入法について詳しく解説します。

Node.jsのExpressとは？

Node.jsのExpressとは、Webアプリ開発を効率化するための軽量で柔軟なフレームワークです。Express自体は特定のアーキテクチャパターンを強制しないため、MVC（Model-View-Controller）のような設計パターンの採用も、他のアプローチも開発者の判断次第といえます。

フレームワークの主な利点は、ミドルウェアの統合・ルーティングの簡素化・さまざまなテンプレートエンジンの使用を容易にすることです。これにより、開発者は必要な機能を自由に追加しカスタマイズして、効率的で迅速にアプリケーションの構築ができます。

Node.jsのExpressの主な使い方

Node.jsのExpressの主な使い方には、以下のようなものがあります。

• Node.jsをインストールしよう
• Expressを導入しよう
• Expressの基本コードを書こう
• Expressを実行しよう

ここからは、これらの主な使い方について解説します。

Node.jsをインストールしよう

まずは、公式サイトからNode.jsをインストールしましょう。

Node.jsをインストールすると、npm（Node Package Manager）というパッケージを管理するツールも、合わせてインストールされます。インストールが終わったら、コマンドプロンプトで「node –version」とコマンドを打ち実行した後、「npm –version」と打ち実行しましょう。両コマンドともアプリケーションのバージョンが表示されたら、正常にインストールされています。

最後に、「npm　init」とコマンドを打ち実行すると、パッケージの情報を保管するpackage.jsonが作成されます。

Expressを導入しよう

次に、Expressを導入します。npmを利用することで、パッケージをインストールできます。コマンドプロンプトで以下のコマンドを入力し、実行してください。

npm install express

「npm install」は、npmのコマンドの中でもとくに使用されるコマンドです。上記のコマンドを実行することで、Expressのパッケージをインストールまた、以下のようにアットマークと数字の記述を追加することで、バージョンを指定したインストールも可能です。

npm install [email protected]

Expressの基本コードを書こう

次に、Expressの基本的なコードを書きます。まず、「app.js」という名前の「JavaScript」ファイルを作成します。「.js」以外は任意の名前で問題ありません。

続いてapp.jsを開き、以下のコードを記述します。

const express = require('express');
const app = express();

上記のコードでは、requireメソッドを使ってExpressモジュールを読み込み、express()関数を実行してExpressアプリケーションのインスタンスを作成し、変数appに格納しています。これで、Node.js内でExpressが使えるようになります。

続いては、アプリケーションがリクエストを処理するためのルーティングの設定です。

app.get('/', (req, res)=>{
  res.send('Hello World!');
});

このルートハンドラは、ルートURL（/）へのGETリクエストに対して「Hello World!」という応答を送ります。

最後に、アプリケーションを特定のポートで通信を待ち受けるために、以下のコードを追加します。

app.listen(8080, () => {
  console.log('Server is running on port 8080');
});

これで、localhost:8080をブラウザで開くと、「Hello World!」と表示されるはずです。表示されることで、サーバーが正しく起動しているかを簡単に確認できます。

Expressを実行しよう

最後に、Expressを実行し画面に「Hello World!」を表示させましょう。編集しているapp.jsは保存して閉じ、コマンドプロンプトでapp.jsがあるディレクトリに移動し、「node app.js」とコマンドを入力し、実行します。

コマンドプロンプトの動きが止まったならapp.jsが実行されています。その状態で、ChromeやEdgeなどのブラウザを開き「http://localhost:8080」と入力しアクセスしてください。

画面に「Hello World!」と出力されれば、Expressの実行は成功です。

Node.jsのExpressをTypeScriptに対応させる方法

Node.jsのExpressを「TypeScript」で作成することも可能です。

• TypeScriptをインストールしよう
• TypeScript対応のサーバーを作る

ここからは、Node.jsのExpressを「TypeScript」で作成する流れを解説します。

TypeScriptをインストールしよう

Node.jsのExpressアプリケーションをTypeScriptで開発するには、新しいNodeプロジェクトの作成が必要です。プロジェクトディレクトリを作成した後、ディレクトリ内で次のコマンドを実行してNodeプロジェクトを初期化しましょう。

npm init -y

このコマンドは、package.jsonファイルを生成するものです。次に、TypeScriptと必要な型定義をインストールします。

npm install -D typescript @types/node

このコマンドは、開発依存関係としてTypeScriptをプロジェクトに追加し、Node.jsの型定義を提供するものです。そのためTypeScriptを使用してNode.js APIを安全に利用できるようになります。

次に、TypeScriptのコンパイルオプションを設定するため、のtsconfig.jsonファイルをプロジェクトのルートディレクトリに作成します。以下の内容をファイルに追加してください。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

これで、「TypeScript」のインストールと設定は完了です。

TypeScript対応のサーバーを作る

ここからは、TypeScript専用のサーバーを作成します。

プロジェクトのディレクトリ内に、index.tsというというファイルを作成し、以下の内容を入力してください。

import express from 'express';
const app: express.Application = express();
app.get("/", (req:express.Request, res:express.Response)=>{
    res.send('Hello World!');
});
const PORT = 8080;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

続いて、以下のコマンドを入力することでtsファイルをトランスパイルします。

npx tsc

これでindex.tsを元にindex.jsが作成されるので、以下のコマンドを入力し実行することでサーバーが立ち上がります。

node index.js

コマンドを実行したら、localhost:8080へアクセスし画面の表示を確認しましょう。

Node.jsのExpressのルーティングをしよう

Node.jsのExpressのルーティング手法には、以下のようなものがあります。

• GETリクエストの処理方法
• POSTリクエストの処理方法

ここからは、これらの処理方法について解説します。

GETリクエストの処理方法

Expressでは、get()メソッドはGETリクエストを処理するために使用されます。

例として、Webサイトのトップページが呼び出された際にメッセージを表示する場合、以下のように記述します。

app.get('/', (req, res)=>{
    res.send('ページが読み込まれました');
});

もしトップページにHTMLファイルを表示させたい場合は、express.staticミドルウェアを使って、’public’ディレクトリ内の静的ファイルを提供します。もしくは、 sendFileメソッドを使って直接ファイルの送信も可能です。

以下のコードは express.static ミドルウェアを使用しています。

app.use(express.static('public'));

このミドルウェアにより、’public’ディレクトリ内の’index.html’が、自動的にルートURL (‘/’) に対して提供されます。’public’ディレクトリ外のHTMLファイルを提供したい場合、sendFile メソッドを使用してファイルパスを指定します。

const path = require('path');

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
});

上記のpath.join()メソッドは、ファイルシステムのパス区切り文字の違いによる問題を避けるために、パスの結合に推奨される方法です。

POSTリクエストの処理方法

POSTリクエストは、ブラウザサイドからサーバーサイドへフォーム情報の送信する際などに使用されます。

POSTリクエストのデータを扱うには、Expressが提供する組み込みミドルウェアを使用し、以下のように記述することで送信されたデータを処理できます。

// URLエンコードされたデータの解析用
app.use(express.urlencoded({ extended: true }));

// JSONデータの解析用
app.use(express.json());

これにより、ExpressはPOSTリクエストのbodyから送信されたデータを適切に解析し、req.body を介してアクセスできるようにします。

POSTリクエストを処理するためのルートハンドラは次の通りです。

app.post('/', (req, res)=>{
	console.log(req.body);
	res.send('POSTリクエストを受け取りました');
});

このコードでは、クライアントからのPOSTリクエストのボディがreq.bodyに格納され、コンソールに出力されます。res.sendを使用してクライアントに応答を送ります。

Node.jsのExpressでのAPI作成方法

Node.jsのExpressでは、APIの作成も可能です。

• そもそもAPIとは？
• JSONを返すAPIを作ろう
• JSONを描画しよう

ここからは、上記3つについて解説します。

そもそもAPIとは？

APIとはApplication Programming Interfaceの略称で、ソフトウェアやプログラム・Webサービス同士をつなげるためのインターフェイスです。

インターフェイスとは接点・境界面のことを指す言葉で、USBやHDMIのようにハードウェア同士をつなぐためのものも、ハードウェアインターフェイスと呼ばれます。

APIの仕様用途は非常に幅広く、ログイン情報の認証からECショップ間の在庫情報同期・電子決済情報のやりとりなど、プログラム間の通信を可能にします。

JSONを返すAPIを作ろう

Node.jsのExpressでは、JSON形式のデータを返すAPIの作成も可能です。

// TypeScriptの場合の型定義を追加
import express, { Express, Request, Response } from 'express';

const app: Express = express();

app.use(express.json()); // JSONをパースするために必要

app.post('/api', (req: Request, res: Response) => {
  const requestData = req.body;
  // ここでリクエストデータに対する何らかの処理をおこなう
  res.json(requestData);
});

app.listen(8080, () => {
  console.log('Server is running on port 8080');
});

express.json()ミドルウェアを利用してリクエストボディのパースを有効にし、res.json()メソッドを使用してJSON形式でクライアントにレスポンスを返すことが可能です。この例ではPostmanやcurlなどを使い、http://localhost:8080/apiにJSONデータを送信すると、送信されたデータが処理された後、レスポンスとして返されます。

サーバーはポート8080でリッスンしており、起動時にはコンソールにその旨が表示されます。

JSONを描画しよう

APIは、リクエストを受け取り・テキスト・JSON・XMLなどの形式でレスポンスを返す役割を持ちます。これらのレスポンスを用いて、フロントエンドでは異なる手法でUIを描画する必要があるのです。

たとえば、Node.jsのExpressアプリケーションでHTMLを生成するために、EJSというテンプレートエンジンを使う方法があります。また、ReactやVueのようなフロントエンドフレームワークと組み合わせて、より動的なUIの構築も可能です。

Node.jsのExpressを使用することで、多様なツールやライブラリを組み合わせて、柔軟にAPIベースのUI描画に対応する開発がおこなえます。ExpressでAPIを作成し、それを活用してJSONデータベースのUI描画に挑戦してみましょう。

Node.jsのExpressでさまざまなAPIを作成しよう

Node.jsのExpressは、Webアプリ開発を容易にするための軽量なフレームワークで、多くのサードパーティのミドルウェアと組み合わせて使用できます。Express自体には基本的な機能のみが含まれていますが、MVCパターンなどのアーキテクチャに従ったアプリケーション開発をサポートするために、多くのモジュールが統合可能です。

TypeScriptの型定義ファイルを利用することで、ExpressアプリケーションをTypeScriptで開発もできるため、より安全で保守しやすいコードベースの構築ができるようになります。

本記事を参考にNode.jsのExpressを使い、さまざまなAPIを作成してみてください。