Express で小さなサーバー

Node.js と Express で自分のサーバーを構築。最初の API が最初のリクエストに答える。

見てみよう：サーバーのセットアップ

Express は Node.js でサーバーを作る最も人気のパッケージ——数行にまとめる。サーバーは React アプリとは 別プロジェクト（フロントエンドとバックエンドは2つの半分）。ターミナルで：

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

mkdir でフォルダ作成（make directory）、
npm init -y で新 Node.js プロジェクト（package.json 作成）、
npm install express で Express ダウンロード。

VS Code でフォルダを開き server.js を作成：

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

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

実行：

node server.js

ブラウザで http://localhost:3900/api/hello を開く。JSON レスポンスが見える？ サーバーを作った。 魔法じゃない——10行。

コードで起きてること：

require("express") – パッケージを借りる（import のサーバー側版）。
app.get("/api/hello", ...) – 「このアドレスへの GET に応答。」アドレス + 応答のペアが エンドポイント。
response.json({...}) – JSON を返す。
app.listen(3900) – ポート3900で待ち受け。（Vite は3901、サーバーは3900——2プログラムは同じポートを使えない。）

Ctrl+C でサーバー停止。注意：コード変更のたびに止めて再起動——サーバーは Vite じゃない、自分では更新しない。

見てみよう：データ付きサーバー

サーバーはだいたいデータを配る。listen の上に2つ目のエンドポイントを追加：

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

サーバーを再起動して http://localhost:3900/api/results を開く——API 経由のデータ。大きなサイトもこう動く（配列の代わりにデータベース）。

やってみよう 💪

ガイドに従ってサーバーを動かす。
プロジェクトのデータでエンドポイントを追加：🏫 /api/menu（週の食事配列）· 🙋 /api/favorites（好きなゲーム/本）· 🌍 /api/trips（旅行リスト）· ⚽ /api/results（試合結果）。
遊び心の /api/random を追加——毎回違うメッセージ：

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

ブラウザですべてのエンドポイントを試す——前レッスンで学んだ fetch() でコンソールから1つ呼んでみる。

⚠️

「Cannot GET /api/…」 = エンドポイントが存在しない——アドレスの typo と、変更後にサーバーを再起動したか確認。「EADDRINUSE」 = ポート3900が使用中——別ターミナルで古いサーバーが動いてるかも；見つけて Ctrl+C。

✅

確認： サーバーがポート3900で動き、複数エンドポイントで自分の JSON データに応答。フロントエンドは分かってる、バックエンドに入り始めた——あとはつなぐ。次のレッスンでゲストブック。

このレッスンのまとめ

Express のサーバー：npm init -y、npm install express、node server.js、Ctrl+C で停止、変更のたび再起動。
エンドポイント = アドレス + 応答：app.get("/api/something", (request, response) => response.json(...))。
フロントエンド（3901）とバックエンド（3900）は2プログラム、2ポート。