【Node.js】ExpressでWebサーバーを構築する方法

この記事では『Node.jsで使える人気フレームワークExpress（エクスプレス）』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

Expressとはどのようなフレームワークか
Expressを使ってWebサーバーを構築する方法
フロントエンドからExpressのAPIを呼び出す方法

Expressとは？

Express（エクスプレス）は、Node.jsでWebサーバーやAPIを構築できるフレームワークです。

Expressの特徴

HTTPリクエスト・レスポンスの処理が簡単に書ける。
ルーティングやミドルウェアの記述がシンプル。
Node.jsの標準モジュールhttpよりも高機能かつ使いやすい。

ただし、ExpressはNode.jsに標準で含まれているわけではないため、使用するにはnpm installで追加インストールが必要です。

ExpressでWebサーバーを構築する方法

ではこれから、Expressモジュールを使って、Webサーバーを構築してみましょう。手順を以下に示します。

Webサーバーを構築する手順

Expressをインストールする
サーバーコードを書く
構築したWebサーバーを起動する

今回以下のディレクトリ構造としています。ディレクトリ名(expressTest)やファイル名(server.js)はなんでもOKです。デスクトップ上など任意の場所にフォルダを作成しましょう。

ディレクトリ構成

expressTest
└─server.js  // ExpressでWebサーバーを構築するコードを記述

Expressをインストールする

まず、npmを使ってExpressをインストールします。以下のコマンドを実行してください。

npm init -y
npm install express --save

サーバーコードを書く

以下に、Expressを使ってWebサーバーを構築したサンプルコードを示します。Expressの基本的な使い方は下記の通りです。

Expressモジュールを読み込んでインスタンス化する。
ポート番号を指定してWebサーバーを待機させる。
アプリケーションの処理を記述する。

これを踏まえてサーバーコードを記述します。今回ファイル名はserver.jsとしています。

// 1. Expressモジュールを読み込んでインスタンス化してappに代入
const express = require('express');
const app = express();

// 2. listen()メソッドを実行して3000番ポートで待機
const port = 3000;
app.listen(port, () => {
  console.log(`サーバー起動中: http://localhost:${port}`);
});

// 3. 以下アプリケーションの処理を記述する

// ルートパス "/" にGETリクエストが来たときの処理
app.get('/', (req, res) => {
  res.send('<h1>Hello, World!</h1>');
});

// "/api/message" にGETリクエストが来たときの処理
app.get('/api/message', (req, res) => {
  res.json({ message: 'こんにちは、クライアントさん！' });
});

アプリケーションの処理を記述する部分の解説

アプリケーションの処理を記述する部分についてもう少し詳しく説明します。

appオブジェクトのgetメソッドは、指定したパス（URL）にGETリクエストが送られてきたときの処理を定義するためのメソッドです。書き方は以下のようになっています。

app.get(パス, (リクエスト, レスポンス) => {
  // リクエストが来たときに実行する処理
});

今回は以下のアプリケーションの処理を記述しています。

ルートパス "/"の処理

// ルートパス "/" にGETリクエストが来たときの処理
app.get('/', (req, res) => {
  res.send('<h1>Hello, World!</h1>');
});

これは「ブラウザでhttp://localhost:3000/にアクセスされたときに、<h1>Hello, World!</h1>というHTMLを返す」という意味です。res.send()は、文字列やHTML、バッファなどをレスポンスとして送信するためのメソッドです。ここでは、HTMLを直接書いてブラウザに送信しています。

"/api/message"の処理

// "/api/message" にGETリクエストが来たときの処理
app.get('/api/message', (req, res) => {
  res.json({ message: 'こんにちは、クライアントさん！' });
});

これは、http://localhost:3000/api/messageにアクセスすると、以下のようなJSONデータが返しています。

{
  "message": "こんにちは、クライアントさん！"
}

res.json()は、JavaScriptのオブジェクトをJSON形式に変換してレスポンスとして送信するためのメソッドです。主にAPIで使われる形式で、最近のWebアプリやモバイルアプリではサーバーとクライアントのデータのやりとりにJSONがよく使われます。

resオブジェクトとは？

