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

Author: chvmvd

docs/3-web-servers/07-fetch-api-post/_samples/chat-app/public/script.js

@@ -13,7 +13,8 @@ setInterval(async () => {
 }, 1000);
 
 document.getElementById("send-button").onclick = async () => {
-  const message = document.getElementById("message-input").value;
+  const messageInput = document.getElementById("message-input");
+  const message = messageInput.value;
   await fetch("/send", {
     method: "POST",
     headers: { "Content-Type": "application/json" },

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

@@ -352,7 +352,8 @@ setInterval(async () => {
 }, 1000);
 
 document.getElementById("send-button").onclick = async () => {
-  const message = document.getElementById("message-input").value;
+  const messageInput = document.getElementById("message-input");
+  const message = messageInput.value;
   await fetch("/send", {
     method: "POST",
     headers: { "Content-Type": "application/json" },

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

@@ -3,7 +3,6 @@ import { PrismaClient } from "./generated/prisma/index.js";
 
 const app = express();
 const client = new PrismaClient();
-
 app.use(express.json());
 app.use(express.static("./public"));
 

docs/3-web-servers/08-database/_samples/forum/public/index.html

@@ -8,6 +8,6 @@
     <ul id="message-list"></ul>
     <input id="message-input" placeholder="メッセージ" />
     <button id="send-button" type="button">送信</button>
-    <script type="module" src="./script.mjs"></script>
+    <script src="./script.js"></script>
   </body>
 </html>

…atabase/_samples/forum/public/script.mjs …database/_samples/forum/public/script.jsdocs/3-web-servers/08-database/_samples/forum/public/script.mjs renamed to docs/3-web-servers/08-database/_samples/forum/public/script.js docs/3-web-servers/08-database/_samples/forum/public/script.mjs renamed to docs/3-web-servers/08-database/_samples/forum/public/script.js

@@ -13,9 +13,10 @@ setInterval(async () => {
 }, 1000);
 
 document.getElementById("send-button").onclick = async () => {
-  const message = document.getElementById("message-input").value;
+  const messageInput = document.getElementById("message-input");
+  const message = messageInput.value;
   await fetch("/send", {
-    method: "post",
+    method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message: message }),
   });

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

@@ -300,18 +300,35 @@ app.get("/posts", async (request, response) => {
 
 ### 手順7
 
-[Fetch APIによるデータの送信の章](/docs/web-servers/fetch-api-post/)の演習問題2と同様にして、ブラウザ側で、定期的に`/posts`にGETリクエストを発行し、受け取ったレスポンスに基づいてメッセージの一覧を表示するようにしてください。また、メッセージを入力し、送信ボタンを押すと、`/send`に対してPOSTリクエストでメッセージの内容を送信するようにしてください。
+前頁での演習問題2と同様にして、ブラウザ側で、定期的に`/posts`にGETリクエストを発行し、受け取ったレスポンスに基づいてメッセージの一覧を表示するようにしてください。また、メッセージを入力し、送信ボタンを押すと、`/send`に対してPOSTリクエストでメッセージの内容を送信するようにしてください。
 
 <Answer title="手順7まで">
 
+```javascript title="main.mjs (サーバーとして動作するJavaScript)"
+import express from "express";
+import { PrismaClient } from "./generated/prisma/index.js";
+
+const app = express();
+const client = new PrismaClient();
+app.use(express.json());
+app.use(express.static("./public"));
+
+app.get("/posts", async (request, response) => {
+  const posts = await client.post.findMany();
+  response.json(posts);
+});
+
+app.listen(3000);
+```
+
 ```html title="public/index.htmlの抜粋"
 <ul id="message-list"></ul>
 <input id="message-input" placeholder="メッセージ" />
 <button id="send-button" type="button">送信</button>
-<script type="module" src="./script.mjs"></script>
+<script src="./script.js"></script>
 ```
 
-```javascript title="public/script.mjs (ブラウザ上で動作するJavaScript)"
+```javascript title="public/script.js (ブラウザ上で動作するJavaScript)"
 setInterval(async () => {
   const response = await fetch("/posts");
   const posts = await response.json();
@@ -327,9 +344,10 @@ setInterval(async () => {
 }, 1000);
 
 document.getElementById("send-button").onclick = async () => {
-  const message = document.getElementById("message-input").value;
+  const messageInput = document.getElementById("message-input");
+  const message = messageInput.value;
   await fetch("/send", {
-    method: "post",
+    method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message: message }),
   });
@@ -360,7 +378,6 @@ app.post("/send", async (request, response) => {
 <Answer title="手順9まで">
 
 ```javascript title="main.mjsの抜粋 (サーバーとして動作するJavaScript)"
-app.use(express.urlencoded({ extended: true }));
 app.post("/send", async (request, response) => {
   await client.post.create({ data: { message: request.body.message } });
   response.send();