Kurihara phase2 day8

docs/ipo_card_template.md

@@ -11,13 +11,13 @@
 
 ## IPOカード
 
-### 機能名: ＿＿＿＿＿＿＿＿＿＿
+### 機能名: ＿＿＿＿返答処理＿＿＿＿＿＿
 
 | 項目 | 内容 |
 |------|------|
-| **Input (きっかけ)** | ユーザーが何を入力し、何をするか？ |
-| **Process (裏側の処理)** | サーバーは何を受け取り、DBに何を保存/削除するか？ |
-| **Output (結果)** | 処理後、画面はどう変化し、データはどうなっているか？ |
+| **Input (きっかけ)** | ユーザーは時間に応じた挨拶をインプット
+| **Process (裏側の処理)** | サーバーは言葉を受け取り、現在時刻に応じた挨拶文を生成する
+| **Output (結果)** | 時間帯に応じた挨拶文を返す
 
 ---
 

docs/phase2/00_overview.md

@@ -0,0 +1,116 @@
+# Phase 2: Webアプリの3層構造を体感する
+
+## 目的
+
+**データがどこにあり、どう流れるかを体感する。**
+Phase 1で体験した「消えるデータ」の問題を、Client → Server → Database と層を1つずつ追加しながら解決していく。
+
+コードの実装はAIが行う。人間がやることは以下の4つ。
+
+1. **IPOカードをAIに渡してコードを生成させる** — 教材のIPOカードをコピーしてAIに渡す
+2. **生成されたファイルを確認する** — どのファイルがどの層に対応するかを理解する
+3. **実験を実施する** — 教材の手順に従い、データの挙動を観察する
+4. **実験レポートを書く** — 観察した結果を自分の言葉で記録する
+
+---
+
+## 全体像: 3層構造とデータの流れ
+
+```
+┌─────────────────┐        ┌─────────────────┐        ┌─────────────────┐
+│     Client      │  HTTP  │     Server      │  ORM   │    Database     │
+│    (ブラウザ)    │ ────► │    (Node.js)    │ ────► │    (SQLite)     │
+│                 │ ◄──── │                 │ ◄──── │                 │
+├─────────────────┤        ├─────────────────┤        ├─────────────────┤
+│ 確認: F12       │        │ 確認: ターミナル │        │ 確認: Prisma    │
+│ 編集: HTML/JS   │        │ 編集: server.js  │        │   Studio/DBファイル│
+└─────────────────┘        └─────────────────┘        └─────────────────┘
+```
+
+Phase 2では、この3層を **1日1層ずつ** 追加して理解する。
+
+| Day | 層の構成 | 学ぶこと |
+|-----|---------|---------|
+| Day 6 | **Client のみ** | データはブラウザの中にある |
+| Day 7 | **Client + Server** | データをサーバーに送れる |
+| Day 8 | **Client + Server + DB** | データをDBに保存できる（Create） |
+| Day 9 | **全層を往復** | DBのデータを画面に表示できる（Read） |
+| Day 10 | **永続化の証明** | 再起動してもデータが残る |
+
+---
+
+## 開発環境の準備
+
+Phase 2を始める前に、以下の環境を整える。Windows の WSL（Ubuntu）上で作業する。
+
+### 1. WSL + VS Code の確認
+
+VS Code がインストール済みであること。WSL 内のフォルダを VS Code で開いて作業する。
+
+1. VS Code の拡張機能「**WSL**」（Microsoft製）がインストールされていることを確認する
+2. WSL のターミナルを開き、作業フォルダで `code .` を実行すると VS Code が WSL に接続して開く
+3. VS Code 内のターミナル（`Ctrl + `` `）は WSL のシェルになる — ここでコマンドを実行する
+
+### 2. Node.js の確認
+
+WSL のターミナルで以下を実行し、バージョンが表示されることを確認する。
+
+```bash
+node -v
+# v20.x.x のように表示されればOK
+```
+
+表示されない場合は、nodenv でインストールする（講師に確認すること）。
+
+### 3. npm の確認
+
+```bash
+npm -v
+# 10.x.x のように表示されればOK
+```
+
+> npm は Node.js と一緒にインストールされる。パッケージ（ライブラリ）を管理するツール。
+
+### 4. ブラウザの開発者ツール
+
+Windows 側の Google Chrome を使う。以下を確認する。
+
+1. Chrome を開く
+2. **F12キー** を押す → 開発者ツールが開く
+3. **Console タブ** をクリック → ここにブラウザ側のログが表示される
+
+> WSL で起動したサーバー（`http://localhost:3000`）には、Windows 側のブラウザからそのままアクセスできる。
+
+### 5. 作業ディレクトリの準備
+
+```bash
+# 自分のPhase 2フォルダに移動（名前は自分のものに変える）
+cd members/[あなたの名前]/phase2_web
+```
+
+---
+
+## Phase 2 チェックリスト
+
+| Day | テーマ | 層の構成 | 実験レポート | 完了 |
+|-----|-------|---------|------------|------|
+| Day 6 | データはブラウザの中にある | Client | `day6_report.md` | [ ] |
+| Day 7 | データをサーバーに送る | Client + Server | `day7_report.md` | [ ] |
+| Day 8 | データをDBに保存する | Client + Server + DB | `day8_report.md` | [ ] |
+| Day 9 | DBのデータを画面に表示する | Client + Server + DB | `day9_report.md` | [ ] |
+| Day 10 | 永続化の証明 & 総まとめ | 全体まとめ | `day10_report.md` | [ ] |
+
+---
+
+## 次のPhaseへ
+
+Phase 2を完了したあなたは、以下を学びました。
+
+- **3層構造** — Client / Server / Database の役割と場所
+- **データの流れ** — 書き込み（Client → Server → DB）と読み取り（DB → Server → Client）
+- **永続化** — データベースを使えばデータは消えない
+- **ファイルとレイヤーの対応** — どのファイルを編集すると、どこが変わるか
+
+Phase 3では、**チーム開発** の作法を学びます。
+複数人で同じコードを編集するとき、どうやって衝突を避けるか？
+Gitのブランチ、プルリクエスト、コンフリクト解決を体験します。

