WebエンジニアのためのCSVとバイナリ通信の基本技術まとめ



# 1.CSV（Comma-Separated Values）

- テキストベースの表形式データ
- 各行 = レコード、各列 = カンマ区切りのフィールド
- 改行・カンマ・クォートを含む場合のエスケープに注意
- MIMEタイプ: `text/csv`

```csv
名前,年齢
"山田太郎",30
"佐藤, 花子","25"
```

---

# 2. MIME（Multipurpose Internet Mail Extensions）

- データの「種類」を表す識別子
- HTTPヘッダー `Content-Type` に指定することで、通信内容の意味を明確化

### 例：

| 種別       | MIMEタイプ                |
|------------|---------------------------|
| CSV        | `text/csv`                |
| JSON       | `application/json`        |
| 画像       | `image/png`, `image/jpeg` |
| PDF        | `application/pdf`         |
| 汎用バイナリ | `application/octet-stream` |

---

# 3.HTTPとの関係

- HTTPは**通信プロトコル**
- 本文（body）にCSV、JSON、ArrayBufferなど様々な形式を送信可能
- `Content-Type` ヘッダーがデータの種類を示す

```http
Content-Type: text/csv
Content-Disposition: attachment; filename="data.csv"
```

---

# 4. Stream（ストリーム）

- データを小さなチャンク（塊）に分けて逐次処理する仕組み
- メモリ効率が良く、ファイル処理やネットワーク通信に適している

### Node.js例：

```js
const fs = require('fs');
const readable = fs.createReadStream('file.csv');
readable.on('data', chunk => console.log(chunk));
```

---

# 5. pipe（ストリームの接続）

- Stream同士をつなぐためのメソッド
- データを加工しながら流すことができる

```js
readableStream
  .pipe(transformStream)
  .pipe(writableStream);
```

---

# 6. Blob（ブラウザでのバイナリデータ）

- ブラウザ上で扱えるファイルデータ（バイナリの塊）
- MIMEタイプ付きで生成でき、URL.createObjectURL()でダウンロード可能

```js
const blob = new Blob(["名前,年齢\n太郎,30"], { type: "text/csv" });
const url = URL.createObjectURL(blob);
```

---

# 7. Buffer（Node.jsのバイナリデータ）

- Node.jsにおける低レベルなバイナリデータの管理オブジェクト
- ArrayBufferとの相互変換も可能

```js
const buffer = Buffer.from("Hello, world!", "utf-8");
console.log(buffer.toString()); // Hello, world!
```

---

# 8. CSVをNode.jsで生成しダウンロード可能にする（バックエンド編）

### ◾ 必要なライブラリ
- `csv-stringify`（npm）
- `express`（Webサーバー）

### ◾ 実装例

```bash
npm install express csv-stringify
```

```js
const express = require('express');
const { stringify } = require('csv-stringify');
const app = express();

app.get('/download', (req, res) => {
  res.setHeader('Content-Type', 'text/csv');
  res.setHeader('Content-Disposition', 'attachment; filename="data.csv"');

  const data = [
    ['名前', '年齢'],
    ['山田太郎', 30],
    ['佐藤花子', 25]
  ];

  stringify(data).pipe(res);  // stream + pipeで直接レスポンスに出力
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});
```

---

# 9. フロントエンドでCSVを生成しダウンロード可能にする（クライアント編）

### ◾ BlobとURLを使った例

```html
<button id="download">CSVダウンロード</button>

<script>
document.getElementById('download').addEventListener('click', () => {
  const data = [
    ['名前', '年齢'],
    ['山田太郎', 30],
    ['佐藤花子', 25]
  ];

  const csv = data.map(row => row.join(',')).join('\n');

  // UTF-8 BOM付きでExcel文字化け防止
  const bom = '\uFEFF';
  const blob = new Blob([bom + csv], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.csv';
  a.click();

  URL.revokeObjectURL(url); // メモリ解放
});
</script>
```

---

これでバックエンド・フロントエンドの両方でCSVを動的に生成し、ユーザーにダウンロードさせる処理が可能になります。


# 技術のつながり（まとめ）

| 概念     | 役割・用途                                    |
|----------|-----------------------------------------------|
| CSV      | データフォーマット（表形式）                  |
| MIME     | データの種類をHTTPなどで明示                  |
| HTTP     | 通信プロトコル。ボディに様々なデータを送受信可能 |
| Stream   | データを効率よく逐次処理                      |
| pipe     | ストリーム同士の連携                          |
| Blob     | フロントエンドでのバイナリデータ表現         |
| Buffer   | Node.jsでのバイナリデータ表現                 |

---

## ✅ 参考リンク

- [MDN - MIMEタイプ一覧](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
- [Node.js - Streamドキュメント](https://nodejs.org/api/stream.html)
- [Blob - MDN](https://developer.mozilla.org/ja/docs/Web/API/Blob)
- [Buffer - Node.js](https://nodejs.org/api/buffer.html)