サーバーに馴染む ― fetchの向こう側へ

1. Networkタブを開くF12 → 「Network」タブ → そのままページを再読み込みします。
2. 行列を眺めるHTML・CSS・画像など、1行 = 1往復の一覧が流れます。ページ1枚が「何十回もの往復」でできていると分かります。
3. ステータスコードを読む各行の「Status」列が返事の種類です。200 = 成功、404 = 見つからない、500 = サーバー側の故障。この3つだけ覚えれば、当面は足ります。
4. 404を起こしてみるURLの末尾に /nai-page と打って開き、Networkで404を観察します。ユニット3の住所検索も開いて、APIの行 (zipcloud) を見つけてみましょう。
5. 観察メモを書く「リクエスト = 」「レスポンス = 」「404とは = 」を自分の言葉で3行にまとめます。これが越境の地図になります。

1. インストールするnodejs.org から「LTS」と書いてある方をダウンロードして、そのままインストールします (設定は全部そのままでOKです)。
2. 確認するVS Codeのターミナル (Ctrl + @) で node --version。数字が出れば成功です。
3. ファイルを実行するhello.js を作って console.log("ブラウザの外で動いた!"); と書き、ターミナルで node hello.js。出力がターミナルに出ます。コンソールの実験室が、パソコン全体に広がりました。
4. ブラウザとの違いを1つ確かめるdocument.title を実行するとエラーになります。Node.jsには「画面 (document)」がないからです。逆にNode.jsにはファイル操作など、ブラウザにない力があります。

お題: node kiroku.js 今日はNodeに入門した と打つと、日時つきの1行をターミナルに表示する小さな道具を作ります。

1. プロジェクトを作る新しいフォルダ my-api で、ターミナルから

   npm init -y
   npm install express

   npm はライブラリを取ってくる道具で、Node.jsと一緒に入っています。
2. server.jsを書く

   const express = require("express");
   const app = express();
   
   app.get("/api/hello", (req, res) => {
     res.json({ message: "こんにちは、私のAPIです!" });
   });
   
   app.listen(3000, () => {
     console.log("http://localhost:3000 で待機中");
   });

3. 起動するnode server.js。ターミナルに「待機中」と出ます。これであなたのパソコンはサーバーです。
4. ブラウザで呼ぶhttp://localhost:3000/api/hello を開くと、自分のJSONが返ってきます。zipcloudと同じ景色を、自分が作りました。
5. 止め方と直し方止めるのはターミナルで Ctrl + C。コードを直したら、止めてもう一度 node server.js です。「直したのに変わらない」の原因は、ほぼ再起動忘れです。

お題: Step 3で作ったおみくじを、API化して画面から呼びます。

1. 窓口を増やすapp.get("/api/omikuji", ...) を足し、「大吉・中吉・小吉・凶」から Math.random() で1つ選んで res.json({ result: ... }) で返します。
2. 画面を同居させるpublic フォルダを作って index.html を入れ、server.jsに app.use(express.static("public")); を1行足します。http://localhost:3000 で自分のページが開くようになります。
3. fetchで呼ぶページのボタンから fetch("/api/omikuji") → 結果を表示。ユニット3の知識がそのまま使えます。URLが /api/… だけで済むのは、画面とAPIが同じサーバーにいるからです。

1. 受け取りの準備server.jsの上の方に app.use(express.json()); を足します (送られてくるJSONを読む宣言です)。
2. 受け取って、ためて、保存する

   const fs = require("fs");
   let messages = [];
   try {
     messages = JSON.parse(fs.readFileSync("messages.json", "utf8"));
   } catch (e) {}
   
   app.post("/api/messages", (req, res) => {
     messages.push({ text: req.body.text });
     fs.writeFileSync("messages.json", JSON.stringify(messages, null, 2));
     res.json({ ok: true });
   });
   
   app.get("/api/messages", (req, res) => {
     res.json(messages);
   });

   localStorageの「万能の型」と同じ発想 (stringifyでしまう・parseで出す) が、サーバー側でも主役です。保存先がブラウザからファイル messages.json に変わっただけです。
3. 画面から送るフロント側のfetchは、送るときだけ少し長くなります。

   await fetch("/api/messages", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ text: input.value })
   });

4. 確かめる送信 → messages.json をVS Codeで開いて、増えていることを確認します。サーバーを再起動しても残っていれば、保存は本物です。