# 発展課題04 表示中の一覧をCSVに書き出す

| 項目 | 内容 |
|---|---|
| 対象 | 課題A（自分で作った備品管理アプリ） |
| 目安時間 | 15分から20分 |
| 難易度 | 中 |
| 前提 | [A-1](../exA1_vibe_build.md) で一覧と検索が動いていること。[ch01](ch01_category_filter.md) を終えているとなお良い |
| 関連 | [ch02 在庫の少ない備品を目立たせる](ch02_low_stock_highlight.md) |

---

## 目的

**画面で絞り込んだ結果を、そのままファイルに出す**機能を足します。

業務でよく頼まれる形です。「この条件で絞った一覧を、表計算ソフトで見たい」という依頼は、どの職場にもあります。作るもの自体は小さいのですが、**文字化けと、出す範囲**の2点で必ずつまずきます。今日はその2点を先に潰します。

---

## 操作

### 1. 出す範囲を決める

依頼する前に決めてください。ボタンを押したとき、書き出されるのは次のどちらですか。

- 全50件
- いま画面に表示されている件数（絞り込み後）

**業務で頼まれるのはほぼ後者です。** 絞り込んだ結果が欲しいから絞り込んでいます。ただし、指定しないと前者になることがあります。

### 2. 依頼する

```
@kadaiA の一覧画面に、表示中の一覧をCSVファイルとして書き出すボタンを追加してください。条件は次のとおりです。

- 書き出すのは、絞り込んだ後に画面に表示されている行だけ
- 列は画面に出ている項目と同じ順番
- 1行目に列名を入れる
- ファイル名に書き出した日付を入れる（例: 備品一覧_20260820.csv）
- Excel で開いたときに日本語が文字化けしないようにする

dummy_data.csv は変更しないでください。
```

最後から2番目の条件が重要です。**日本語を含むCSVは、そのまま作ると Excel で文字化けします。** 対処の方法は複数ありますが、ここでは AI に任せて、あとで理由を聞きます。

### 3. 書き出して確かめる

次の順で確認してください。

| 手順 | 確認すること |
|---|---|
| 絞り込みなしで書き出す | 50行 + 見出し1行 = 51行 |
| 備品名で絞り込んでから書き出す | 画面の件数と一致する |
| カテゴリで絞り込んでから書き出す | 同上 |
| 書き出したファイルを Excel で開く | 日本語が文字化けしない |
| 同じファイルをメモ帳やテキストエディタで開く | 列がカンマで区切られている |

**4番目を必ず確認してください。** ここが今日の山場です。

### 4. 文字化けの理由を聞く

うまく開けたなら、なぜ開けたのかを聞いてください。

```
書き出したCSVが Excel で文字化けしないようにするために、何をしましたか。文字コードの話を、専門用語を使わずに説明してください。
```

文字化けしたなら、直させてから同じ質問をしてください。

```
Excel で開くと日本語が文字化けします。直してください。
```

---

## 自分で考える

手順3の2番目と3番目で、書き出した件数は画面の件数と一致していましたか。

**一致していなかった場合、何件が書き出されていましたか。**

50件が出ていたなら、絞り込みの結果ではなく元のデータを書き出しています。0件だったなら、絞り込みの結果を参照する場所を間違えています。

この違いは、**画面に見えているものと、プログラムが持っているものが別**であることから起きます。画面は絞り込み後を表示し、内部には全件を持っています。どちらを書き出すかを指定しないと、書きやすいほう（全件）が選ばれがちです。

---

## 生成物の名前と場所

- `handson/kadaiA/index.html`（および関連ファイル）
- 書き出されたCSVファイル（ダウンロードフォルダに保存されます。`kadaiA` の中に置く必要はありません）
- `handson/memo.md` の `## 発展課題` に、文字化け対策として何をしたかを1行

---

## OK基準

- ボタンを押すとCSVがダウンロードされる
- 絞り込んだ状態で押すと、画面の件数と書き出した行数が一致する
- 1行目に列名が入っている
- ファイル名に日付が入っている
- Excel で開いて日本語が文字化けしない
- `dummy_data.csv` が変更されていない

---

## 追加と考察

文字化けの対処として、AI はおそらく「先頭に印を1つ足す」ことをしています。この印は目には見えませんが、Excel はこれを見て日本語の読み方を切り替えます。

覚えてほしいのは印の名前ではなく、**「動いた」と「わかった」は別だ**ということです。今日は動きました。理由も聞きました。次に同じ問題が出たとき、聞かずに直せるかどうかが分かれ目です。聞いて済ませてもかまいませんが、**聞いたことを1行メモに残す**と、2回目が速くなります。

もう1点。この機能は、業務の中で最も頼まれやすい種類のものです。データを見る人と、加工する人が別だからです。**加工したい人は、たいてい表計算ソフトに持っていきたいだけ**です。この前提がわかっていると、凝った画面を作るより先にCSVの書き出しを付けたほうが喜ばれる、という判断ができます。

---

## 発展課題

書き出す列を選べるようにしてください。

```
CSVに書き出す列を、画面で選べるようにしてください。既定では全列を選んだ状態にしてください。
```

列を選べるようにすると、確認することが増えます。1列も選ばずに押したらどうなりますか。選んだ順番は反映されますか。**機能を1つ足すと、確認することが2つ以上増えます。** 増えた確認項目を数えてみてください。

---

## 詰まったときは

**ボタンを押しても何も起きない**

ブラウザがダウンロードを止めている場合があります。画面上部の通知を確認してください。それでも動かない場合は、何をしているかを聞いてください。

```
書き出しボタンを押しても何も起きません。ボタンを押したときに何が実行されるはずかを説明してください。
```

**Excel で開くと1列にすべて詰まっている**

区切り文字が正しく認識されていません。テキストエディタで開いて、カンマで区切られているか確認してください。区切られているのに1列になる場合は、Excel 側の読み込み設定の問題です。

**日本語が「譁�ｭ怜喧縺�」のようになる**

文字化けです。手順4の依頼で直してください。直したあとに、もう一度 Excel で開いて確認してください。

**備考に含まれるカンマで列がずれる**

CSVの決まりでは、値の中にカンマが入る場合は引用符で囲みます。

```
備考にカンマが含まれる備品で、列がずれます。値の中にカンマが入る場合は引用符で囲むように直してください。
```

**ファイル名の日付が固定になっている**

書き出した時点の日付を使うよう伝えてください。

```
ファイル名の日付が固定です。書き出した日の日付が入るようにしてください。
```
