# Exercise 3：基本統計量・スタイル仕上げ（60 min）

## ゴール

数値カラムに対して基本統計量（平均・中央値・最大・最小・標準偏差）を表示し、画面全体のスタイルを整える。

## 終了条件

- 数値カラムごとに統計量がテーブル表示される
- グラフの下に表示位置がある（縦並びでもタブでも可）
- 数値は日本の桁区切り（カンマ区切り）でフォーマットされる
- 全体の見た目が白背景・ネイビーアクセントで統一されている
- モバイル幅（768px 以下）で 1 カラムに崩れる

## やること

1. Codex に統計量機能を追加

```
数値カラムに対して基本統計量を表示するテーブルを追加してください。
- 列：カラム名 / 平均 / 中央値 / 最大 / 最小 / 標準偏差
- 計算は JavaScript 内で。標準偏差は母分散ベース（n で割る）で計算
- 数値は日本のロケール（toLocaleString('ja-JP')）でカンマ区切り表示
- 表示位置はグラフの下
```

2. データプレビューテーブル（CSV の先頭 10 行）を追加

```
読み込んだ CSV の先頭 10 行をプレビュー表示するテーブルを追加してください。
- ヘッダはネイビー背景・白文字
- 偶数行に薄いグレー背景
- 横スクロール可
```

3. スタイル仕上げ

```
全体のスタイルを以下に整えてください。
- 白背景、ネイビーアクセント（#1e3461）
- 余白を整え、各セクションの境界を薄いボーダーで区切る
- フォント：'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif
- レスポンシブ：モバイル幅 768px 以下では各セクションが 1 カラムに
- 絵文字は使わない
```

4. 完成版を `output/dashboard.html` にコピー（または保存）

## 補足：統計量の計算は AI のミスが多い領域

平均は簡単ですが、中央値（ソート → 中央 1 つまたは 2 つの平均）と標準偏差（母分散か不偏分散か）は AI が間違えやすい計算です。「母分散ベース（n で割る）」と明示すると、想定と違う計算式になるのを防げます。

不偏分散（n-1 で割る）と母分散（n で割る）はサンプルサイズが大きい時はほぼ同じ値になりますが、研修で扱う 10〜50 行程度のサンプルでは数値が変わります。出てきた数を Excel と一致させたい場合は、Excel が使う `STDEV.P`（母分散）か `STDEV.S`（不偏分散）のどちらかを明示します。

## つまずいたら

- 統計量の値がおかしい → CSV にカンマ区切りの数字があると parseFloat で先頭しか読まれない。Codex に「カンマを除去してから parseFloat に渡してください」
- レスポンシブが効かない → `@media` クエリの単位が px か em か確認
- 完成版とずれている → `completed/dashboard.html` を見ても OK。ただし完コピは禁止。比較して、必要な差分だけ取り込む
- 「`NaN` が表示される」 → 空文字や非数値が混入。`isFinite()` チェックを入れさせる

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

- 「日本のロケール」は `toLocaleString('ja-JP', { maximumFractionDigits: 2 })` のように **小数点桁数を制限** すると見やすい
- 統計量テーブルは数値カラムが多い CSV ほど効く。地域別売上の CSV（売上・利益・件数・新規顧客数）なら 4 行表示される
- カラム名のヘッダはセル内改行を避けるため `white-space: nowrap` を当てると見栄えが良い

## 注意

- スタイル仕上げの依頼で「もっとモダンに」「カッコよく」と書くと AI は際限なく装飾を増やす。具体的に「色を 2 色」「ボーダー幅 1px」と数値で縛る
- レスポンシブは PC ブラウザでウィンドウ幅を狭めて確認できる。実機で確認しなくても OK

## 参考リンク

- [MDN — Number.prototype.toLocaleString](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)
- [MDN — レスポンシブデザインの基礎](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)
- [Chart.js — Responsive Charts](https://www.chartjs.org/docs/latest/configuration/responsive.html)

## 観察ポイント

ここまで来ると、Codex への依頼が **自然な日本語の業務指示** に近づいているはずです。「コードを書く」ではなく「望む状態を伝える」スキルが、研修後の実務で最も効きます。