Merge branch 'main' into unify-section-reference-format

Author: chvmvd

docs/1-trial-session/03-css/index.mdx

@@ -12,7 +12,7 @@ title: CSS
 <Term>**`style`属性**</Term>は、全ての<Term>HTML要素</Term>に対して定義されている、<Term>CSS</Term>を記述するための属性です。次の例では、`div`要素の`style`属性に<Term>CSS</Term>を指定して、文字色を赤色にしています。
 
 ```html title="index.html"
-<div style="color: red; font-size: 24px;">Hello World!</div>
+<div style="color: red; font-size: 24px">Hello World!</div>
 ```
 
 <ViewSource url={import.meta.url} path="_samples/first-css" />

docs/1-trial-session/04-javascript/index.mdx

@@ -56,7 +56,7 @@ document.write("Hello World!");
 
 :::
 
-## <Term>JavaScript</Term> の基本文法
+## <Term>JavaScript</Term>の基本文法
 
 {/* prettier-ignore */}
 <Term>JavaScript</Term>のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。<Term>JavaScript</Term>の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。

docs/2-browser-apps/06-project/_samples/todo/script.js

@@ -2,7 +2,9 @@ const todoList = document.getElementById("todo-list");
 const todoInput = document.getElementById("todo-input");
 const addButton = document.getElementById("add-button");
 
-todoInput.oninput = () => (addButton.disabled = todoInput === "");
+todoInput.oninput = () => {
+  addButton.disabled = todoInput.value === "";
+};
 
 addButton.onclick = () => {
   const todoItem = document.createElement("li");

docs/2-browser-apps/06-project/index.mdx

@@ -271,7 +271,7 @@ addButton.onclick = () => {
   addButton.disabled = true; // valueへの代入はoninputイベントを発火しない
   editButton.textContent = "編集";
   editButton.onclick = () => {
-    const input = prompt("新しい内容を入力してください"。);
+    const input = prompt("新しい内容を入力してください。");
     // prompt関数は入力された文字列が空の場合は空文字列 ("")、キャンセルされた場合はnullを返す
     if (input !== "" && input !== null) todoText.textContent = input;
   };

docs/3-web-servers/05-server/index.mdx

@@ -71,7 +71,7 @@ node main.mjs
 
 ブラウザで<a href="http://localhost:3000/" target="_blank">`http://localhost:3000/`</a>にアクセスし、次の動作を確認してください。
 
-- `Hello World！ 日本語`が表示されること
+- `Hello World! 日本語`が表示されること
 - `日本語`をクリックするとアドレスバーが<a href="http://localhost:3000/lang/ja" target="_blank">`http://localhost:3000/lang/ja`</a>に変化し`こんにちは、世界！`が表示されること
 
 <video src={expressSetupVideo} muted controls />

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

@@ -11,7 +11,7 @@ app.get("/messages", (request, response) => {
 
 app.post("/messages", (request, response) => {
   messages.push(request.body.message);
-  response.send();
+  response.sendStatus(201); // Created（新しいメッセージを作成）
 });
 
 app.listen(3000);

docs/3-web-servers/07-fetch-api-post/index.mdx

@@ -212,7 +212,7 @@ document.getElementById("search-button").onclick = async () => {
 ```javascript
 const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
 
-/// [2, 4, 6, 8]
+// [2, 4, 6, 8]
 const evenNumbers = numbers.filter((number) => number % 2 === 0);
 ```
 
@@ -283,7 +283,7 @@ document.getElementById("search-button").onclick = async () => {
 
 <video src={chatAppVideo} controls muted />
 
-サーバー側では、これまでのメッセージを保存する配列`messages`を用意しましょう。`/messages`に対するGETリクエストを受けたとき、配列`messages`をJSON形式で返すようにしてください。また、`/messages`に対するPOSTリクエストを受けたとき、`Array#push`メソッドで受け取ったメッセージを配列`messages`に追加するようにしてください。
+サーバー側では、これまでのメッセージを保存する配列`messages`を用意しましょう。`/messages`に対するGETリクエストを受けたとき、配列`messages`をJSON形式で返すようにしてください。また、`/messages`に対するPOSTリクエストを受けたとき、`Array#push`メソッドで受け取ったメッセージを配列`messages`に追加して、適切な<Term>ステータスコード</Term>を返すようにしてください。
 
 ```javascript title="main.mjsの抜粋 (サーバーとして動作するJavaScript)"
 const messages = [];
@@ -294,7 +294,7 @@ app.get("/messages", (request, response) => {
 
 app.post("/messages", (request, response) => {
   // 受け取ったメッセージをmessagesに追加
-  response.send();
+  response.sendStatus(201); // Created（新しいメッセージを作成）
 });
 ```
 
@@ -327,7 +327,7 @@ app.get("/messages", (request, response) => {
 
 app.post("/messages", (request, response) => {
   messages.push(request.body.message);
-  response.send();
+  response.sendStatus(201); // Created（新しいメッセージを作成）
 });
 
 app.listen(3000);

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

@@ -13,7 +13,7 @@ app.get("/posts", async (request, response) => {
 
 app.post("/posts", async (request, response) => {
   await client.post.create({ data: { message: request.body.message } });
-  response.send();
+  response.sendStatus(201); // Created（新しいメッセージを作成）
 });
 
 app.listen(3000);

docs/3-web-servers/08-database/index.mdx

@@ -371,7 +371,7 @@ app.post("/posts", async (request, response) => {
 ```javascript title="main.mjsの抜粋 (サーバーとして動作するJavaScript)"
 app.post("/posts", async (request, response) => {
   await client.post.create({ data: { message: request.body.message } });
-  response.send();
+  response.sendStatus(201); // Created（新しいメッセージを作成）
 });
 ```
 

docs/3-web-servers/10-git-github-init/index.mdx

@@ -31,9 +31,9 @@ VS Code標準の機能だけでも多くのことができますが、より便
 
 コマンドパレット (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) / <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) ) に`Git Graph: View Git Graph (git log)`というメニューが出て見やすい
 
-![GitGragh](./gitGraph.png)
+![Git Graph](./gitGraph.png)
 
-![GitGragh拡張機能の様子](./gitGraph-view.png)
+![Git Graph拡張機能の様子](./gitGraph-view.png)
 
 ## GitHubへの登録