# 発展課題01 カテゴリでの絞り込みを足す

| 項目 | 内容 |
|---|---|
| 対象 | 課題A（自分で作った備品管理アプリ） |
| 目安時間 | 10分から15分 |
| 難易度 | 易 |
| 前提 | [A-1](../exA1_vibe_build.md) で一覧・検索・詳細が動いていること |
| 関連 | [ch02 在庫の少ない備品を目立たせる](ch02_low_stock_highlight.md) |

---

## 目的

既に動いているアプリに、**あとから機能を1つ足します。**

ゼロから作るときと、既にあるものに足すときでは、AI への頼み方が変わります。ゼロから作るときは「こういうものを作って」で通りますが、足すときは「いまあるものを壊さずに」が要件に加わります。この違いを、小さな追加で体験します。

足す機能は、カテゴリでの絞り込みです。`dummy_data.csv` のカテゴリは5種類（PC周辺機器 15件 / 事務用品 12件 / AV機器 8件 / その他 8件 / 家具 7件）あります。

---

## 操作

### 1. いまの状態を確認する

ブラウザで `kadaiA/index.html` を開き、次の3つが動くことを確認してください。この3つが**壊してはいけないもの**です。

- 一覧が50件表示される
- 備品名で絞り込める
- 詳細を開いて、一覧に戻れる

### 2. 追加を依頼する

対象ファイルを指定し、壊してはいけないものを添えて依頼します。

```
@kadaiA の一覧画面に、カテゴリでの絞り込みを追加してください。カテゴリの選択肢は dummy_data.csv のカテゴリ列から自動で作ってください。いまある備品名の検索と、詳細画面への遷移は壊さないでください。
```

「選択肢を自動で作る」と書いた理由は、カテゴリ名を手で書き込ませないためです。手で書くと、データが増えたときに合わなくなります。

### 3. 動作を確認する

次の4つを、実際に操作して確かめてください。

| 確認すること | 期待する結果 |
|---|---|
| カテゴリを1つ選ぶ | そのカテゴリの件数だけ表示される（PC周辺機器なら15件） |
| カテゴリを選んだ状態で備品名を検索する | 両方の条件で絞り込まれる |
| カテゴリの選択を解除する | 50件に戻る |
| 絞り込んだ状態から詳細を開く | 詳細が正しく表示される |

**2番目と4番目が特に大事です。** 追加した機能そのものより、既存の機能との組み合わせで壊れます。

### 4. 壊れていたら、範囲を指定して直させる

```
カテゴリを選んだ状態で備品名の検索をすると、結果が正しくありません。2つの条件が両方効くように直してください。カテゴリの選択肢を作る部分は変更しないでください。
```

---

## 自分で考える

手順2で「いまある検索と詳細は壊さないでください」と添えました。

**この一文を添えなかった場合、どうなったと思いますか。**

実際に試してみてもかまいません。別のフォルダにコピーを作り、一文を抜いた依頼で同じことをさせて、結果を見比べてください。

書き換えられる範囲を指定しないと、AI は「全体をきれいに作り直す」判断をすることがあります。作り直された結果、動くものができることもあります。ただし、**あなたが確認した箇所が確認前の状態に戻ります。**

---

## 生成物の名前と場所

- `handson/kadaiA/index.html`（および関連ファイル。構成は A-1 で作ったものによります）
- `handson/memo.md` の `## 発展課題` に、依頼した文面と結果を2行

作り直しではなく差分で直った場合、変更されたのは数十行のはずです。

---

## OK基準

- カテゴリの選択肢が、データから作られている（手書きの一覧になっていない）
- カテゴリで絞り込むと、件数が正しい
- カテゴリと備品名の検索が、両方同時に効く
- 絞り込んだ状態から詳細を開ける
- 絞り込みを解除すると、50件に戻る

---

## 追加と考察

「壊さないでください」と伝えることには限界があります。伝え忘れれば効きませんし、伝えた範囲しか守られません。

演習Aで配置したハーネスは、この限界を埋めるためのものでした。`CLAUDE.md` の `## してはいけないこと` に書いてあることは、毎回伝え直す必要がありません。**毎回言うことは設定に書き、その場限りのことは依頼に書く。** この振り分けができると、依頼文が短くなります。

もう1つ。この課題では確認項目を4つ挙げました。追加した機能そのものの確認は1つだけで、残り3つは**既存の機能との組み合わせ**の確認です。実務でも、機能追加で壊れるのはたいてい組み合わせのほうです。何を確認するかを先に決めてから依頼すると、確認の抜けが減ります。

---

## 発展課題

カテゴリごとの件数を、選択肢の横に表示してください。

```
カテゴリの選択肢に、それぞれの件数を括弧書きで表示してください。例: PC周辺機器（15）
```

件数は、データから数えて出す必要があります。手で書いた数字が入っていないかを確認してください。データを1件書き換えたら（`dummy_data.csv` は変更禁止なので、確認は頭の中でかまいません）、その数字も変わる作りになっていますか。

---

## 詰まったときは

**カテゴリの選択肢が手書きになっている**

データから作るよう、はっきり伝えてください。

```
カテゴリの選択肢がコードに直接書かれています。dummy_data.csv のカテゴリ列を読んで、重複を除いた一覧から作ってください。
```

**絞り込むと0件になる**

カテゴリ名の比較で、空白や表記が一致していない可能性があります。

```
絞り込みが0件になります。比較しているカテゴリ名の値を確認して、原因を教えてください。まだ直さないでください。
```

**追加したら詳細画面が開かなくなった**

絞り込みの前後で、備品を特定する値が変わっている可能性があります。何を変えたかを聞いてから直させてください。

```
カテゴリ絞り込みを追加してから、詳細画面が開かなくなりました。追加のときに変更した箇所をすべて挙げてください。
```

**そもそも A-1 のアプリが手元にない**

この発展課題は A-1 の続きです。先に [A-1](../exA1_vibe_build.md) を終わらせてください。
