9. HTTPサーバー

Node.jsのhttpモジュールを使って、HTTPサーバーの基本的な仕組みを理解します。

この章で学べること

  • HTTPリクエストとレスポンスの基本概念を理解する
  • Node.jsのhttpモジュールを使って基本的なサーバーを作成する
  • URLルーティングの基本を理解する
  • HTTPメソッド(GET、POST)の違いを理解する

HTTPとは

HTTP(HyperText Transfer Protocol)は、WebブラウザとWebサーバーが通信するためのプロトコル(通信規約)です。インターネットはこのHTTPプロトコルを使って通信を行なっています。

サーバーとクライアント

HTTP通信では、サーバークライアントという2つの役割があります。

サーバー(Server)

サーバーは、クライアントからのリクエストを受け取り、適切なレスポンスを返すプログラムです。

  • 役割: データを提供する側
  • 動作: 常に起動していて、リクエストを待機している
  • : Webサーバー

クライアント(Client)

クライアントは、サーバーにリクエストを送信し、レスポンスを受け取るプログラムです。

  • 役割: データを要求する側
  • 動作: ユーザーの操作(ページを開く、ボタンをクリックするなど)に応じてリクエストを送信
  • : Webブラウザ(Chrome、Firefox、Safariなど)、モバイルアプリ

リクエストとレスポンス

HTTPの通信は、リクエスト(要求)とレスポンス(応答)の2つの流れで成り立っています。

クライアント(ブラウザ)         サーバー
     │                           │
     │                           │
     │  リクエストを送信           │
     ├──────────────────────────>│
     │                           │
     │                           │
     │  レスポンスを受信           │
     │<─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤
     │                           │
  1. リクエスト: クライアントがサーバーに「このページをください」と要求
  2. レスポンス: サーバーが「はい、どうぞ」とデータを返す

HTTPメソッド

HTTPメソッドは、リクエストの種類を表します。主なメソッドは以下の通りです。

  • GET: データを取得する
  • POST: データを送信する
  • PUT: データを更新する
  • DELETE: データを削除する

プロジェクトを作成しよう

実際にHTTPサーバーを作成して、HTTPで通信を行なってみましょう。まずは、プロジェクトのディレクトリを作成します。 node-http-server という名前で作成します。

mkdir node-http-server
cd node-http-server

次にnpm initコマンドを実行します。

npm init -y

次のコマンドで package.jsonにmoduleモードの設定を追加します。

npm pkg set type=module

基本的なHTTPサーバーを作成

Node.jsのhttpモジュールを使って、シンプルなHTTPサーバーを作成してみましょう。

server.jsというファイルを作成して、次のコードを記入してください。

import http from 'http';

// HTTPサーバーを作成
const server = http.createServer((req, res) => {
  // レスポンスヘッダーを設定
  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
  
  // レスポンスボディを送信
  res.end('Hello, World!');
});

// ポート3000でサーバーを起動
server.listen(3000, () => {
  console.log('サーバーが起動しました: http://localhost:3000');
});

コードの説明

  1. http.createServer(): HTTPサーバーを作成する関数
  2. (req, res) => {...}: リクエストが来たときに実行されるコールバック関数
    • req: リクエストオブジェクト(クライアントからの情報)
    • res: レスポンスオブジェクト(サーバーからの応答)
  3. res.writeHead(): レスポンスヘッダーを設定(ステータスコード200、Content-Typeなど)
  4. res.end(): レスポンスボディを送信して、レスポンスを終了
  5. server.listen(): サーバーを指定したポートで起動

用語の説明

上記のコードをより深く理解するためには用語の意味を理解する必要があります。ここでは、上記のコードで使われている用語の意味を説明します。

レスポンスヘッダー

レスポンスヘッダーは、HTTPレスポンスのメタデータ(付加情報)を格納する部分です。サーバーがクライアントに返すデータの種類や状態を伝えるために使用されます。

主なヘッダーには以下のようなものがあります。

  • Content-Type: レスポンスボディのデータ形式を指定(例: text/plaintext/htmlimage/jpeg
  • Status Code: レスポンスの状態を示すコード(200: 成功、404: 見つからない、500: サーバーエラーなど)

コード内の res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }) では、ステータスコード200(成功)と、テキスト形式でUTF-8エンコーディングを使用することを指定しています。

レスポンスボディ

レスポンスボディは、HTTPレスポンスの実際のデータ部分です。サーバーがクライアントに送信したい内容(HTML、テキスト、画像など)が含まれます。

コード内の res.end('Hello, World!') では、'Hello, World!' という文字列がレスポンスボディとして送信されます。ブラウザで表示される内容は、このレスポンスボディです。

