Kodokon kodokon.com

はじめてのネイティブHTTPサーバー

Nodeのhttpモジュールでウェブサーバーを作り、リクエストに応答し、JSONを返しましょう。

10 分 · 3 問

このレッスンを Kodokon で開く

ウェブサーバーとは、絶えず動き続けてリクエストを待つプログラムです。リクエストとは、クライアント(ブラウザ、モバイルアプリなど)から送られる要求のことです。リクエストごとに、サーバーはレスポンスを返します。このやり取りはHTTPプロトコル、つまりウェブの共通言語に従います。Nodeにはすぐ使えるhttpモジュールが含まれています。インストールするものは何もありません。最後の概念です。ポート、つまりマシン上の特定のプログラムを識別する番号で、建物の部屋番号のようなものです。私たちはポート3000を使います。localhostはというと、これは単にあなた自身のマシンを指します。

JAVASCRIPT
import http from "node:http";

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello from my server!");
});

server.listen(3000, () => {
  console.log("Server at http://localhost:3000");
});
このコードをserver.jsに保存して、node server.jsを実行しましょう。

分解してみましょう。http.createServerは、リクエストごとに呼ばれる関数を受け取ります。二つのパラメーターがあります。req(届いたリクエスト)とres(組み立て中のレスポンス)です。res.statusCode = 200ステータスコードを設定します。200は"すべて問題なし"を意味します。res.setHeaderヘッダー、つまりレスポンスについてのメタデータを一つ追加します。ここではその形式、プレーンテキストです。res.endはレスポンスを送って閉じます。最後に、server.listen(3000)はサーバーをポート3000で待ち受けさせます。ブラウザでhttp://localhost:3000を開きましょう。あなたのテキストが表示されます。プログラムが制御を返さないことに注目してください。リクエストを待っているのです。Ctrl+Cで止めましょう。

モダンなサーバーがプレーンテキストを返すことはめったにありません。JSONで応答するAPIを公開します。JSONはあなたがすでに知っている、あらゆる言語が理解するあのテキスト形式です。二つの調整をします。Content-Typeヘッダーがapplication/jsonになり、JavaScriptオブジェクトはJSON.stringifyでテキストに変換されます。この機会に、クライアントが要求したパスであるreq.urlに応じて違う反応をしてみましょう。これがルーティングの基本です。

JAVASCRIPT
import http from "node:http";

const server = http.createServer((req, res) => {
  res.setHeader("Content-Type", "application/json");

  if (req.url === "/api/message") {
    const body = { message: "Hello!", ok: true };
    res.statusCode = 200;
    res.end(JSON.stringify(body));
    return;
  }

  res.statusCode = 404;
  res.end(JSON.stringify({ error: "Not found" }));
});

server.listen(3000, () => {
  console.log("http://localhost:3000/api/message");
});
既知のルートはJSONオブジェクトとともに200で応答します。それ以外のパスは404を受け取ります。

404ステータスコードは"見つからない"を意味します。要求されたパスがどの既知のルートにも一致しません。最初のレスポンスのあとのreturnに注目してください。これは、コードが続いて二つ目のレスポンスを送るのを止めます。二つ目を送るとエラーになるからです。テストするには、ブラウザでアドレスを開くか、curlを使いましょう。HTTPリクエストを送ってレスポンスをターミナルに表示するコマンドラインツールです。

BASH
curl http://localhost:3000/api/message
サーバーが動いている間に、二つ目のターミナルで。JSONレスポンスが表示されます。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

  1. server.listen(3000)は何をしますか?
    • サーバーをポート3000でリクエストの待ち受けにする
    • ポート3000にリクエストを送る
    • サーバーを同時3000リクエストに制限する
    • ブラウザをlocalhost:3000で開く
  2. レスポンスがJSONであることを示すために送るヘッダーはどれですか?
    • Accept: application/json
    • Content-Type: application/json
    • Format: json
  3. res.endの前にオブジェクトをJSON.stringifyに通すのはなぜですか?
    • レスポンスを圧縮して時間を節約するため
    • オブジェクトにエラーが含まれていないか確認するため
    • HTTPレスポンスはJavaScriptオブジェクトではなくテキストを運ぶから