Cookie の節の書き直し (#860)

Author: chelproc

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[prisma]": {
+    "editor.defaultFormatter": "Prisma.prisma"
+  }
 }

docs/3-web-servers/07-fetch-api-post/_samples/coffee-sales/public/script.js

@@ -1,6 +1,6 @@
 document.getElementById("record-button").onclick = async () => {
   const quantityInput = document.getElementById("quantity-input");
-  const quantity = parseInt(quantityInput.value);
+  const quantity = Number(quantityInput.value);
 
   const response = await fetch("/sales", {
     method: "POST",

docs/3-web-servers/07-fetch-api-post/http-message.drawio.svg

@@ -12,7 +12,7 @@ Fetch APIを用いると、サーバーからデータを取得するだけで
 
 [Expressによるサーバー構築](../server/)の節では、<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と呼び、その応答を<Term>レスポンス</Term>と呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。
 
-- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term type="httpMethod">**メソッド**</Term>と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、HTTPステータスコードと呼ばれる、リクエストの結果を示すコードが含まれます。
+- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term type="httpMethod">**メソッド**</Term>と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、<Term>**ステータスコード**</Term>と呼ばれる、リクエストの結果を示すコードが含まれます。
 - **ヘッダー**: リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。
 - **ボディ**: リクエストやレスポンスの実際のデータ。リクエストのボディには、サーバーに送信するデータが含まれ、レスポンスのボディには、サーバーからクライアントに返されるデータが含まれます。
 
@@ -139,7 +139,7 @@ app.listen(3000);
 ```javascript title="public/script.js (ブラウザ上で動作するJavaScript)"
 document.getElementById("record-button").onclick = async () => {
   const quantityInput = document.getElementById("quantity-input");
-  const quantity = parseInt(quantityInput.value);
+  const quantity = Number(quantityInput.value);
 
   const response = await fetch("/sales", {
     method: "POST",

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

@@ -0,0 +1 @@
+/node_modules

docs/4-advanced/01-cookie/_samples/cookie-counter/.gitignore

@@ -0,0 +1,16 @@
+import express from "express";
+import cookieParser from "cookie-parser";
+
+const app = express();
+app.use(cookieParser());
+
+app.get("/", (request, response) => {
+  // Cookieの値は文字列なので数値に変換が必要
+  const count = Number(request.cookies.count) || 0;
+  const newCount = count + 1;
+  // 変更後の値をレスポンスヘッダに乗せる
+  response.cookie("count", newCount.toString());
+  response.send(`${newCount}回目のアクセスですね。`);
+});
+
+app.listen(3000);