draft

chelproc · chelproc · commit 88c8a5f37481 · 2025-07-20T22:13:53.000+09:00
diff --git a/docs/3-web-servers/06-fetch-api/_samples/browser-module/main.mjs b/docs/3-web-servers/06-fetch-api/_samples/browser-module/main.mjs
@@ -0,0 +1,6 @@
+import express from "express";
+const app = express();
+
+app.use(express.static("./public"));
+
+app.listen(3000);
diff --git a/docs/3-web-servers/06-fetch-api/_samples/browser-module/package.json b/docs/3-web-servers/06-fetch-api/_samples/browser-module/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "browser-module",
+  "dependencies": {
+    "express": "^5.1.0"
+  }
+}
diff --git a/docs/3-web-servers/06-fetch-api/_samples/browser-module/public/index.html b/docs/3-web-servers/06-fetch-api/_samples/browser-module/public/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>モジュールの例</title>
+  </head>
+  <body>
+    <h1>計算結果</h1>
+    <p id="result"></p>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
diff --git a/docs/3-web-servers/06-fetch-api/_samples/browser-module/public/main.js b/docs/3-web-servers/06-fetch-api/_samples/browser-module/public/main.js
@@ -0,0 +1,6 @@
+import { add, multiply } from "./math.js";
+
+const sum = add(3, 4);
+const product = multiply(3, 4);
+
+document.getElementById("result").textContent = `3 + 4 = ${sum}, 3 × 4 = ${product}`;
diff --git a/docs/3-web-servers/06-fetch-api/_samples/browser-module/public/math.js b/docs/3-web-servers/06-fetch-api/_samples/browser-module/public/math.js
@@ -0,0 +1,7 @@
+export function add(a, b) {
+  return a + b;
+}
+
+export function multiply(a, b) {
+  return a * b;
+}
diff --git a/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/main.mjs b/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/main.mjs
@@ -0,0 +1,10 @@
+import express from "express";
+const app = express();
+
+app.use(express.static("./public"));
+
+app.get("/weather", (request, response) => {
+  response.send("晴れ");
+});
+
+app.listen(3000);
diff --git a/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/package.json b/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "fetch-weather",
+  "dependencies": {
+    "express": "^5.1.0"
+  }
+}
diff --git a/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/public/index.html b/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>天気予報</title>
+  </head>
+  <body>
+    <button id="fetch-button">天気予報を見る</button>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/public/script.js b/docs/3-web-servers/06-fetch-api/_samples/fetch-weather/public/script.js
@@ -0,0 +1,5 @@
+document.getElementById("fetch-button").onclick = async () => {
+  const response = await fetch("/weather");
+  const weather = await response.text();
+  alert(weather);
+};
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/main.mjs b/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/main.mjs
@@ -0,0 +1,11 @@
+import express from "express";
+const app = express();
+
+app.use(express.static("./public"));
+
+app.get("/nikkei", (request, response) => {
+  const nikkei = Math.floor(Math.random() * 20000) + 20000;
+  response.send(`${nikkei}`);
+});
+
+app.listen(3000);
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/package.json b/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "nikkei-realtime",
+  "dependencies": {
+    "express": "^5.1.0"
+  }
+}
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/public/index.html b/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/public/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>リアルタイム日経平均株価</title>
+  </head>
+  <body>
+    <h1>リアルタイム日経平均株価</h1>
+    <p>現在の株価: <span id="current-price">---</span>円</p>
+    <p>更新時刻: <span id="update-time">---</span></p>
+    <h2>履歴</h2>
+    <ul id="history"></ul>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/public/script.js b/docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/public/script.js
@@ -0,0 +1,27 @@
+async function fetchNikkei() {
+  const response = await fetch("/nikkei");
+  const price = await response.text();
+  const now = new Date();
+  const timeString = now.toLocaleTimeString("ja-JP");
+  
+  // 現在の株価を更新
+  document.getElementById("current-price").textContent = price;
+  document.getElementById("update-time").textContent = timeString;
+  
+  // 履歴に追加
+  const historyList = document.getElementById("history");
+  const listItem = document.createElement("li");
+  listItem.textContent = `${timeString} - ${price}円`;
+  historyList.insertBefore(listItem, historyList.firstChild);
+  
+  // 履歴を最新10件に制限
+  while (historyList.children.length > 10) {
+    historyList.removeChild(historyList.lastChild);
+  }
+}
+
+// 初回実行
+fetchNikkei();
+
+// 10秒ごとに実行
+setInterval(fetchNikkei, 10000);
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/main.mjs b/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/main.mjs
@@ -0,0 +1,11 @@
+import express from "express";
+const app = express();
+
+app.use(express.static("./public"));
+
+app.get("/nikkei", (request, response) => {
+  const nikkei = Math.floor(Math.random() * 20000) + 20000;
+  response.send(`${nikkei}円`);
+});
+
+app.listen(3000);
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/package.json b/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "nikkei-simple",
+  "dependencies": {
+    "express": "^5.1.0"
+  }
+}
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/public/index.html b/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>日経平均株価</title>
+  </head>
+  <body>
+    <h1>日経平均株価</h1>
+    <button id="fetch-button">株価を取得</button>
+    <p id="result"></p>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/public/script.js b/docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/public/script.js
@@ -0,0 +1,5 @@
+document.getElementById("fetch-button").onclick = async () => {
+  const response = await fetch("/nikkei");
+  const price = await response.text();
+  document.getElementById("result").textContent = `現在の日経平均株価: ${price}`;
+};
diff --git a/docs/3-web-servers/06-fetch-api/index.mdx b/docs/3-web-servers/06-fetch-api/index.mdx
