# 発展課題02 在庫の少ない備品を目立たせる

| 項目 | 内容 |
|---|---|
| 対象 | 課題A（自分で作った備品管理アプリ） |
| 目安時間 | 10分から15分 |
| 難易度 | 易 |
| 前提 | [A-1](../exA1_vibe_build.md) で一覧が動いていること |
| 関連 | [ch01 カテゴリでの絞り込み](ch01_category_filter.md) |

---

## 目的

**「目立たせる」という曖昧な依頼を、判定できる依頼に書き直す**練習をします。

「在庫が少ない備品を目立たせてください」と頼むと、何かしら色が付いたものが返ってきます。ただし、少ないの基準も、目立たせ方も、AI が決めています。あとから「思っていたのと違う」となる典型的な頼み方です。

`dummy_data.csv` の在庫数は1から39まで分布しています。**何個以下を少ないとするかは、あなたが決めることです。** 決めていないことは伝えられません。

---

## 操作

### 1. まず曖昧なまま頼む

比較のために、あえて曖昧な依頼から始めます。

```
@kadaiA の一覧で、在庫が少ない備品を目立たせてください。
```

返ってきた結果を見て、次の2つを確認してください。

- 何個以下を「少ない」と判定していますか
- どういう見た目で目立たせていますか

判定の基準は、コードのどこかに数字で書かれているはずです。探して、`memo.md` に控えてください。

### 2. 基準を自分で決める

在庫がいくつ以下なら補充を検討するか、自分で決めてください。この演習では**5個以下**を推奨します。課題Bの業務ルールと同じ値なので、あとで見比べられます。

### 3. 判定できる形に書き直して頼む

```
@kadaiA の一覧で、在庫数が5個以下の備品の行に「要補充」という文字を表示してください。5個ちょうども含みます。色を使う場合は、赤と緑の組み合わせは避けて、同じ色の濃さの違いで区別してください。
```

赤と緑を避ける理由は、色の見え方に個人差があるためです。**色だけで意味を伝えると、伝わらない人が出ます。** 文字を添えれば、色が見えなくても伝わります。

### 4. 境目を確認する

在庫が5個ちょうどの備品と、6個の備品を探して、表示を見比べてください。

| 在庫数 | 期待する表示 |
|---|---|
| 4個以下 | 要補充が出る |
| 5個ちょうど | 要補充が出る |
| 6個以上 | 出ない |

**5個ちょうどが最も間違えやすい箇所です。** 「以下」と「未満」を書き間違えると、ここだけずれます。課題Bでも同じ間違いが仕込まれています。

---

## 自分で考える

手順1の曖昧な依頼で、AI は何個以下を「少ない」と判定していましたか。

**その数字は、どこから来たと思いますか。**

あなたは伝えていません。データを見て決めたのか、一般的な値を置いたのか、聞いてみてください。

```
在庫が少ないと判定する基準の数字は、何を根拠に決めましたか。
```

決めた根拠が「一般的にそうだから」であれば、**あなたの職場の基準とは無関係な数字**が入っていることになります。動いているので気づきません。この種の「勝手に決められた前提」が、あとで問題になります。

---

## 生成物の名前と場所

- `handson/kadaiA/index.html`（および関連ファイル）
- `handson/memo.md` の `## 発展課題` に、曖昧な依頼で入った基準値と、自分で決めた基準値の2つ

---

## OK基準

- 在庫5個以下の備品に「要補充」の文字が出る
- 5個ちょうどの備品にも出る
- 6個の備品には出ない
- 色だけでなく文字でも判別できる
- 赤と緑の組み合わせを使っていない

---

## 追加と考察

このやり方には名前が付いています。**境界値の確認**です。4と5と6を見る、という単純な作業ですが、間違いはここに集中します。

AI に書かせたコードを確認するとき、全部を読み直す必要はありません。**判定の境目だけを見る**と決めておくと、短い時間で効果が出ます。今回なら「5個以下」の1か所です。

もう1点、手順1と手順3の依頼文を見比べてください。長さはほとんど変わっていません。違うのは、**判定できることが書いてあるかどうか**だけです。

- 曖昧: 在庫が少ない備品を目立たせて
- 判定できる: 在庫5個以下の行に「要補充」と表示して。5個ちょうども含む

後者は、できたかどうかを人が確認できます。前者は確認できません。**依頼文の良し悪しは、確認できるかどうかで決まります。**

---

## 発展課題

在庫の少ない順に並べ替える機能を足してください。

```
一覧を在庫数の少ない順に並べ替えられるようにしてください。並べ替えても、カテゴリや備品名での絞り込みは効いたままにしてください。
```

並べ替えたあと、絞り込みを変えると並び順はどうなりますか。**並べ替えと絞り込みは、どちらを先に適用するかで結果が変わります。** どちらが自然かを自分で決めて、そのとおりになっているか確認してください。

---

## 詰まったときは

**5個ちょうどに表示が出ない**

「以下」で判定するよう明示してください。

```
在庫5個ちょうどの備品にも要補充が出るようにしてください。5個未満ではなく、5個以下です。
```

**色が付いたが、どの行かわかりにくい**

行全体ではなく、在庫数の欄だけに印を付ける形に変えてください。

```
行全体の色を変えるのをやめて、在庫数の欄の隣に「要補充」の文字を出す形にしてください。
```

**赤と緑で表示された**

配色を指定して直させてください。

```
赤と緑の組み合わせをやめてください。文字の太さと、同じ色の濃さの違いで区別してください。
```

**在庫数が文字として扱われていて、並べ替えがおかしい**

在庫数が数値ではなく文字列で読み込まれている可能性があります（10より9が大きいと判定されるなど）。

```
在庫数が数値として扱われているか確認してください。文字列になっている場合は数値に変換してください。
```
