# 発展課題 1：フィルタ機能の追加

## ゴール

データの一部だけをグラフに反映するフィルタ UI を追加する。

## 完成イメージ

- カラムを選んで「値が ○○ と等しい行だけ」表示
- カラムが数値なら「○○以上」「○○以下」のフィルタも掛けられる
- フィルタを外せば元に戻る

## Codex への指示例

```
データテーブルの上にフィルタ UI を追加してください。
- カラムを 1 つ選ぶセレクトと、条件値を入力するテキストボックス
- カラムが数値型なら「以上」「以下」「等しい」、文字列型なら「等しい」「含む」の比較演算子を選択可能に
- フィルタを変更したらグラフと統計量も再計算
- 「フィルタ解除」ボタンで元の全データに戻す
```

## 補足：フィルタ機能はビジネスインテリジェンスの基本

実務でダッシュボードを使う時、最初の表示よりも「特定の条件で絞り込んだ後」のほうが価値が出ます。Tableau や Looker などの BI ツールはこの「絞り込み・ピボット・再集計」のサイクルを高速で回すために生まれました。

シンプルなフィルタを 1 つ作れると、ユーザーが自分で意味のある問いを立てられるようになります。「東京の支店だけで見たい」「先月の利益が 100 万円以上の取引だけ見たい」のような掘り下げが、コードを書かずにできるようになります。

## つまずきポイント

- フィルタ後のデータでグラフを再描画していない → renderChart の引数を data から filteredData に変更
- 数値カラムの比較で文字列比較になっている → parseFloat してから比較
- 統計量が再計算されない → renderStats も filteredData ベースで呼ぶ
- フィルタ解除時に元データが戻らない → 元データを `originalData` のような別変数で保持しておく

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

- フィルタ条件は **複数同時に AND で合成** できると一気にプロ仕様になる。配列で条件を保持して、すべて満たす行だけ通す
- 数値の「以上 / 以下」の境界値はユーザーに分かりやすい単位で表示（10000 ではなく「1 万」）
- フィルタ後の行数を表示すると、絞り込みの効果が見える

## 注意

- フィルタ後に 0 行になった時に画面が真っ白にならないよう、空状態のメッセージを出す
- 列が増えた CSV でも動くよう、ハードコードしないこと

## 参考リンク

- [Tableau — Filtering（業界標準のフィルタ UX）](https://help.tableau.com/current/pro/desktop/en-us/filtering.htm)
- [MDN — Array.prototype.filter](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)