フォームの章に問題を追加 (#445)

Yokomi422 · web-flow · commit e6c8c625ec4d · 2023-12-07T09:12:23.000+09:00
diff --git a/docs/3-web-servers/05-form/_samples/login/main.mjs b/docs/3-web-servers/05-form/_samples/login/main.mjs
@@ -0,0 +1,31 @@
+import express from "express";
+const app = express();
+
+app.use(express.static("static"));
+app.use(express.urlencoded({ extended: true }));
+
+const PORT = 3000;
+
+const userCredentials = [
+  { username: "tanaka", password: "kfae12F@" },
+  { username: "sato", password: "faewbnpE3b=" },
+  { username: "endo", password: "fEnEoB131b" },
+];
+
+app.post("/login", (request, response) => {
+  const username = request.body.username;
+  const password = request.body.password;
+
+  const userCredential = userCredentials.find(
+    (userCredential) =>
+      userCredential.username == username &&
+      userCredential.password == password,
+  );
+  if (userCredential === undefined) {
+    response.send("ログインに失敗しました。");
+  } else {
+    response.send("ログインに成功しました。");
+  }
+});
+
+app.listen(PORT);
diff --git a/docs/3-web-servers/05-form/_samples/login/static/index.html b/docs/3-web-servers/05-form/_samples/login/static/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>ログイン</title>
+  </head>
+  <body>
+    <form action="/login" method="post">
+      <input type="text" name="username" placeholder="ユーザー名" />
+      <input type="password" name="password" placeholder="パスワード" />
+      <button>ログイン</button>
+    </form>
+  </body>
+</html>
diff --git a/docs/3-web-servers/05-form/index.mdx b/docs/3-web-servers/05-form/index.mdx
@@ -117,7 +117,33 @@ app.listen(3000);
 このページの URL を見てみましょう。特に、クエリパラメータの部分に注目してみましょう。
 ![URLのクエリパラメータ](form-url.png)
 
-## 課題
+## 課題1
+
+ログイン画面を作ってみましょう。以下のような画面を作成してください。
+
+![ログイン画面](./work1.png)
+
+ユーザー名とパスワードを入力して、ログインボタンを押すと、`/login` に移動し、ログインに成功した場合は `ログインに成功しました。` と表示し、失敗した場合は `ログインに失敗しました。` と表示するようにしてください。(POSTリクエストを使ってみましょう。)
+
+:::tip
+ユーザー名とパスワードは以下のように配列で管理してみましょう。
+
+```javascript
+const userCredentials = [
+  { username: "tanaka", password: "kfae12F@" },
+  { username: "sato", password: "faewbnpE3b=" },
+  { username: "endo", password: "fEnEoB131b" },
+];
+```
+
+`Array`オブジェクトの`find`メソッドを使用して、ユーザー名とパスワードが一致する要素を探してみましょう。
+:::
+
+### 解答例
+
+<ViewSource url={import.meta.url} path="_samples/login" />
+
+## 課題2
 
 書籍検索システムを作ってみましょう。まずは、配列に本のデータを登録します。
 
diff --git a/docs/3-web-servers/05-form/work1.png b/docs/3-web-servers/05-form/work1.png
