# 課題A: CRUD業務アプリをテンプレートなしで作る

このフォルダは課題Aの作業フォルダです。Claude Code への指示だけで、一覧・検索・詳細ドリルダウンのある業務アプリをゼロから作ります。

## 目的

- 自然言語の指示だけで動くアプリが立ち上がる体験を通じて、AIコーディングの威力を掴みます
- 完成後にAIへ危険性やWarningを指摘させ、勢いだけで作る限界を自分の目で確認します

## 進め方

1. VSCode でこの kadaiA フォルダを開きます
2. ターミナルで `claude` を起動します
3. `docs/お題シート.md` を開き、作るアプリの要件を確認します
4. `dummy_data.csv` を読み込む形で、一覧→検索→詳細の3画面を Claude Code に作らせます
5. ブラウザで動作を確認します
6. 完成したら、Claude Code に「このアプリの危険な点・曖昧な点・Warningをすべて指摘してください」と依頼します

技術スタックの指定はありません。HTML + JavaScript の単一ファイルでも、Node.js のローカルサーバーでも、動けば正解です。迷ったら「ブラウザで開くだけで動く形にしてください」と添えると、環境構築なしで確認できます。

## 生成物の名前と場所

- この kadaiA フォルダ直下にアプリ一式を生成させてください
- メインの画面ファイルは `index.html`（または起動手順がREADMEに書かれた形）とします
- 元データは `dummy_data.csv`（備品50件）です。移動や削除はしないでください

## OK基準

- 備品の一覧が画面に表示される
- 備品名で絞り込み検索ができる
- 一覧の1件をクリックすると、その備品の詳細（全項目）が表示される
- 詳細から一覧に戻れる

## 発展課題（時間が余ったら）

- カテゴリでの絞り込みを追加する
- 在庫数が少ない備品を目立たせる表示を追加する
- 新規登録・編集・削除（CRUDのC/U/D）を追加する
- 完成後のAIレビューで指摘された点を1つ選び、修正まで依頼する

## つまずいたら

- `hints/step01_first_prompt.md` と `hints/step02_crud_build.md`（handson直下のhintsフォルダ）に参考プロンプトがあります
- 生成が途中で止まったら「続けてください」で再開できます
- 思った画面と違うときは、作り直しではなく「ここをこう変えてください」と差分で伝えると速く直ります
