# Step02: CRUDアプリ構築（課題A 本編）

一覧→検索→詳細の業務アプリをテンプレートなしで作るステップです。docs/お題シート.md の要件を満たすことがゴールです。

## 参考プロンプト

一気に全部を頼むより、動く最小形から積み上げるほうが確実です。

```
dummy_data.csv を読み込んで備品の一覧を表示するアプリを作ってください。
ブラウザで開くだけで動く形にしてください。
表示項目は 備品コード・備品名・カテゴリ・在庫数・保管場所 です。
```

一覧が動いたら検索を足します。

```
備品名の部分一致で一覧を絞り込める検索ボックスを追加してください。
```

最後に詳細ドリルダウンです。

```
一覧の備品名をクリックすると、その備品の全項目（購入日と備考も含む）を
表示する詳細画面を追加してください。詳細から一覧へ戻れるようにしてください。
```

## 比較観点

- 1指示で全部を頼んだ場合と、3段階に分けた場合の完成度と手戻りの差
- 指示に「表示項目」を明記した場合としない場合の出力の差
- 同じ指示でも人によって画面デザインが大きく違うこと

## 詰まったら

- 画面が真っ白: ブラウザの開発者ツール（F12）のエラーをそのままClaude Codeに貼り付けて「このエラーを直してください」と依頼します
- CSVが読み込めない: 「fetchでCSVを読むとローカルでは動かないことがあります。CSVの内容をJavaScriptに埋め込む形にしてください」と伝えます
- 思った画面と違う: 作り直させず「一覧の表の並び順を備品コード順にしてください」のように差分で伝えます