docs/phase2/day06_client_only.md

@@ -0,0 +1,119 @@
+# Day 6: Client のみ — データはブラウザの中にある
+
+## 学習目標
+
+- データが「ブラウザの中（JavaScriptの変数）」に存在することを理解する
+- F12（開発者ツール）の Console でデータを確認する方法を覚える
+- ページを更新するとデータが消えることを体験する（Phase 1と同じ揮発性）
+
+## ファイル構成とレイヤーの対応
+
+```
+day6_client_only/
+└── index.html    ← これが Client（ブラウザ）で動く唯一のファイル
+```
+
+| ファイル | レイヤー | 確認場所 | 役割 |
+|---------|---------|---------|------|
+| `index.html` | Client（ブラウザ） | F12 Console | 画面表示、ユーザー操作の受付、データの一時保存 |
+
+> Day 6ではサーバーもDBも使わない。HTMLファイルをブラウザで直接開くだけ。
+
+## AIへのプロンプト（IPOカード形式）
+
+以下のIPOカードをコピーしてAIに渡し、コードを生成させる。
+
+> **IPOカード — Day 6: Client のみ（メッセージボード）**
+>
+> | 層 | Input (きっかけ) | Process (処理) | Output (結果) |
+> |----|-----------------|---------------|--------------|
+> | **Client** | ユーザーがメッセージを入力し「追加」ボタンをクリック | JavaScript が入力値を受け取り、配列（messages）に追加する | 画面のリストにメッセージが表示される。Console にデータが出力される |
+>
+> **ファイル構成:**
+> - `day6_client_only/index.html`（Client層）— これ1ファイルだけ
+>
+> **仕様:**
+> - `index.html` 1ファイルだけで動くメッセージボード
+> - テキスト入力欄と「追加」ボタンがある
+> - メッセージを追加すると画面のリストに表示される
+> - データはJavaScript の配列（`messages`）に保存する
+> - メッセージを追加するたびに `console.log` で配列の中身を出力する
+> - ログには `[CLIENT]` プレフィックスをつける
+>
+> **データの流れ:**
+> ```
+> ユーザー入力 → [Client: JavaScript の配列に追加] → 画面のリストに表示
+>                            ↓
+>                     F12 Console で確認
+> ```
+
+## 準備・実行
+
+### プロジェクト準備
+
+```bash
+mkdir -p day6_client_only
+```
+
+> Day 6では `npm` は使わない。HTMLファイル1つだけで動く。
+
+### 実行方法
+
+サーバーは不要。HTMLファイルをブラウザで直接開く。
+
+**ブラウザで `index.html` を開く手順:**
+
+1. Windows のエクスプローラーのアドレスバーに `\\wsl$\Ubuntu` と入力して Enter
+2. WSL 内の作業フォルダまで移動する（`home/[ユーザー名]/...`）
+3. `day6_client_only/index.html` を見つける
+4. ファイルを右クリック → **プログラムから開く** → **Google Chrome** を選択
+
+> WSL のターミナルから `explorer.exe .` を実行すると、カレントディレクトリをエクスプローラーで開くこともできる。
+
+## ファイルの確認
+
+AIがコードを生成したら、以下を確認する。
+
+- [ ] ファイルは `index.html` の1つだけか？
+- [ ] データの保存先は JavaScript の配列（変数）か？
+- [ ] `console.log` で `[CLIENT]` プレフィックス付きのログが出るか？
+- [ ] サーバーやデータベースのコードは含まれていないか？
+
+## 実験
+
+### 実験1: メッセージを追加する
+
+1. ブラウザで `index.html` を開く
+2. **F12キー** → **Console タブ** を開く
+3. メッセージを3つ追加する
+4. **Console に `[CLIENT]` のログが表示されることを確認する**
+5. ログの中の配列データを見て、3件のメッセージが入っていることを確認する
+
+### 実験2: ページを更新する（F5）
+
+1. メッセージを3つ追加した状態で、Console でデータが3件あることを確認する
+2. **ブラウザのページを更新する（F5キー）**
+3. 画面とConsole を確認する
+
+## 実験レポート
+
+`day6_report.md` として保存し、コミットすること。
+
+```
+実験1: メッセージを追加する
+  F12 Console に表示されたログ:（実験後に書く）
+  画面の変化:（実験後に書く）
+
+実験2: ページを更新する（F5）
+  予想:（実験前に書く — ページを更新したらデータはどうなると思うか？）
+  結果:（実験後に書く — 何が起きたか、画面とConsoleに何が表示されたか）
+  わかったこと:（なぜそうなったかの考察）
+```
+
+## 完了条件
+
+- [ ] `index.html` だけでメッセージボードが動作する
+- [ ] F12 Console でデータ（配列の中身）を確認できた
+- [ ] ページ更新後にデータが消えることを確認した
+- [ ] 実験レポート（`day6_report.md`）を提出した
+- [ ] コミット＆プッシュ完了

