# 課題A お題シート 備品管理アプリ

社内の備品を管理する画面を作ります。データは `kadaiA/dummy_data.csv`（備品50件・カテゴリ5種）を使います。

## 画面要件

### 1. 一覧画面

- 全備品を表形式で表示します
- 表示項目は 備品コード / 備品名 / カテゴリ / 在庫数 / 保管場所 の5つです
- 50件すべてが表示されることを確認します

### 2. 検索

- 備品名の部分一致で一覧を絞り込めます
- 検索の入力欄は一覧画面に置きます
- 入力するたびに絞り込む形でも、ボタンを押して絞り込む形でもかまいません

### 3. 詳細表示

- 一覧の備品名をクリックすると、その備品の詳細を表示します
- 表示項目は CSV の全項目（備品コード / 備品名 / カテゴリ / 在庫数 / 保管場所 / 購入日 / 備考）です
- 一覧へ戻る操作を用意します
- 別ページに遷移する形でも、同じページ内で表示を切り替える形でもかまいません

## データ項目の説明

| 列名 | 内容 | 例 |
|---|---|---|
| 備品コード | `EQ-` + 連番4桁。重複はありません | EQ-0001 |
| 備品名 | 備品の名称 | ノートPC 14インチ |
| カテゴリ | PC周辺機器 / AV機器 / 家具 / 事務用品 / その他 の5種類 | PC周辺機器 |
| 在庫数 | 現在の在庫（整数） | 16 |
| 保管場所 | 保管している場所 | 本社3F 保管庫A |
| 購入日 | `yyyy-mm-dd` 形式 | 2023-10-22 |
| 備考 | 補足事項。空欄の備品もあります | 貸出時は台帳へ記入 |

備考が空欄の行がある点は、あとで効いてきます。データの欠けをどう扱うかは、AIが自分で決めてしまう箇所のひとつです。

## 自分で決めてよいこと

- 見た目（配色・レイアウト・フォント）
- 技術スタック
- 検索の細かい挙動（大文字小文字の扱い、空文字を入れたときの表示）
- 詳細表示の見せ方（別ページか、同じページ内での切り替えか）

## 決められていること

- データは `dummy_data.csv` をそのまま使います。書き換えも移動もしません
- 一覧・検索・詳細の3つの動きは必ず入れます
- 生成物は `kadaiA/` 直下にまとめます。メインの画面ファイルは `index.html` とします

## 技術スタックを迷ったとき

指定はありませんが、最初の指示に次の一文を添えることをおすすめします。

```
ブラウザで開くだけで動く形にしてください。
```

この一文が無いと、AIはローカルサーバーの起動が必要な形を選ぶことがあります。ローカルのHTMLから CSV を `fetch` で読むとブラウザの制限で読めないため、AIがサーバー起動を前提にした構成を選ぶのは、その意味では妥当な判断です。指示の一文が環境構築の有無を左右する例として覚えておいてください。

## 完成したかどうかの判定

次の4つがすべて満たされていれば完成です。

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

判定の詳細と、このあとの進め方は `kadaiA/README.md` と `exercises/exA1_vibe_build.md` を見てください。
