# Exercise 2：グラフ種別切替・軸選択の追加（60 min）

## ゴール

棒グラフ 1 種類だった基礎版に、種別切替（棒・折れ線・円）と X 軸／Y 軸のカラム選択 UI を追加する。

## 終了条件

- グラフ上部にセレクトボックスが 3 つ並ぶ（種別／ラベル列／データ列）
- セレクトを切り替えるとグラフが即座に再描画される
- ラベル列にはテキスト系カラム、データ列には数値カラムが選択肢として並ぶ
- 円グラフを選んだ時にもグラフが壊れない

## やること

1. Codex に「グラフ種別切替を追加してください」と依頼

```
現在のダッシュボードに、グラフ種別を切り替えるセレクトボックスを追加してください。
- 棒グラフ／折れ線グラフ／円グラフの 3 種類
- セレクトを変更したら即座に再描画
- 既存の CSV 読み込み機能は変更しない
- 既存の Chart.js インスタンスは destroy してから新規作成する
```

2. 動作確認した上で、次の依頼

```
X 軸（ラベル列）と Y 軸（データ列）を選ぶセレクトを追加してください。
- ラベル列はテキスト系カラムを先頭に、なければ全カラム
- データ列は数値カラムのみ
- どちらを変更してもグラフが再描画される
```

3. 円グラフ表示で色がない場合：「円グラフ用に HSL ベースのカラーパレットを自動生成してください」と追加依頼

## 補足：小さく分割するほど AI 開発は早い

「全部を一度に頼む」と、AI は意図を取り違えやすく、こちらも検証範囲が広がりすぎます。1 つの変更 → 動作確認 → 次の変更、というリズムが速度の鍵です。

これは「TDD（テスト駆動開発）」の精神に近い考え方です。AI の出力を毎ステップ確認することで、検証コストがほぼゼロになります。一括で頼んでバグが出ると、どこが原因か追えなくなります。

## つまずいたら

- 「セレクトを変えても再描画されない」 → addEventListener が忘れられている。Codex に「Change イベントで renderChart を呼び出すバインドを確認してください」
- 「円グラフだけ表示が崩れる」 → Chart.js では円グラフに scales 設定が不要。Codex に「pie の場合は scales を空に」と指示
- 「数値カラムの判定が雑」 → `parseFloat` で `NaN` でない、かつ空文字でない、を両方チェックさせる
- 「グラフが小さい」 → Chart.js の `maintainAspectRatio: false` と親要素の `height` 設定で対応

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

- Chart.js は **destroy せずに再描画すると Canvas にメモリリーク** が起こります。`currentChart.destroy()` を先に呼ぶのは重要
- セレクトボックスの初期値は **「データの型から最も妥当なもの」を自動選択** すると親切。テキスト列の先頭をラベルに、数値列の先頭をデータに
- 「再描画」と「再生成」は別物。データそのものが変わったら再生成（destroy → new Chart）、表示オプションだけ変わったら `chart.update()` で再描画のほうが速い

## 注意

- グラフ種別の切替は CSS で見た目だけ変えるのではなく、Chart.js のインスタンスを作り直すこと
- 円グラフの色を `Array.from({ length: n })` で自動生成する時、`hsl(${i*360/n}, 60%, 50%)` のように Hue を分散させると見やすい

## 参考リンク

- [Chart.js — Configuration（型と再描画）](https://www.chartjs.org/docs/latest/configuration/)
- [Chart.js — Chart Types（pie / bar / line の使い分け）](https://www.chartjs.org/docs/latest/charts/)
- [Best practices — OpenAI Codex（小さく頼む原則）](https://developers.openai.com/codex/learn/best-practices)

## 観察ポイント

機能追加は **小さい単位** で依頼するほど、後戻りが減ります。「全部一気にやって」より「種別切替だけ追加→動作確認→次へ」のリズムを身につけてください。