resは「レスポンス（応答）に関する機能がまとまったオブジェクト」です。クライアントからのリクエストに対して、どのようなデータを返すのかをこのresオブジェクトを使って操作します。今回紹介したres.send()やres.json()の他にも、以下のような便利なメソッドがあります。

メソッド名	説明
`res.send()`	テキスト、HTML、バッファなどを送信
`res.json()`	JSONデータを送信
`res.status()`	ステータスコードを設定（例：404や500など）
`res.redirect()`	他のURLにリダイレクトさせる
`res.render()`	テンプレートエンジンを使ってHTMLを表示する（ejsなど）

さらに詳しく知りたい方へ

resオブジェクトの詳細な使い方や、提供されている全てのメソッドについては、以下の Express の公式ドキュメントで確認できます：

📘 Express公式ドキュメント（resオブジェクト）

構築したWebサーバーを起動する

これでサーバーを起動する準備が完了しました。server.jsが格納されているexpressTestディレクトリにコンソールで移動し、以下のコマンドを実行すると、サーバーを起動させることができます。

node server.js

構築したWebサーバーにHTTPリクエストを送るためのURLは以下のようになっています。

http://localhost:3000/

Chrome等のWebブラウザの画面上部のアドレスバーに「http://localhost:3000/」を入力し、enterを押すと、以下の画面が表示されます。

これは「http://localhost:3000/」を入力してenterを押すと、構築したWebサーバーにHTTPリクエストが送られているからです。WebサーバーはHTTPレスポンスとして、「Hello, World!」を画面に表示するためのHTMLファイルを返しているため、画面上には「Hello, World!」が表示されています。

Webサーバーを停止するには、コンソールでctrl+cを押します。

ExpressのAPIをJavaScriptから呼び出す

ここでは「ボタンを押すとAPIを叩いて、返ってきたメッセージを画面に表示する」例を紹介します。今回以下のディレクトリ構造としています。

ディレクトリ構成

expressTest/
├── server.js
└── public/
    ├── index.html
    └── script.js

サーバーコード

// 1. Expressモジュールを読み込んでインスタンス化してappに代入
const express = require('express');
const app = express();

// 2. listen()メソッドを実行して3000番ポートで待機
const port = 3000;
app.listen(port, () => {
  console.log(`サーバー起動中: http://localhost:${port}`);
});

// 3. 以下アプリケーションの処理を記述する
// "/api/message" にGETリクエストが来たときの処理
app.get('/api/message', (req, res) => {
  res.json({ message: 'こんにちは、クライアントさん！' });
});

// 4. publicフォルダを静的ファイルのルートに設定
app.use(express.static('public'));

app.use(express.static('public'));により、public/フォルダの中にあるファイル（例: index.html, script.js）が自動的にhttp://localhost:3000/で公開されます。

public/index.html → http://localhost:3000/index.html
public/script.js → http://localhost:3000/script.js

フロントエンドのHTML（public/index.html）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Express API Test</title>
  </head>
  <body>
    <h1>Express API テスト</h1>
    <button id="fetchBtn">APIを呼び出す</button>
    <p id="result">← ここに結果が表示されます</p>

    <script src="script.js"></script>
  </body>
</html>

フロントエンドのJavaScript（public/script.js）

document.getElementById('fetchBtn').addEventListener('click', () => {
  fetch('/api/message')
    .then((response) => {
      if (!response.ok) {
        throw new Error('APIエラー');
      }
      return response.json();
    })
    .then((data) => {
      document.getElementById('result').textContent = data.message;
    })
    .catch((error) => {
      console.error('エラー:', error);
      document.getElementById('result').textContent = 'エラーが発生しました';
    });
});

動作確認手順

node server.jsでサーバーを起動します。
ブラウザでhttp://localhost:3000にアクセスします。
ボタンをクリックすると/api/messageにGETリクエストが送られ、レスポンスのメッセージが画面に表示されます。

本記事のまとめ

この記事では、Node.jsでExpressを使ってWebサーバーを構築する方法を解説しました。

Expressとはどのようなフレームワークか
Expressを使ってWebサーバーを構築する方法
フロントエンドからExpressのAPIを呼び出す方法

お読み頂きありがとうございました。