# 課題A 備品管理アプリをゼロから作る

自然言語の指示だけで、一覧・検索・詳細の3つの動きを持つ業務アプリを作ります。テンプレートも雛形もありません。作るのは受講者自身の指示です。

## 最初に入っているもの

このフォルダに置いてあるのは次の3つだけです。

| ファイル | 中身 |
|---|---|
| `README.md` | このファイル |
| `dummy_data.csv` | 備品50件のデータ。カテゴリは5種類 |
| `docs/お題シート.md` | 作る画面の要件 |

アプリ本体（`index.html`）は入っていません。演習の中で自分で作ります。

## 完成イメージ

3つの画面の動きがつながっていれば完成です。見た目は自由です。

```
[一覧画面]  備品50件が表で並ぶ
   │  ├ 検索ボックスに「モニター」と入力 → 一致する行だけに絞り込まれる
   │  └ 備品名をクリック
   ↓
[詳細表示]  その備品の全項目（備品コード / 備品名 / カテゴリ / 在庫数 /
   │        保管場所 / 購入日 / 備考）が見える
   └ 「一覧へ戻る」で一覧に戻れる
```

`index.html` をダブルクリックしてブラウザで開くだけで動く形を目指します。サーバーの起動やライブラリのインストールは不要です。

## 進め方

演習は7つのステップに分かれています。手順の詳細は `exercises/` の各ファイルにあります。所要時間・前提・OK基準の一覧は `exercises/README.md` にまとめてあります。

| ステップ | やること | 手順書 |
|---|---|---|
| A-0 | 設定が1つも無い状態を自分の目で確認する | `exercises/exA0_baseline.md` |
| A-1 | 素の状態でアプリを作る | `exercises/exA1_vibe_build.md` |
| A-2 | 気になる点を自分の言葉で書き出す | `exercises/exA2_concerns.md` |
| A-3 | `_harness_kit/` の設定ファイルを配置する | `exercises/exA3_harness_install.md` |
| A-4 | 実行サマリーの出方を確認する | `exercises/exA4_exec_summary.md` |
| A-5 | `/selfcheck` でパイプラインを回す | `exercises/exA5_pipeline.md` |
| A-6 | 設定の有無で何が変わったかを比較する | `exercises/exA6_compare.md` |

A-1 では1回で全部を頼まず、3〜4回に分けて指示を出します。途中で自分の意図を足せることを体験するためです。

## この課題の決めごと（5項目）

次の5つは変えません。これ以外（配色・レイアウト・技術スタック・検索の細かい挙動）は自由に決めてかまいません。

1. データは `dummy_data.csv` をそのまま使います。書き換えや移動はしません
2. 一覧に備品50件がすべて表示されます
3. 備品名の部分一致で絞り込めます
4. 一覧の1件から詳細表示に切り替わり、一覧に戻れます
5. 生成物は `kadaiA/` 直下にまとめます。メインの画面ファイルは `index.html` とします

課題Bの業務ルール5項目とは別のものです。課題Bの5項目は `kadaiB/README.md` に書いてあり、そちらが仕様の正本です。

## OK基準

- 一覧に備品が **50件** 表示される
- 備品名の一部を入力すると件数が絞り込まれる
- 1件をクリックすると詳細が表示され、一覧に戻れる
- `index.html` をブラウザで開くだけで動く

## 生成物の名前と場所

| 生成物 | 場所 | 作るステップ |
|---|---|---|
| アプリ本体 | `kadaiA/index.html`（CSS や JS を分けた場合も `kadaiA/` 直下） | A-1 |
| 点検の報告書 | `kadaiA/REPORT.md` | A-5（`/selfcheck` が作ります） |
| 比較の記録 | `kadaiA/COMPARE.md` | A-6 |

書き出した気づきは `handson/memo.md` に残します。ステップごとの見出しが最初から切ってあります。

## 発展課題

時間が余ったら `exercises/challenges/` にある発展課題に進みます。課題A向けは ch01 から ch04 の4本です。一覧は `exercises/README.md` にあります。

- `ch01_category_filter.md` カテゴリでの絞り込み
- `ch02_low_stock_highlight.md` 在庫が少ない備品の強調表示
- `ch03_crud_cud.md` 新規登録・編集・削除
- `ch04_csv_export.md` 絞り込み結果のCSV書き出し

## つまずいたら

- `hints/` に参考プロンプトがあります。詰まってから開いてください。先に開くと、自分で考える練習になりません
- 生成が途中で止まったら「続けてください」で再開できます
- 思った画面と違うときは、作り直しではなく「ここをこう変えてください」と差分で伝えるほうが速く直ります
- CSV が読み込めない形になったときは「ブラウザで開くだけで動く形にしてください」と伝え直してください
