フォームではなく、Fetch APIを中心にするように変更 #853

chelproc · 2025-07-20T12:55:42Z

フォームの代わりにFetch APIを中心にするように変更しました。

変更の経緯および、章立てについての議論は、#856 を参照してください。
関連する確認問題および演習問題についての議論は、#857 を参照してください。

cloudflare-workers-and-pages · 2025-07-20T12:57:56Z

Deploying utcode-learn with Cloudflare Pages

Latest commit:	`e03549f`
Status:	✅ Deploy successful!
Preview URL:	https://276e51b6.utcode-learn.pages.dev
Branch Preview URL:	https://insert-fetch-api-into-web-se.utcode-learn.pages.dev

View logs

- 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]>

chvmvd · 2025-08-01T00:56:40Z

確認問題と演習問題を追加しました。また、一部の章のタイトルを仮で作りました。データベースの章の演習問題についてもFetch APIを中心に書き換えました。

docs/3-web-servers/06-fetch-api/index.mdx

docs/3-web-servers/06-fetch-api/_samples/fetch-weather-json/public/script.js

chvmvd · 2025-08-02T14:53:24Z

説明文中での明らかな誤植については、説明文中の誤植を修正のコミットで修正させていただきました。
CodeSandboxが動いていないことに伴う対応についてもCodeSandboxが動かない問題を修正のコミットで修正させていただきました。
それ以外のものについては、↑にコメントさせていただきました。

docs/3-web-servers/06-fetch-api/_samples/browser-module/public/main.mjs

chvmvd · 2025-08-03T09:08:28Z

確認問題と演習問題の修正についてもすべて対応が完了しました。

Copilot

Pull Request Overview

This PR shifts the curriculum structure to focus on Fetch API for client-server communication rather than traditional HTML forms. It removes the form-based approach and replaces it with modern JavaScript-based Fetch API patterns for both data retrieval and submission.

Removes the traditional form-based chapters and examples
Introduces Fetch API for data retrieval and data submission as separate chapters
Updates the advanced section by removing the separate Fetch API chapter (now covered in the web-servers section)

Reviewed Changes

Copilot reviewed 83 out of 135 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/Term/definitions.js	Updates chapter navigation paths to reflect new Fetch API-focused structure
docs/4-advanced/01-fetch-api/index.mdx	Removes the advanced Fetch API chapter (content moved to web-servers section)
docs/3-web-servers/06-fetch-api/index.mdx	New chapter focusing on data retrieval using Fetch API
docs/3-web-servers/07-fetch-api-post/index.mdx	New chapter focusing on data submission using Fetch API
docs/3-web-servers/06-form/index.mdx	Removes the traditional form-based chapter
docs/3-web-servers/07-get-post/index.mdx	Removes the GET/POST request chapter focused on forms
docs/3-web-servers/08-database/index.mdx	Updates database examples to use Fetch API instead of forms

Files not reviewed (14)

docs/3-web-servers/06-fetch-api/_samples/currency-converter/package-lock.json: Language not supported
docs/3-web-servers/06-fetch-api/_samples/exchange-rates/package-lock.json: Language not supported
docs/3-web-servers/06-fetch-api/_samples/fetch-open-status-json/package-lock.json: Language not supported
docs/3-web-servers/06-fetch-api/_samples/fetch-open-status/package-lock.json: Language not supported
docs/3-web-servers/06-fetch-api/_samples/fetch-weather-json/package-lock.json: Language not supported
docs/3-web-servers/06-fetch-api/_samples/fetch-weather/package-lock.json: Language not supported
docs/3-web-servers/06-form/_samples/node-emoji-form/package-lock.json: Language not supported
docs/3-web-servers/06-form/_samples/send-data-to-server/package-lock.json: Language not supported
docs/3-web-servers/07-fetch-api-post/_samples/bank-account/package-lock.json: Language not supported
docs/3-web-servers/07-fetch-api-post/_samples/book-search/package-lock.json: Language not supported
docs/3-web-servers/07-fetch-api-post/_samples/chat-app/package-lock.json: Language not supported
docs/3-web-servers/07-fetch-api-post/_samples/coffee-sales/package-lock.json: Language not supported
docs/3-web-servers/07-get-post/_samples/post-request/package-lock.json: Language not supported
docs/4-advanced/01-fetch-api/_samples/send-post-request/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

docs/3-web-servers/07-fetch-api-post/_samples/chat-app/main.mjs:14

[nitpick] Consider using response.status(201).send() or response.status(204).send() to indicate successful POST request completion with appropriate HTTP status codes. Status 201 indicates resource creation, while 204 indicates successful request with no content to return.

  response.send();

Copilot · 2025-08-10T05:49:54Z

