1行ずつCSVを読み込んで表示するアニメーションデモ（進行バー付き）
ファイルを選ぶと、ジェネレーターが1行ずつ処理 → 表示 → プログレスバー更新、という流れになります。
（ブラウザだけで動作、サーバー不要）
See the Pen CSV Line-by-Line Reading Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.
使い方
- 上記HTML/CSS/JSをCodePenでそれぞれ貼り付けます。
- 小さなCSVファイル（例：
id,name,score\n1,Tom,85\n2,Alice,90\n3,Bob,78）を作って選択します。 - 1行ずつテキストが流れてきて、進行バーが伸びていきます。
解説（初心者向け）
| 概念 | 内容 |
|---|---|
ジェネレーター (function*) | CSVテキストを「1行ずつ」yieldして、都度値を取り出せる。 |
for...of ループ | yieldされた値を順番に取り出す（内部で next() を呼んでいる）。 |
await new Promise(res => setTimeout(res, 200)) | 少し待ってから次の行を処理 → 「アニメーション的に進む」。 |
| 進行バー更新 | 各行を処理するたびに (進行行数 / 総行数)*100 を計算し、バーの幅に反映。 |
発展アイデア
- ✅ ファイルが大きくても止まらないように
async function*でストリーミング処理に変更 - 📈 Chart.js と組み合わせて、読み込んだCSVデータをグラフに可視化
- 🌗 ダークモード切替ボタンを追加して見やすく