docs/phase2/day07_client_server.md

@@ -0,0 +1,140 @@
+# Day 7: Client + Server — データをサーバーに送る
+
+## 学習目標
+
+- Client（ブラウザ）から Server（Node.js）にデータを送る方法を学ぶ
+- データが **2つの場所**（F12 Console と ターミナル）に現れることを確認する
+- `fetch` によるHTTP通信の基本を理解する
+
+## ファイル構成とレイヤーの対応
+
+```
+day7_client_server/
+├── server.js          ← Server（Node.js）: ターミナルで動く 【Day 7 で新規追加】
+├── package.json       ← npm の設定ファイル（npm init で自動生成）
+└── public/
+    └── index.html     ← Client（ブラウザ）: ブラウザで動く
+```
+
+| ファイル | レイヤー | 確認場所 | 役割 |
+|---------|---------|---------|------|
+| `public/index.html` | Client（ブラウザ） | F12 Console | ユーザー操作の受付、サーバーへのデータ送信 |
+| `server.js` | Server（Node.js） | VS Code ターミナル | Client からのデータ受信、データの一時保存 |
+
+> Day 6 と比べて、`server.js` が追加された。データの流れが Client → Server に広がる。
+
+## AIへのプロンプト（IPOカード形式）
+
+以下のIPOカードをコピーしてAIに渡し、コードを生成させる。
+
+> **IPOカード — Day 7: Client + Server（メッセージ送信）**
+>
+> | 層 | Input (きっかけ) | Process (処理) | Output (結果) |
+> |----|-----------------|---------------|--------------|
+> | **Client** | ユーザーがメッセージを入力し「送信」ボタンをクリック | JavaScript が入力値を取得し、`fetch` で Server（`POST /api/messages`）にデータを送信する | Console に送信ログが表示される。画面に「送信しました」と表示される |
+> | **Server** | Client から `POST /api/messages` でメッセージデータ（JSON）を受け取る | 受け取ったデータをターミナルに表示し、配列に保存する | Client に `{ success: true }` をJSONで返す |
+>
+> **ファイル構成:**
+> - `day7_client_server/public/index.html`（Client層）
+> - `day7_client_server/server.js`（Server層）
+>
+> **server.js の仕様:**
+> - Express を使った Node.js サーバー（ポート3000）
+> - `public/` フォルダの静的ファイルを配信する
+> - `POST /api/messages` エンドポイント: Client からメッセージ（JSON）を受け取り、サーバーの配列に保存する
+> - 受信時に `console.log` でデータを表示する（`[SERVER]` プレフィックス）
+> - 成功時に `{ success: true }` を返す
+>
+> **public/index.html の仕様:**
+> - テキスト入力欄と「送信」ボタンがある
+> - ボタンをクリックすると `fetch` で `POST /api/messages` にデータを送信する
+> - 送信前後に `console.log` でログを出す（`[CLIENT]` プレフィックス）
+> - 送信完了後、画面に「送信しました」と表示する
+>
+> **データの流れ:**
+> ```
+> ユーザー入力 → [Client: fetch POST で送信] → [Server: データを受信、配列に保存]
+>                      ↓                                  ↓
+>               F12 Console で確認                VS Code ターミナルで確認
+> ```
+
+## 準備・実行
+
+### プロジェクト準備
+
+```bash
+mkdir -p day7_client_server
+cd day7_client_server
+npm init -y
+npm install express
+```
+
+> `npm init -y` で `package.json` が作られる。`npm install express` で Express（Webサーバーのライブラリ）がインストールされる。
+
+### 実行方法
+
+```bash
+node server.js
+```
+
+ブラウザで `http://localhost:3000` を開く。
+
+> Day 6 と違い、HTMLファイルを直接開くのではなく、サーバー経由でアクセスする。
+
+## ファイルの確認
+
+AIがコードを生成したら、以下を確認する。
+
+- [ ] `server.js` と `public/index.html` の2ファイルがあるか？
+- [ ] `server.js` は Server レイヤー（ターミナルで動く）のコードか？
+- [ ] `public/index.html` は Client レイヤー（ブラウザで動く）のコードか？
+- [ ] Client は `fetch` でサーバーにデータを送っているか？
+- [ ] Server は `console.log` で受信データを表示しているか？
+- [ ] データベース関連のコードは含まれていないか？
+
+## 実験
+
+### 実験1: メッセージを送信する
+
+1. **ターミナル** で `node server.js` を実行
+2. **ブラウザ** で `http://localhost:3000` を開く
+3. **F12キー** → **Console タブ** を開く
+4. メッセージを入力して「送信」をクリック
+5. **2つの場所でログを確認する:**
+
+| 確認場所 | 表示されるログ | 意味 |
+|---------|--------------|------|
+| ブラウザの F12 Console | `[CLIENT] ...` | Client（ブラウザ）側の処理 |
+| VS Code のターミナル | `[SERVER] ...` | Server（Node.js）側の処理 |
+
+### 実験2: サーバーを再起動する
+
+1. メッセージを3つ送信する
+2. ターミナルでデータが3件保存されていることを確認する
+3. ターミナルで **Ctrl+C** を押してサーバーを停止する
+4. `node server.js` でサーバーを再起動する
+5. ターミナルを確認する
+
+## 実験レポート
+
+`day7_report.md` として保存し、コミットすること。
+
+```
+実験1: メッセージを送信する
+  F12 Console に表示されたログ:（実験後に書く）
+  ターミナルに表示されたログ:（実験後に書く）
+  なぜログが2か所に表示されるか:（考察を書く）
+
+実験2: サーバーを再起動する
+  予想:（実験前に書く — サーバーを再起動したらデータはどうなると思うか？）
+  結果:（実験後に書く — ターミナルに何が表示されたか、以前のデータはあるか）
+  わかったこと:（なぜそうなったかの考察。Day 6 との共通点は何か）
+```
+
+## 完了条件
+
+- [ ] Client から送信したデータが Server のターミナルに表示される
+- [ ] `[CLIENT]` ログと `[SERVER]` ログが別の場所に出ることを確認した
+- [ ] サーバー再起動後にデータが消えることを確認した
+- [ ] 実験レポート（`day7_report.md`）を提出した
+- [ ] コミット＆プッシュ完了