docs/3-web-servers/08-database/_samples/forum/main.mjs

 app.post("/send", async (request, response) => {
  await client.post.create({ data: { message: request.body.message } });
-  response.redirect("/");
+  response.send();


[nitpick] Consider using response.status(201).send() or response.status(204).send() to indicate successful POST request completion with appropriate HTTP status codes. Status 201 indicates resource creation, while 204 indicates successful request with no content to return.

Suggested change

response.send();

response.status(201).send();

Copilot · 2025-08-10T05:49:55Z

docs/3-web-servers/07-fetch-api-post/_samples/bank-account/main.mjs

+const account = { balance: 100000 };
+app.post("/transaction", (request, response) => {
+  // リクエストボディはrequest.bodyに格納される
+  account.balance += request.body.amount;


This banking operation lacks input validation. Consider validating that request.body.amount is a number and implementing business logic to prevent negative balances or unreasonable transaction amounts for a more realistic banking application.

Suggested change

account.balance += request.body.amount;

const amount = request.body.amount;

// Validate amount: must be a number, not NaN, finite, reasonable, and not cause negative balance

if (

typeof amount !== "number" ||

!Number.isFinite(amount) ||

isNaN(amount) ||

Math.abs(amount) > 1000000 || // Example: limit transaction to ±1,000,000

account.balance + amount < 0

) {

return response.status(400).json({ error: "Invalid transaction amount." });

}

account.balance += amount;

Copilot · 2025-08-10T05:49:55Z

docs/3-web-servers/08-database/_samples/forum/main.mjs

 app.post("/send", async (request, response) => {
  await client.post.create({ data: { message: request.body.message } });
-  response.redirect("/");
+  response.send();


Consider adding error handling for database connections and operations. In production code, you should handle potential Prisma client connection failures and database operation errors gracefully.

ウェブサーバーの章に Fetch API を追加 (アウトライン)

d42c71c

chelproc added 2 commits July 20, 2025 22:13

draft

88c8a5f

Fetch API の記述を拡充

eda251f

chelproc force-pushed the insert-fetch-api-into-web-server-chapter branch from 252826b to eda251f Compare July 21, 2025 12:55

chelproc and others added 2 commits July 21, 2025 22:32

演習問題を簡単にした

ce64184

chelproc marked this pull request as ready for review July 22, 2025 12:54

chvmvd added 3 commits August 1, 2025 00:44

確認問題と演習問題を追加

59a41a1

データベースの章をFetch API中心に書き換え

bf4a0e7

フォーマット

f7ab63b

chelproc and others added 5 commits August 2, 2025 17:48

Fetch API で JSON を扱うための記事、POST リクエストを扱うための記事を追加

bfc30e7

開発者ツールについて記述

d078d6e

空行の規則の変更

4593470

ブラウザ側のJavaScriptを脱ESM化

ee2d209

説明文中の誤植を修正

88620f9

chvmvd reviewed Aug 2, 2025

View reviewed changes

chvmvd and others added 2 commits August 3, 2025 00:41

CodeSandboxが動かない問題を修正

eb036a9

top-level await に関する記述を削除

27a530f

chvmvd reviewed Aug 3, 2025

View reviewed changes

docs/3-web-servers/06-fetch-api/_samples/browser-module/public/main.mjs Outdated Show resolved Hide resolved

chvmvd added 3 commits August 3, 2025 16:53

確認問題と演習問題を修正

e7f9a2f

データベースの章の演習問題を修正

38a18d9

確認問題と演習問題に画像と動画を追加

961c581

chvmvd changed the title ~~ウェブサーバーの章に Fetch API を追加~~ フォームではなく、Fetch APIを中心にするように変更 Aug 9, 2025

chelproc added 3 commits August 9, 2025 21:45

不要になった節を削除

4f36af6

不要なサンプルコードを削除

dc23271

レスポンスの取得に関する表現を簡略化

e03549f

chvmvd approved these changes Aug 9, 2025

View reviewed changes

This was linked to issues Aug 9, 2025

「フォーム」と「HTTPリクエストメソッド」の章を削除し、Fetch APIによる送信を中心とした構成に変更する #856

Closed

新しいFetch APIの章で使用する問題を作成する #857

Closed

chelproc merged commit 83165fe into main Aug 9, 2025
3 checks passed

chelproc deleted the insert-fetch-api-into-web-server-chapter branch August 9, 2025 13:07

chvmvd mentioned this pull request Aug 9, 2025

2025-08のリリース #859

Closed

4 tasks

chvmvd requested a review from Copilot August 10, 2025 05:49

Copilot AI reviewed Aug 10, 2025

View reviewed changes

This was referenced Sep 12, 2025

フォームの中級課題の解答例に、 send.html がない。 #793

Closed

<input name="name"> が紛らわしい #765

Closed

「GETリクエストとPOSTリクエスト」の章の requestAndResponse.png のテキストが誤っている #761

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

フォームではなく、Fetch APIを中心にするように変更 #853

フォームではなく、Fetch APIを中心にするように変更 #853

Uh oh!

chelproc commented Jul 20, 2025 •

edited by chvmvd

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Jul 20, 2025 •

edited

Loading

Uh oh!

chvmvd commented Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chvmvd commented Aug 2, 2025 •

edited

Loading

Uh oh!

Uh oh!

chvmvd commented Aug 3, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 10, 2025

Uh oh!

Copilot AI Aug 10, 2025

Uh oh!

Copilot AI Aug 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-  account.balance += request.body.amount;
+  const amount = request.body.amount;
+  // Validate amount: must be a number, not NaN, finite, reasonable, and not cause negative balance
+  if (
+    typeof amount !== "number" ||
+    !Number.isFinite(amount) ||
+    isNaN(amount) ||
+    Math.abs(amount) > 1000000 || // Example: limit transaction to ±1,000,000
+    account.balance + amount < 0
+  ) {
+    return response.status(400).json({ error: "Invalid transaction amount." });
+  }
+  account.balance += amount;

フォームではなく、Fetch APIを中心にするように変更 #853

フォームではなく、Fetch APIを中心にするように変更 #853

Uh oh!

Conversation

chelproc commented Jul 20, 2025 • edited by chvmvd Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Jul 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying utcode-learn with Cloudflare Pages

Uh oh!

chvmvd commented Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chvmvd commented Aug 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

chvmvd commented Aug 3, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chelproc commented Jul 20, 2025 •

edited by chvmvd

Loading

cloudflare-workers-and-pages bot commented Jul 20, 2025 •

edited

Loading

chvmvd commented Aug 2, 2025 •

edited

Loading