Repository: taishiro-honda-mt/next.js-off_jt
Pull request #2: カウンターアプリ・名前表示アプリ実装
Author: login: taishiro-honda-mt
Created: 2025-05-09T09:04:59Z | Merged: 2025-05-15T08:36:11Z

## 🎯 PRの目的

<!-- 例：
- 「GitHubとDevTools」の演習課題に対応
- フォームの送信処理とDevToolsでの通信確認を実装
-->

---

## 📝 実装内容・補足

### カウントアプリの作成
- DOM取得、イベントリスナーを使用
- カウント値をリアルタイムに表示
### 名前表示アプリの作成
- DOM取得、イベントリスナーを使用
- 入力値の取得と条件分岐による表示内容の変更
- 空文字入力時は赤文字で警告を出すように実装
<!--
- 実装した機能の概要
- 注意点や迷った点（あれば）
-->
![image](https://github.com/user-attachments/assets/7cf83a9e-7c22-415c-a245-46c6d00afba0)
![image](https://github.com/user-attachments/assets/86ee0735-29e7-4ae8-8c89-7bfcecc24496)
![image](https://github.com/user-attachments/assets/5aac26ec-7ffe-4a34-973b-05911301eb05)

---

## 🧠 自己評価（必ず記入）

| 評価観点                        | 自己評価（1〜5） | 理由・根拠 |
|---------------------------------|------------------|------------|
| テーマの目的を理解しているか     |         5         |     DOM操作・イベント処理を理解することができた。       |
| コードが目的に沿って書かれているか |       5           |       空文字チェックなど、要件通りに実装できた。     |
| 評価観点に沿った取り組みができたか |         5         |     基本構文の正確な理解に努め、表示切り替えや条件分岐も丁寧に実装した。       |
| 自走して実装できたか             |          5        |       適宜調べながら、自力で実装できた。     |

---

## 🙏 レビュアーへのお願い

<!--
- 特に見てほしい箇所
- 不安な点やレビューしてほしい観点など
-->

---

## ✅ 動作確認済みか

- [ ] `make dev` でアプリ起動
- [ ] 機能が意図通り動作している
- [ ] エラーが出ていない（Console / Network）

---

## 📎 関連資料

- カリキュラムリンク：
- 参考にした記事やドキュメント（あれば）：

## To レビューワー向け

<!-- 各コンテンツにある「評価観点」をコピペしてください　-->


Diff:
diff --git a/public/counter/counter.css b/public/counter/counter.css
new file mode 100644
index 0000000..d54eb0c
--- /dev/null
+++ b/public/counter/counter.css
@@ -0,0 +1,32 @@
+body {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #ffffff;
+  font-family: 'Arial', sans-serif;
+}
+
+.counter-all {
+  background-color:#f5f5f5;
+  border-radius:24px;
+  padding:   20px 40px;
+  text-align: center;
+}
+
+.number {
+  font-size: 48px;
+  font-weight: bold;
+  color: #333; 
+}
+
+button {
+  padding: 12px 20px;
+  margin: 8px;
+  font-size: 18px;
+  border: none;
+  border-radius: 8px;
+  color: black;
+  cursor: pointer;
+  background-color: #e0e0e0;
+}
\ No newline at end of file
diff --git a/public/counter/counter.html b/public/counter/counter.html
new file mode 100644
index 0000000..724b290
--- /dev/null
+++ b/public/counter/counter.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Counter</title>
+  <link rel="stylesheet" href="counter.css" />
+</head>
+
+<body>
+
+  <main class="counter-all">
+
+    <section class="counter-message">
+      <p>
+        現在のカウント: 
+        <span class="number" id="counter">0</span>
+      </p>
+    </section>
+
+    <section>
+      <button id="plus-button">+</button>
+      <button id="minus-button">-</button>
+      <br />
+      <button id="reset-button">リセット</button>
+    </section>
+
+  </main>
+
+  <script src="counter.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/counter/counter.js b/public/counter/counter.js
new file mode 100644
index 0000000..386c943
--- /dev/null
+++ b/public/counter/counter.js
@@ -0,0 +1,18 @@
+const plusButton = document.getElementById("plus-button");
+const minusButton = document.getElementById("minus-button");
+const resetButton = document.getElementById("reset-button");
+let count = 0;
+const counter = document.getElementById("counter");
+plusButton.addEventListener("click", () => {
+	count++;
+	counter.textContent = count;
+});
+
+minusButton.addEventListener("click", () => {
+	count--;
+	counter.textContent = count;
+});
+resetButton.addEventListener("click", () => {
+	count = 0;
+	counter.textContent = count;
+});
diff --git a/public/name-display/name-display.css b/public/name-display/name-display.css
new file mode 100644
index 0000000..77012df
--- /dev/null
+++ b/public/name-display/name-display.css
@@ -0,0 +1,11 @@
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+button {
+  margin: 30px;
+}
\ No newline at end of file
diff --git a/public/name-display/name-display.html b/public/name-display/name-display.html
new file mode 100644
index 0000000..3d9e3c8
--- /dev/null
+++ b/public/name-display/name-display.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>name-display</title>
+  <link rel="stylesheet" href="name-display.css" />
+</head>
+
+<body>
+
+  <p id="output">ようこそ！</p>
+
+  <input id="input" type="text" placeholder="名前を入力" />
+  <button id="submit">送信</button>
+
+  <script src="name-display.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/name-display/name-display.js b/public/name-display/name-display.js
new file mode 100644
index 0000000..5180b0e
--- /dev/null
+++ b/public/name-display/name-display.js
@@ -0,0 +1,13 @@
+const input = document.getElementById("input");
+const submit = document.getElementById("submit");
+const output = document.getElementById("output");
+submit.addEventListener("click", () => {
+	if (input.value.trim() === "") {
+		output.innerText = "名前を入力してください";
+		output.style.color = "red";
+	} else {
+		const name = input.value;
+		output.innerText = `こんにちは、${input.value}さん！`;
+		output.style.color = "black";
+	}
+});


Reviews:
user: login: MT-Kohei-Yamada
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-14T10:48:37Z
user: login: Yuta-Fukui
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T02:02:13Z
user: login: Yuta-Fukui
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T05:36:34Z
user: login: Yuta-Fukui
body: LGTM
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-15T08:36:04Z

Review comments:
diff_hunk: @@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>name-display</title>
+  <link rel="stylesheet" href="name-display.css">
path: public/name-display/name-display.html
user: login: MT-Kohei-Yamada
body: ```suggestion
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>name-display</title>
  <link rel="stylesheet" href="name-display.css" />
```
タグを閉じるようにお願いします！
created_at: 2025-05-14T10:28:44Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>name-display</title>
+  <link rel="stylesheet" href="name-display.css">
+</head>
+
+<body>
+  <p id="output">ようこそ！</p>
+  <input id="input" type="text" placeholder="名前を入力">
path: public/name-display/name-display.html
user: login: MT-Kohei-Yamada
body: ```suggestion
  <input id="input" type="text" placeholder="名前を入力" />
```
ここもですね
created_at: 2025-05-14T10:29:01Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,31 @@
+body {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #ffffff;
+  font-family: 'Arial', sans-serif;
+}
+.counter-all {
path: public/counter/counter.css
user: login: MT-Kohei-Yamada
body: ```suggestion
}

.counter-all {
```
ファイル毎で空行あり、なしがあったので、空行ありで統一おねがいします！
created_at: 2025-05-14T10:48:31Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>name-display</title>
+  <link rel="stylesheet" href="name-display.css" />
+</head>
+
+<body>
+  <p id="output">ようこそ！</p>
+  <input id="input" type="text" placeholder="名前を入力" />
+  <button id="submit">送信</button>
+  <script src="name-display.js"></script>
+</body>
path: public/name-display/name-display.html
user: login: Yuta-Fukui
body: 全体的に一つ改行して欲しいです！
created_at: 2025-05-15T02:01:13Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Counter</title>
+  <link rel="stylesheet" href="counter.css" />
+</head>
+
+<body>
+
+  <main class="counter-all">
+
+    <section class="counter-message">
+      <p>
+        現在のカウント: 
+        <span class="number" id="counter">0</span>
+      </p>
+    </section>
+
+    <section>
+      <button id="plus-button">+</button>
+      <button id="minus-button">-</button>
+      <br />
+      <button id="reset-button">リセット</button>
+    </section>
+
+  </main>
+
+<script src="counter.js"></script>
path: public/counter/counter.html
user: login: Yuta-Fukui
body: インデント確認してください
created_at: 2025-05-15T05:36:08Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>name-display</title>
+  <link rel="stylesheet" href="name-display.css" />
+</head>
+
+<body>
+
+  <p id="output">ようこそ！</p>
+
+  <input id="input" type="text" placeholder="名前を入力" />
+  <button id="submit">送信</button>
+
+<script src="name-display.js"></script>
path: public/name-display/name-display.html
user: login: Yuta-Fukui
body: ここも
created_at: 2025-05-15T05:36:30Z
author_association: COLLABORATOR

PR comments:
user: login: Yuta-Fukui
created_at: 2025-05-12T08:54:41Z
body: 一つ目のコンテンツの内容が混ざっていそうです。
一つ目がマージされていない状態で向き先をmainにすると一つ目の分まで含まれてしまいます。

取れる方法としては一つ目をマージするか、むき先を一つ目のブランチにすれば解消するかと思います！
author_association: COLLABORATOR
user: login: taishiro-honda-mt
created_at: 2025-05-13T03:00:30Z
body: Margeの向き先をmainからhtml-introに変更しました。
author_association: OWNER