Day 4 - 本日のサマリー: 分離して「実装」する1日
概要
- 日程: Day 4
- 本日のゴール: Day3までの成果物をもとに（条件）、情報の設計とシステムの設計、プレゼンテーションと機能を分離した構成で（条件）、モックAPIとそれを呼び出すUIを実装して動作をデモできる（行動）。確認テストで8割以上正解する（基準）
- 対応する到達目標: No.4, No.5（総仕上げとして No.1〜6 全体）
- 本日の成果物: 動作するモックAPIとUI（ソースコード一式）、成果発表資料（KPT含む）、確認テスト結果と復習メモ
🧭 今日の航海図（なぜ・なにを・どこへ）
3日間かけて作ってきた情報定義書・情報モデル・API設計書は、すべて今日のためにあります。今日はコードを書きますが、目的は「動くもの」だけではなく、「情報の設計とシステムの設計」「プレゼンテーションと機能」を分離したまま作り切ることです。午前にモックAPI（機能側）とUI（プレゼンテーション側）を分けて組み上げ、午後に仕上げ・発表・確認テストで4日間を締めくくります。夕方には、自分の設計書どおりに動くソフトウェアと、それを説明できる自分がいます。
⏱ 今日の流れ
| 時間 | セッション | 形式 | このセッションで手に入るもの |
|---|---|---|---|
| 9:00-9:30 | 実装の進め方 分離の設計図 | 座学 | Day1〜3の成果物と実装の対応マップ |
| 9:30-10:30 | モックAPIを作って動かす | 実習 | JSONを返すモックAPI（機能側の土台） |
| 10:45-12:00 | UIからAPIを呼び出す | 実習 | APIのデータを一覧表示するUI |
| 13:00-14:00 | 開発テーマの実装仕上げ | 実習 | 主要ユースケースが通しで動くアプリ |
| 14:00-14:45 | 成果発表資料作成とデモ | 演習 | 成果発表資料（KPT含む）と発表経験 |
| 15:00-15:30 | 確認テスト実施 | 演習 | 4日間の理解の穴リスト |
| 15:30-16:00 | 不正解項目の復習 | 演習 | 不正解項目を自分の言葉で説明できる状態 |
午前は手を動かして組み上げ、午後は仕上げ→発表→テスト→復習と、作る・話す・確かめるを一気に回す1日です。
🎯 今日の成果物
夕方には、ブラウザで一覧画面を開くと GET /expenses が呼ばれてJSONが表に描画され、登録フォームから POST すると一覧が増える——そんな「設計書どおりに動く」アプリと、GitHubに置かれたソースコード、KPT入りの発表資料が手元にあります。完成度よりも「分離が保たれていること」が今日の勝利条件です。
⚠️ 今日のつまずきポイント
- 環境まわりのエラーで最初に止まる: json-serverが起動しない、CORSエラーが出る、HTMLをfile://で直接開いて失敗する——実装初日の定番です。全員が一度は踏むので焦らなくて大丈夫。エラーメッセージをそのままAIに貼れば、ほとんどは数分で解決します。
- 描画コードにURLや計算ルールが混ざって分離が崩れる: 動かすことに夢中になると、画面描画の関数の中にAPIのURLや業務ルールを書きがちです。「このコードはプレゼンテーション？機能？」と自分に問いながら進めましょう。崩れに気づいて直すこと自体が、今日一番の学びです。
🤖 今日のAIの使いどころ
- まず自分でコードを書いて動かし、エラーが出たら「json-serverでこのエラーが出た（メッセージを貼る）。原因の候補を教えて」と切り分けを頼む
- 発表前に「あなたは聴衆です。このKPTと構成説明を聞いて、質問を3つして」と質疑応答の練習相手になってもらう
コードを丸ごと書いてもらうのではなく、自分の設計書をもとに書き、詰まった箇所だけ聞く——4日間の総仕上げとして、この使い方を貫きましょう。