---
session: S03
exercise: A-1
title: 素の状態で CRUD 業務アプリを作る
duration: 15min
difficulty: 2
prerequisite: [A-0]
phases:
  組み立て: 3min
  作る: 10min
  確認: 2min
files_to_edit:
  - kadaiA/index.html  # AI に新規作成させます
hints: hints/step02_crud_build.md
challenge: true
tags: [バイブコーディング, CRUD, 分割指示]
---

# 演習 A-1: 素の状態で CRUD 業務アプリを作る

設定ファイルが1つも無いまま、自然言語の指示だけで動くアプリを立ち上げます。速さと手軽さを体で覚えるのがこのステップです。

| 項目 | 内容 |
|---|---|
| 所要 | 15分 |
| 触るフォルダ | `kadaiA/`（VSCode で開いているのは `handson`） |
| 生成物 | `handson/kadaiA/index.html` |
| 終わったと言える状態 | ブラウザで一覧50件が出て、検索と詳細表示が動く |

この15分は講師が巡回しません。全員が自力で動く時間として意図的に空けています。詰まったら、まず AI に「いまこう出ている、どうすればよいか」と聞いてみてください。

---

## 目的

テンプレートも雛形も無いところから、指示だけでアプリが立ち上がることを体験します。

もう1つ、指示を分けて出すことの効果を確かめます。1回で全部を頼むと、返ってきたものが自分の想像と違ったときに、どこから直せばよいかがわかりません。3回か4回に分けると、1回ごとに画面を見て、次の指示で方向を足せます。この差はあとで A-6 の比較にも効いてきます。

---

## 操作

### 前提の確認

- VSCode で開いているのは `handson` です。`kadaiA` を単体で開いていないことを確認してください。
- 作業対象は `@kadaiA/` のようにパスで指定します。ファイルを名指しするときは `@kadaiA/dummy_data.csv` のように書くと、AI がそのファイルを読みに行きます。

### 1. 1回目の指示：一覧を出す

アクティビティバーの Claude Code アイコンを押してパネルを開き、入力欄に指示を書いて送ります。最初の指示で伝える内容は次の4点です。文面は自分で組み立ててください。

- 読ませるファイル：`@kadaiA/dummy_data.csv`
- 作るもの：備品の一覧を表で表示する画面
- 置き場所とファイル名：`kadaiA/index.html`
- 動かし方の条件：**ブラウザで開くだけで動く形**にすること

4点目を落とさないでください。理由は後述しますが、ここを書くか書かないかで、このあと10分間の作業内容が変わります。

参考プロンプトは `hints/step02_crud_build.md` にあります。まず自分で書いてみて、指示が通らなかったときに開いてください。

### 2. ブラウザで開いて確かめる（1回目の結果）

VSCode のエクスプローラで `kadaiA/index.html` を右クリックし、「エクスプローラーで表示」（Mac は「Finder で表示」）を選びます。表示されたファイルをダブルクリックすると、既定のブラウザで開きます。

一覧が表示されたら、件数を数えます。50件あるはずです。ここで件数が足りない場合は、先へ進む前に直してください。データの読み込みが途中で切れている状態のまま機能を足すと、原因の切り分けが難しくなります。

### 3. 2回目の指示：検索を足す

備品名の一部を入れると一覧が絞り込まれる検索を足します。伝えるのは「何ができるようになってほしいか」です。実装方法は指定しません。

指示を送ったら、ブラウザに戻って再読み込み（`F5`、Mac は `Cmd + R`）し、動きを確認します。試しに検索欄へ「ノート」と入力してください。**50件が3件に絞り込まれます。** 3件より多い、または0件になる場合は、伝え方を変えてもう一度指示してください。なお、このデータでは「ノート」を全項目から探しても3件のため、件数だけでは備品名以外を見ているかどうかは判別できません。備品名以外で絞り込まれていないかを確かめたいときは、カテゴリ名の「事務用品」で検索してください。備品名だけを見ていれば0件、カテゴリまで見ていれば12件が出ます。

### 4. 3回目の指示：詳細表示を足す

一覧の1件をクリックすると、その備品の全項目が見える表示に切り替わり、一覧に戻れるようにします。全項目とは、備品コード・備品名・カテゴリ・在庫数・保管場所・購入日・備考の7つです。

ここでも実装方法は指定しません。別ページに遷移するか、同じページ内で表示を切り替えるかは AI が選びます。選んだ結果を見てから、気に入らなければ次の指示で変えれば十分です。

### 5. 4回目の指示（任意）：見た目を整える

表示が崩れている、文字が詰まって読みにくいといった不満があれば、そこだけを差分で伝えます。「作り直してください」ではなく「ここをこう変えてください」と伝えるほうが速く、いま動いている部分が壊れにくくなります。

残り時間が3分を切ったら、見た目には手を付けずに次のステップへ進んでください。A-1 の目的は完成度ではありません。

---

## 自分で考える

1回目の指示に「ブラウザで開くだけで動く形にしてください」と添えました。**この一文が無いとどうなるでしょうか。**

