HTML + JavaScript + Node.jsで構築されたCSVファイルバッチアップロードシステムです。LocalStorageとIndexedDBの両方をサポートし、CSVデータをバッチ処理でWebAPIに送信できる高機能なアップローダーです。
- CSVファイルアップロード: ドラッグ&ドロップまたはファイル選択
- ストレージオプション: LocalStorageまたはIndexedDBを選択可能
- リアルタイム表示: アップロードしたCSVの内容を表形式で表示
- バッチ処理: 1～1000件まで一度にPOSTする件数を設定可能（デフォルト: 10件）
- リクエスト間隔制御: 0～10秒までAPI呼び出し間隔を設定可能（デフォルト: 200ms）
- 処理制御: 一時停止・再開・停止機能で処理を自由にコントロール
- プログレス表示: データ処理の進捗をリアルタイムで表示
- 処理時間計測: 読み込み時間・処理時間・現在の経過時間を表示
- 統計情報: 総行数、処理済み数、成功数、エラー数を表示
- レスポンシブデザイン: モダンで使いやすいUI
- REST API: CSVデータを1行ずつまたはバッチで受信・処理
- バッチ処理対応: 単一行とバッチ（配列）の両方をサポート
- データ検証: 都道府県別野菜生産量データの形式チェック
- エラーハンドリング: 詳細なエラーメッセージとログ
- ファイルアップロード: 任意でCSVファイル全体のアップロードも対応
csv-batch-uploader/
├── public/
│ ├── index.html # フロントエンドUI
│ └── script.js # JavaScript実装（LocalStorage + IndexedDB）
├── server.js # Node.js Express サーバー
├── package.json # NPM設定
├── sample_data.csv # サンプルCSVデータ
├── LICENSE # MITライセンス
└── README.md # このファイル
npm installnpm startまたは開発モード（ファイル変更時の自動リスタート）:
npm run devhttp://localhost:3000
- ブラウザでアプリケーションを開く
- ストレージタイプ（LocalStorageまたはIndexedDB）を選択
- CSVファイルをドラッグ&ドロップまたはファイル選択でアップロード
- 「アップロード」ボタンをクリック
- CSVがストレージに保存されると「処理設定」セクションが表示されます
- バッチサイズ: 一度にPOSTする件数を選択（1～1000件、推奨: 10件）
- リクエスト間隔: API呼び出し間隔を選択（0～10000ms、推奨: 200ms）
- 「データ処理開始」ボタンをクリックして処理を開始
- 処理制御: 一時停止・再開・停止ボタンで処理をコントロール
- 進捗監視: プログレスバー、処理時間、統計情報でリアルタイム監視
- 完了後、結果を確認
期待されるCSVデータの形式:
都道府県,野菜名,生産量,単位,年度
北海道,じゃがいも,1800000,トン,2023
青森県,りんご,450000,トン,2023
...必須フィールド:
- 都道府県: 都道府県名
- 野菜名: 野菜の種類
- 生産量: 数値（生産量）
CSVの1行分のデータまたはバッチ（複数行）を処理します。
単一行のリクエスト例:
{
"都道府県": "北海道",
"野菜名": "じゃがいも",
"生産量": "1800000",
"単位": "トン",
"年度": "2023"
}バッチリクエスト例:
[
{
"都道府県": "北海道",
"野菜名": "じゃがいも",
"生産量": "1800000",
"単位": "トン",
"年度": "2023"
},
{
"都道府県": "青森県",
"野菜名": "りんご",
"生産量": "450000",
"単位": "トン",
"年度": "2023"
}
]単一行レスポンス例:
{
"success": true,
"message": "データが正常に処理されました",
"data": {
"prefecture": "北海道",
"vegetable": "じゃがいも",
"production": "1800000",
"timestamp": "2025-06-19T10:30:00.000Z"
}
}バッチレスポンス例:
{
"success": true,
"message": "2件のデータが正常に処理されました",
"processed": 2,
"results": [
{
"success": true,
"data": { "prefecture": "北海道", "vegetable": "じゃがいも" }
},
{
"success": true,
"data": { "prefecture": "青森県", "vegetable": "りんご" }
}
]
}API情報を取得します。
CSVファイル全体をアップロードします（オプション機能）。
- HTML5: セマンティックマークアップ
- CSS3: モダンデザイン、レスポンシブレイアウト
- JavaScript (ES6+):
- File API（ファイル読み込み）
- localStorage API
- IndexedDB API
- Fetch API（HTTP通信）
- DOM操作
- Node.js: JavaScript実行環境
- Express.js: Webアプリケーションフレームワーク
- Multer: ファイルアップロード処理
- CORS: クロスオリジンリソース共有
- 設定可能な件数: 1～1000件まで選択可能（デフォルト: 10件）
- 効率的な処理: 複数行をまとめてAPIに送信することでネットワークオーバーヘッドを削減
- エラー処理: バッチ単位でエラーハンドリング
- 設定可能な間隔: 0～10秒まで選択可能（デフォルト: 200ms）
- サーバー負荷軽減: 適切な間隔でAPIを呼び出し、サーバー負荷を制御
- レート制限対応: 外部APIのレート制限に対応
- 一時停止: 処理を一時的に停止（処理済み状態は保持）
- 再開: 一時停止した処理を中断地点から再開
- 停止: 処理を完全に停止
- 読み込み時間: CSVファイルの読み込みにかかった時間
- 処理時間: データ処理にかかった時間（一時停止時間を除く）
- 現在の経過時間: リアルタイムで更新される現在の経過時間
- 利点: シンプル、同期API、すぐに使える
- 欠点: 5-10MBの容量制限、文字列のみ
- 用途: 小さなCSVファイル向け
- 利点: 大容量、構造化データ、高性能
- 欠点: 非同期API、実装が複雑
- 用途: 大きなCSVファイル向け
script.jsのsendToAPIメソッドでAPIエンドポイントを変更できます:
async sendToAPI(data) {
const response = await fetch('/your-custom-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
// ...
}server.jsのバリデーション部分を修正してデータ形式を変更できます:
if (data['カスタムフィールド1'] && data['カスタムフィールド2']) {
// カスタム処理
}-
ファイルが読み込めない
- CSVファイルの文字エンコーディングがUTF-8であることを確認
- ファイルサイズが大きすぎる場合はIndexedDBを使用
-
API呼び出しが失敗する
- サーバーが起動していることを確認
- ネットワーク接続を確認
- ブラウザの開発者ツールでエラーを確認
-
IndexedDBが使用できない
- ブラウザがIndexedDBをサポートしているか確認
- プライベートブラウジングモードでは制限される場合があります
MIT License
- CSV解析の改善（引用符内のカンマ対応など）
- エクスポート機能
- データベース連携
- ユーザー認証
- リアルタイム通知
- 処理履歴の保存
- 設定のプリセット機能