# step02 素の状態で業務アプリを作る

対応する演習ステップ: A-1 素の状態で CRUD 業務アプリを作る [15min]
対応する演習md: `exercises/exA1_vibe_build.md`
VSCode で開くフォルダ: `handson`

このファイルは、手が止まったときに開く補助資料です。プロンプトは丸写しで構いませんが、そのあとの「なぜその形か」まで読むと、明日から自分の言葉で書けるようになります。

---

## 参考プロンプト

1回で全部を頼まず、3回に分けます。1回目は一覧だけです。

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

生成が終わったら、`kadaiA/index.html` をブラウザで開いて、50件並んでいることを目で確かめます。確かめてから2回目を送ります。

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

3回目で詳細表示を足します。

```
一覧の備品名をクリックすると、その備品の全項目（購入日と備考も含む）が見える詳細表示に切り替わるようにしてください。
詳細から一覧に戻れるようにもしてください。
```

見た目が崩れていたら、4回目は差分で伝えます。作り直させないでください。

```
表の列幅がそろっていません。ヘッダー行を固定して、行を1行おきに薄く色分けしてください。
```

## なぜその形か

「ブラウザで開くだけで動く形にしてください」の一文が、このステップでいちばん効いています。この一文が無いと、AI はローカルの HTML から CSV を読み込む方法を素直に選び、ブラウザの制限で読めない作りになることがあります。その結果、サーバーを起動する手順が増えて、15分では終わりません。環境の前提を1行添えるだけで、生成物の形が変わります。

指示を3回に分けるのは、途中で自分の意図を足せるようにするためです。1回で全部を書くと、出てきたものが思っていたのと違ったときに、どの一文が効かなかったのか切り分けられません。動く最小形を先に作り、そこへ足していく順番だと、壊れた瞬間が特定できます。

表示項目を明記しているのは、`dummy_data.csv` に7項目あるうち、一覧に出すのは5項目と決めているからです。書かないと AI は全項目を並べます。間違いではありませんが、一覧が横に長くなり、詳細画面を足す意味が薄れます。

4回目を「作り直してください」ではなく差分で伝えるのは、いま動いているものを壊さないためです。作り直させると、さっき通った検索が消えることがあります。

## 比較観点

- 1回で全部を頼んだ場合と、3回に分けた場合。どちらが自分の意図に近いものになりましたか。手戻りの回数はどうでしたか。時間が余ったら、`/clear` で文脈を消してから1回で全部を頼み、比べてみてください。
- 「ブラウザで開くだけで動く形にしてください」を書いた場合と書かない場合。生成されるファイルの構成が変わります。
- 隣の受講者の画面と自分の画面。配色も列の並びもレイアウトも違うはずです。お題シートで決まっているのは動きだけで、見た目は決めていません。同じ指示から違うものが出ることは、この段階では失敗ではありません。ただし、これが5人のチームで起きると、レビューのたびに前提をそろえ直す作業が発生します。その解き方が A-3 以降です。

## よくある勘違い

- 「50件出ていないのは AI の失敗」。まず自分のブラウザを再読込してください。生成の途中でファイルを開いた場合、古い内容が表示されたままになります。それでも件数が合わないときは、`一覧に表示されている件数を数えて、dummy_data.csv の行数と一致しているか確認してください。` と送ると、AI 自身に照合させられます。
- 「一度作らせたら、あとは自分で直すほうが速い」。1行の修正ならそのとおりです。ただし本研修では、差分で伝える練習も含めて AI に頼んでください。伝え方の精度が上がると、社内で使うときの速度が変わります。
- 「CSV を書き換えれば表示は直る」。`dummy_data.csv` は書き換えません。元データは触らず、表示側で調整します。設定ファイルを配置したあとは、この禁止が `.claude/settings.json` で明示的に効くようになります。
- 「index.html 以外のファイルが増えたら失敗」。AI が CSS や JavaScript を分けた場合もそのままで構いません。`kadaiA/` 直下にまとまっていれば問題ありません。

## 次のアクション

1. OK基準を自分で確認します。一覧に50件、備品名で絞り込める、1件クリックで詳細、詳細から一覧に戻れる、ダブルクリックだけで開ける。この5つです。
2. 時間が余ったら発展課題へ進みます。`exercises/challenges/ch01_category_filter.md`（カテゴリ絞り込み）と `exercises/challenges/ch02_low_stock_highlight.md`（在庫が少ない備品の強調）があります。
3. 次は A-2（`exercises/exA2_concerns.md`）です。参考プロンプトは `step03_warning_check.md` にあります。**先に AI へ質問せず、自分で懸念を書き出すところから始めてください。**

うまくいかないときは次を確認してください。

- 画面が真っ白: ブラウザの開発者ツール（<kbd>F12</kbd>）のコンソールに出ているエラーを全文コピーして、`このエラーが出ています。原因を調べて直してください。` と貼り付けます。
- 検索しても件数が変わらない: `検索ボックスに文字を入力しても一覧が絞り込まれません。入力のたびに絞り込まれるようにしてください。` と伝えます。
- 詳細から戻ると検索条件が消える: 直せますが、15分では優先度が低い項目です。気づいたこととして `memo.md` に書き残して先へ進んでください。A-2 で使えます。
