# Exercise 4：Codex でダッシュボード基礎版を生成（35 min）

## ゴール

`starter/dashboard.html` を起点に Codex と対話し、CSV を読み込んで棒グラフ 1 種類が表示される **基礎版** を完成させる。

## 終了条件

- ブラウザで `starter/dashboard.html` を開いて、`samples/sales-by-region.csv` をドラッグ&ドロップすると棒グラフが表示される
- データテーブル（先頭 10 行）が表示される
- ファイル名と行数・列数が画面に出る
- Day 2 で機能追加できるよう、コードの構造が読み取れる状態になっている

## やること

1. VSCode で `starter/dashboard.html` を開く
2. Codex のサイドパネルを開き、最初の指示を送る

```
このスタートファイルを起点に、CSV をドラッグ&ドロップでアップロードして
棒グラフ 1 種類だけを表示するダッシュボードに仕上げてください。

仕様は output/screen_spec.md に書いた通りです。
ただし今回は最低限の機能のみ実装します。
- グラフ種別の切替・統計量・軸選択は次回（Day 2）に追加するので、今は実装不要
- 棒グラフ 1 種類、データテーブル（先頭 10 行）、ファイル情報（名前・行数・列数）の 3 つだけ
- 既存の CDN（PapaParse / Chart.js）を活用
- 単一ファイルで完結
```

3. Codex の応答を確認し、差分を承認する
4. ブラウザで `starter/dashboard.html` を開いて動作確認
5. うまく動かなければ、Codex に「[症状]」を具体的に伝えて修正依頼

## 補足：バイブコーディングの体験ポイント

ここが「コードを書いた経験がない人が、初めて動くアプリを 30 分で作る」体験の中核です。AGENTS.md にあえて詳細を書いていないのは、受講者自身が「望む状態を AI に伝える」コミュニケーションを実感するためです。

研修中盤以降に `docs/codex-templates/AGENTS.example.md` を取り込むと、Codex の応答が一段階速く・正確になります。その変化を体感することで、「制約を書ききった仕様書」がいかに強力な発注書になるかが分かります。

## つまずいたら

- 「CSV が読み込まれない」 → Codex に「ドラッグ&ドロップ時のイベントハンドラを確認してください」
- 「グラフが描画されない」 → ブラウザの開発者ツール（F12）→ Console タブを見て、エラーメッセージを Codex に貼る
- 「画面が真っ白」 → `<script>` タグの読み込み順を確認。PapaParse → Chart.js → 本体コード の順番
- 「Codex の応答が長すぎて何が変わったか分からない」 → 「変更点だけを 3 行で要約してください」と追加質問

## Tips（実務で効かせるコツ）

- 最初の依頼の最後に **「動かす前に質問があれば 3 つまで聞いてください」** と書くと、AI が前提確認を返してくる。これだけで初稿の品質が大幅に上がる（OpenAI 公式が「reverse interview pattern」と呼ぶ手法）
- 「○○ してください」より「○○ が動く状態にしてください」のほうが結果指向で AI に伝わる
- 動作確認は **必ずブラウザリロード** で。VSCode のプレビューだとキャッシュで古いコードが見えることがある

## 注意

- Codex に「全部書き直して」と頼まない。差分が大きくなりすぎて、何が変わったか追えなくなる
- 動かないコードのままで Day 2 に進まない。動かなければ講師に相談して、必ず動く状態で帰る

## 参考リンク

- [Best practices — OpenAI Codex（2026 年版の正攻法）](https://developers.openai.com/codex/learn/best-practices)
- [Prompting — OpenAI Codex（コード生成向けの構成法）](https://developers.openai.com/codex/prompting)
- [PapaParse 公式ドキュメント](https://www.papaparse.com/docs)
- [Chart.js 公式ドキュメント（4.x 系）](https://www.chartjs.org/docs/latest/)

## 観察ポイント

ここで「動いた瞬間」が研修中の最大の体験です。動いたら必ず周囲と共有してください。明日 Day 2 では、この基礎版に「グラフ種別切替」「軸選択 UI」「基本統計量」を順番に足していきます。