ブラウザには、ローカルのファイルから別のローカルファイルを読み込むことへの制限があります。`index.html` の中から `dummy_data.csv` を通常の方法で読もうとすると、この制限に当たって読めません。AI はそれを避けるため、簡易サーバーを起動する前提の作りを選ぶことがあります。そうなると、アプリを見るたびにコマンドを実行することになり、確認の手間が増えます。

指示に添えた一文が、環境構築の有無を決めています。指示の中でどこを譲れないと伝えるか、という判断がそのまま実装の形に出た例です。

自分の指示のどこがこの結果を決めたのか、`memo.md` の `## A-1` に1行書いておいてください。

---

## 生成物の名前と場所

`handson/kadaiA/index.html`

単一ファイルが基本です。AI が CSS や JavaScript を別ファイルに分けた場合も、`kadaiA/` の直下にまとめて置かせてください。別の場所に置かれると、A-5 の `/selfcheck` が点検対象として拾えないことがあります。

`dummy_data.csv` は動かさない、書き換えないでください。元データが変わると、50件という判定基準が使えなくなります。

---

## OK基準

ブラウザで `kadaiA/index.html` を開いた状態で、次の4つを確認します。

1. 一覧に備品が **50件** 表示される
2. 検索欄に「ノート」と入力すると **3件** に絞り込まれる
3. 一覧の1件をクリックすると詳細が表示され、一覧に戻れる
4. `index.html` をダブルクリックするだけで動く（コマンドの実行が不要）

3番の詳細は、7項目すべてが出ていることを確認してください。備考が空欄の備品も50件中22件あります。そのうち1件を開いて、表示が崩れないかも見ておきます。ここで崩れていても、いまは直さなくて構いません。A-2 で書き出す材料になります。

---

## 追加と考察

指示を3回に分けたことで、1回ごとに画面を見て方向を足せました。1回目で全部を頼んだ場合と比べて、どちらが自分の意図に近いものになったと思いますか。

分けることには手間もあります。3回聞けば3回待ちます。それでも分けたほうがよい場面と、まとめて頼んだほうが速い場面があります。境目はどこにありそうか、`memo.md` に1行だけ書いておいてください。A-5 で `/selfcheck` を回すと、この「まとめて頼む」の極端な形を体験することになります。

もう1つ気づいておきたいことがあります。ここまでの応答には、AI が何をしたかの一覧が付いていません。どのファイルを読んで、どこを書き換えたのかは、応答の本文を読んで自分で拾う必要があります。A-4 でこの状態が変わります。

---

## 発展課題

カテゴリでの絞り込みを足したいとき、AI にどう問いかければ「なぜその実装にしたのか」まで返ってくるでしょうか。指示の文面を自分で考えて試してください。

作業指示ではなく、理由を引き出す問いを作るのがこの課題です。「カテゴリで絞り込めるようにしてください」だけでは、動くコードは返ってきても判断の理由は返ってきません。何を足せば理由が付いてくるかを、実際に2通り試して比べてみてください。

手順まで含めた発展版は `exercises/challenges/ch01_category_filter.md` にあります。時間が余った人向けです。A-2 の開始時刻になったら、途中でも切り上げてください。

---

## うまくいかないとき

**一覧に何も表示されない。画面が真っ白**

多くはデータの読み込みで止まっています。ブラウザで `F12`（Mac は `Cmd + Option + I`）を押し、Console タブに出ている赤いメッセージをそのまま AI に貼り付けて「このエラーが出ています。原因と直し方を教えてください」と送ってください。エラーメッセージは、そのまま渡すのが一番速い伝え方です。

**件数が50件ではなく、数件しか出ない**

サンプルとして数件だけを埋め込んだコードが生成されている可能性があります。`index.html` の中に備品名が直接書かれていないかを確認してください。書かれていた場合は「CSV の全件を読み込む形にしてください。データを HTML に直接書かないでください」と伝えます。

**検索しても件数が変わらない**

入力してからボタンを押す作りになっているかもしれません。まず画面上のボタンを探してください。ボタンが無く、入力しても反応しない場合は「入力するたびに絞り込まれるようにしてください」と伝えます。

**詳細を開くと画面が壊れる**

備考が空欄の備品で起きやすい症状です。50件のうち22件が空欄です。壊れる備品と壊れない備品を1件ずつ見つけて、違いを `memo.md` に書いておいてください。A-2 の懸念点としてそのまま使えます。

**生成が途中で止まった**

「続けてください」と送ると再開します。何度か繰り返しても同じ位置で止まる場合は、依頼の範囲が広すぎることがあります。「一覧だけ先に作ってください」のように、範囲を狭めて頼み直してください。

**思っていた画面と違うものができた**

作り直しは最後の手段です。まず「ここをこう変えてください」と、変えたい箇所だけを伝えてください。作り直すと、いま動いている部分まで作り替わります。

**時間が足りない**

一覧50件が出ていれば、検索と詳細が未完成でも次に進んで構いません。A-2 は「できていないこと」も書き出す対象です。未完成であること自体が材料になります。

---

## 次のステップ

[A-2 懸念点を自分で洗い出す](exA2_concerns.md) に進みます。作ったものを AI に見せる前に、自分の目で懸念を書き出す時間です。順番が逆になると、AI の指摘をなぞるだけになります。
