Skip to content

Commit e14f441

Browse files
chelprocclaude
chelproc
and
claude
committed
refactor: Replace Nikkei examples with JPY/USD exchange rate examples
- Changed Exercise 1 from Nikkei stock price to exchange rate display - Uses top-level fetch without button (immediate page load) - Generates random exchange rate between 140-160 yen/dollar - Changed Exercise 2 from real-time stock updates to currency converter - Added input field for JPY amount with button-triggered conversion - Removed setInterval functionality - Added async/await usage warning with examples - Updated all sample files to use .mjs extension and type="module" - Renamed sample directories: - nikkei-simple → exchange-rate - nikkei-realtime → currency-converter 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent eda251f commit e14f441

File tree

15 files changed

+161
-146
lines changed

15 files changed

+161
-146
lines changed

‎docs/3-web-servers/06-fetch-api/_samples/currency-converter/main.mjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import express from "express";
2+
const app = express();
3+
4+
app.use(express.static("./public"));
5+
6+
app.get("/exchange-rate", (request, response) => {
7+
const rate = (Math.random() * 20 + 140).toFixed(2);
8+
response.send(rate);
9+
});
10+
11+
app.listen(3000);

docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/package.json renamed to docs/3-web-servers/06-fetch-api/_samples/currency-converter/package.json

File renamed without changes.

‎docs/3-web-servers/06-fetch-api/_samples/currency-converter/public/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>通貨換算</title>
6+
</head>
7+
<body>
8+
<h1>円→ドル通貨換算</h1>
9+
<div>
10+
<label>
11+
円: <input type="number" id="yen-input" placeholder="金額を入力" />
12+
</label>
13+
<button id="convert-button">換算する</button>
14+
</div>
15+
<div id="result"></div>
16+
<script type="module" src="./script.mjs"></script>
17+
</body>
18+
</html>

‎docs/3-web-servers/06-fetch-api/_samples/currency-converter/public/script.mjs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ボタンクリックイベントに非同期関数を設定
2+
// async キーワードが必要
3+
document.getElementById("convert-button").onclick = async () => {
4+
const yenInput = document.getElementById("yen-input");
5+
const yenAmount = parseFloat(yenInput.value);
6+
7+
if (isNaN(yenAmount) || yenAmount <= 0) {
8+
alert("正しい金額を入力してください");
9+
return;
10+
}
11+
12+
// 為替レートを取得
13+
const response = await fetch("/exchange-rate");
14+
const rate = parseFloat(await response.text());
15+
16+
// ドルに換算
17+
const dollarAmount = (yenAmount / rate).toFixed(2);
18+
19+
// 結果を表示
20+
const resultDiv = document.getElementById("result");
21+
resultDiv.innerHTML = `
22+
<p>為替レート: 1ドル = ${rate}円</p>
23+
<p>${yenAmount}円 = <strong>${dollarAmount}ドル</strong></p>
24+
`;
25+
};

‎docs/3-web-servers/06-fetch-api/_samples/exchange-rate/main.mjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import express from "express";
2+
const app = express();
3+
4+
app.use(express.static("./public"));
5+
6+
app.get("/exchange-rate", (request, response) => {
7+
const rate = (Math.random() * 20 + 140).toFixed(2);
8+
response.send(rate);
9+
});
10+
11+
app.listen(3000);

docs/3-web-servers/06-fetch-api/_samples/nikkei-simple/package.json renamed to docs/3-web-servers/06-fetch-api/_samples/exchange-rate/package.json

File renamed without changes.

‎docs/3-web-servers/06-fetch-api/_samples/exchange-rate/public/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>為替レート</title>
6+
</head>
7+
<body>
8+
<h1>円/ドル為替レート</h1>
9+
<p>現在のレート: <span id="rate">読み込み中...</span>円/ドル</p>
10+
<script type="module" src="./script.mjs"></script>
11+
</body>
12+
</html>

‎docs/3-web-servers/06-fetch-api/_samples/exchange-rate/public/script.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// ページ読み込み時に自動的に実行される（トップレベルのawait）
2+
const response = await fetch("/exchange-rate");
3+
const rate = await response.text();
4+
document.getElementById("rate").textContent = rate;

‎docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/main.mjs‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎docs/3-web-servers/06-fetch-api/_samples/nikkei-realtime/public/index.html‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

0 commit comments

Comments
 (0)