ポート

ポートは、コンピュータ上で実行されている複数のプログラムやサービスを区別するための番号です。HTTPサーバーは、特定のポート番号でリッスン(待機)することで、クライアントからのリクエストを受け取ります。

  • ポート番号の範囲: 0から65535まで
  • よく使われるポート:
    • 80: HTTP(通常のWebサイト)
    • 443: HTTPS(暗号化されたWebサイト)
    • 3000: 開発用のサーバーでよく使われる
  • localhost:3000: 自分のコンピュータ(localhost)の3000番ポートでサーバーが起動していることを意味します

コード内の server.listen(3000, ...) では、サーバーをポート3000で起動し、http://localhost:3000 でアクセスできるようにしています。

サーバーを起動

次のコマンドでサーバーを起動します。

node server.js

ブラウザで http://localhost:3000 にアクセスすると、「Hello, World!」と表示されます。

サーバーを停止

サーバーを停止するには、ターミナルで Ctrl + C を押します。

リクエスト情報を取得する

リクエストオブジェクト(req)から、クライアントが送信した情報を取得できます。

request-info.jsを作成して、リクエスト情報を表示してみましょう。

import http from 'http';

const server = http.createServer((req, res) => {
  // リクエスト情報を表示
  console.log('リクエストURL:', req.url);
  console.log('リクエストメソッド:', req.method);
  console.log('リクエストヘッダー:', req.headers);

  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
  res.end(`リクエストURL: ${req.url}\nリクエストメソッド: ${req.method}`);
});

server.listen(3000, () => {
  console.log('サーバーが起動しました: http://localhost:3000');
});

次のコマンドでサーバーを起動します。

node request-info.js

サーバーを起動したら、ブラウザで http://localhost:3000/test にアクセスすると、ターミナルにリクエスト情報が表示されます。

結果

リクエストURL: /test
リクエストメソッド: GET
リクエストヘッダー: {
  host: 'localhost:3000',
  connection: 'keep-alive',
  ...
}

確認ができたら、Ctrl + C でサーバーを停止してください。

注意点

同じポートで起動できるプログラムは1つです。3000番ポートですでにサーバーが起動している場合はエラーになります。その場合は、起動しているサーバーを停止してから request-info.jsを実行してください。

ルーティング

ルーティングとは、URLとHTTPメソッドに応じて、適切な処理を実行する機能です。URLによって異なるレスポンスを返すように、ルーティングを実装してみましょう。

routing.jsを作成します。

import http from 'http';

const server = http.createServer((req, res) => {
  // URLに応じてレスポンスを変更
  if (req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end('ホームページ');
  } else if (req.url === '/about') {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end('このサイトについて');
  } else if (req.url === '/contact') {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end('お問い合わせ');
  } else {
    // 404 Not Found
    res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end('ページが見つかりません');
  }
});

server.listen(3000, () => {
  console.log('サーバーが起動しました: http://localhost:3000');
});

動作確認

次のコマンドでサーバーを起動します。

node routing.js

サーバーを起動したら、以下のURLにアクセスしてみましょう。

  • http://localhost:3000/ → 「ホームページ」
  • http://localhost:3000/about → 「このサイトについて」
  • http://localhost:3000/contact → 「お問い合わせ」
  • http://localhost:3000/unknown → 「ページが見つかりません」(404エラー)

演習問題

以下のクイズで、HTTPサーバーの理解を確認しましょう。

問題1: HTTPサーバーとクライアントの関係

HTTP通信において、データを要求する側の役割はどれですか?

問題2: HTTPメソッド

Webページを表示する際に使用されるHTTPメソッドはどれですか?

問題3: レスポンスヘッダー

HTML形式のデータを返す際に、Content-Typeヘッダーに指定すべき値はどれですか?

問題4: ポート番号

ポート番号とは何ですか?

問題5: ステータスコード

存在しないページにアクセスした際に返されるHTTPステータスコードはどれですか?

問題6: ルーティング

URLに応じて異なるレスポンスを返す処理を何と呼びますか?

まとめ

この章では、Node.jsのhttpモジュールを使って、HTTPサーバーの基本的な仕組みを学びました。

学んだこと

  • HTTPリクエストとレスポンスの基本概念
  • http.createServer()でサーバーを作成する方法
  • URLルーティングの実装方法

次のステップ

次の章では、Express.jsというフレームワークを使って、より実用的なサーバーを作成する方法を学びます。

次回予告

次はExpress.jsコースで、より実用的なWebサーバーやAPIを作成する方法を学びます。