# 発展課題03 新規登録・編集・削除を足す

| 項目 | 内容 |
|---|---|
| 対象 | 課題A（自分で作った備品管理アプリ） |
| 目安時間 | 20分から30分 |
| 難易度 | 難 |
| 前提 | [A-1](../exA1_vibe_build.md) で一覧・検索・詳細が動いていること |
| 関連 | [ch04 一覧をCSVに書き出す](ch04_csv_export.md) |

---

## 目的

読むだけのアプリに、**書き換える機能**を足します。

いままで作ったのは、データを読んで表示するだけのアプリでした。壊れても、元のデータは無傷です。ここから先は違います。登録・編集・削除は、間違えるとデータが消えます。

この課題の中心は、機能を作ることではありません。**書き換える機能を足すときに、何を先に決めなければならないか**を洗い出すことです。

---

## 操作

### 1. 依頼する前に、決めることを洗い出させる

いきなり作らせません。<kbd>Shift</kbd>+<kbd>Tab</kbd> で Plan モードに切り替えてから聞きます。

```
@kadaiA に新規登録・編集・削除を追加したいです。作る前に、決めておかないと後で困ることを挙げてください。まだコードは変更しないでください。
```

出てくるはずの論点の例です。

| 論点 | 決めること |
|---|---|
| 保存先 | 書き換えた内容をどこに残すか。`dummy_data.csv` は変更禁止です |
| 備品コードの採番 | 新規登録のとき、コードを誰がどう決めるか |
| 必須項目 | 空欄のまま登録できてよい項目はどれか |
| 削除の扱い | 完全に消すか、消えたことにするだけか |
| 取り消し | 間違えて消したとき、戻せる必要があるか |

**5つ以上出てこない場合は、追加で聞いてください。**

```
データが消える事故を防ぐ観点で、他に決めておくことはありませんか。
```

### 2. 決めたことを書き出す

`memo.md` の `## 発展課題` に、決めた内容を箇条書きで残してください。5行程度でかまいません。

ここで書いたものが、次の依頼の材料になります。**決めずに依頼すると、AI が代わりに決めます。**

### 3. 保存先を明示して依頼する

`dummy_data.csv` は変更禁止です。ブラウザだけで動く形なら、ブラウザ内の保存領域を使うか、変更内容を別ファイルに書き出す形になります。どちらにするかを自分で決めてから依頼します。

```
@kadaiA に新規登録・編集・削除を追加してください。決めた条件は次のとおりです。

- dummy_data.csv は読み取り専用。変更しない
- 変更内容はブラウザの保存領域に持ち、再読み込みしても残るようにする
- 新規登録では備品コードを自動で採番する（既存の最大値の次）
- 備品名・カテゴリ・在庫数は必須。保管場所と備考は任意
- 削除するときは確認を1回挟む

いまある一覧・検索・詳細は壊さないでください。
```

### 4. 動かして確かめる

次の順で操作してください。順番に意味があります。

1. 新規登録する。一覧に増える
2. ブラウザを再読み込みする。**増やしたものが残っているか**
3. いま登録したものを編集する。一覧の表示が変わる
4. 元からあった備品を編集する。表示が変わる
5. 再読み込みする。編集が残っているか
6. 登録したものを削除する。確認が出るか
7. 再読み込みする。**元からあった50件が無傷か**

**7番が最も重要です。** 元データを壊していないことを確認してください。

### 5. 必須項目の確認をする

備品名を空欄のまま登録してみてください。エラーになりますか。何も言われずに登録できてしまう場合は、直させてください。

```
必須項目が空欄のまま登録できてしまいます。備品名・カテゴリ・在庫数が空の場合は登録できないようにし、何が足りないかを画面に表示してください。
```

---

## 自分で考える

手順1で挙がった論点のうち、**あなたが自分では思いつかなかったもの**はどれでしたか。

思いつかなかった論点は、たいてい「壊れたときの話」です。取り消し、削除の確認、元データの保護。作る話は思いつきますが、壊れる話は経験からしか出てきません。

**AI に「決めておくことを挙げて」と先に聞くのは、この差を埋めるためです。** 作らせる前に1回聞くだけで、あとで戻る回数が減ります。

---

## 生成物の名前と場所

- `handson/kadaiA/index.html`（および関連ファイル）
- `handson/memo.md` の `## 発展課題` に、手順2で決めた条件（5行程度）

`handson/kadaiA/dummy_data.csv` は**変更されていない状態**が正しい状態です。ファイルの更新日時を確認してください。

---

## OK基準

- 新規登録・編集・削除の3つが動く
- 再読み込みしても、登録と編集の内容が残る
- 削除の前に確認が出る
- 必須項目が空欄のときは登録できず、何が足りないかが画面に出る
- `dummy_data.csv` が変更されていない
- 元からあった50件が壊れていない

---

## 追加と考察

この課題は、今日の発展課題の中でいちばん時間がかかります。理由は機能が3つあるからではなく、**決めることが多いから**です。

読むだけの機能は、間違えても表示が変なだけです。書き換える機能は、間違えるとデータが失われます。この差が、決めることの量に出ます。実務でも、閲覧画面は速く作れて、登録画面で時間がかかります。

AI を使うと、作る時間は短くなります。ただし、**決める時間は短くなりません。** 決めていないことは、AI が代わりに決めるだけです。今日やった「先に論点を挙げさせる」は、決める作業そのものを速くする方法ではなく、**決め忘れを減らす方法**です。

---

## 発展課題

削除を「完全に消す」から「消えたことにする」に変えてください。

```
削除を、データを消すのではなく削除済みの印を付ける形に変えてください。一覧には削除済みを表示せず、削除済みだけを一覧で見る切り替えを足してください。
```

実務のシステムでは、この形が多く使われます。**なぜ完全に消さないのか**を考えてください。監査、誤操作からの復旧、参照している別のデータの存在。理由を1つ挙げて `memo.md` に書いてください。

---

## 詰まったときは

**再読み込みすると変更が消える**

保存先が指定できていません。

```
登録した内容が再読み込みで消えます。ブラウザの保存領域に保存して、起動時に読み込む形にしてください。
```

**`dummy_data.csv` が書き換わってしまった**

すぐに手を止めて、講師に挙手してください。配布ZIPから元のファイルを取り出して戻します。**上書きしたまま作業を続けないでください。**

**登録した備品の詳細画面が開かない**

新しく登録したデータの持ち方が、元のデータと違っている可能性があります。

```
新規登録した備品の詳細画面が開きません。元からあるデータと、新規登録したデータの持ち方の違いを説明してください。
```

**画面が複雑になりすぎて、何がどこにあるかわからない**

1画面に詰め込みすぎです。登録と編集を別の画面に分けるよう頼んでください。

```
登録と編集を、一覧とは別の画面に分けてください。画面間の移動はリンクで行ってください。
```

**時間内に終わらない**

3つ全部を作る必要はありません。**新規登録だけ**を完成させてください。決めることの多さは、1機能でも十分に体験できます。
