では、さらにステップアップして 多次元配列（配列の中に配列）を安全にチャンク処理で操作 するサンプルを作ります。ブラウザで進捗バー付きで大量データを処理可能です。
例：多次元配列の条件付き削除＋変換＋集計＋進捗バー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>多次元配列チャンク処理デモ</title>
<style>
#progress {
width: 100%;
background-color: #eee;
border-radius: 5px;
overflow: hidden;
margin: 10px 0;
}
#bar {
height: 20px;
background-color: #009688;
width: 0%;
}
</style>
</head>
<body>
<h1>多次元配列チャンク処理デモ</h1>
<div id="progress"><div id="bar"></div></div>
<p id="status">準備中...</p>
<script>
// 高速キュークラス
class FastQueue {
constructor() {
this.data = [];
this.head = 0;
}
enqueue(v) { this.data.push(v); }
dequeue() {
if (this.head >= this.data.length) return undefined;
return this.data[this.head++];
}
size() { return this.data.length - this.head; }
compact() {
if (this.head > 10000) {
this.data = this.data.slice(this.head);
this.head = 0;
}
}
}
// 多次元配列（1000行×1000列 = 100万件）
const rows = 1000;
const cols = 1000;
let q = new FastQueue();
for (let i = 0; i < rows; i++) {
let row = [];
for (let j = 0; j < cols; j++) row.push(j);
q.enqueue(row);
}
// チャンク処理設定
const chunk = 10; // 行ごとに処理
let processed = 0;
let sum = 0;
function processChunk() {
let chunkCount = 0;
while (chunkCount < chunk && q.size() > 0) {
let row = q.dequeue();
// 各行の条件付き処理
let newRow = [];
for (let val of row) {
if (val % 2 === 0) { // 偶数だけ残す
val = val * 2; // 変換
sum += val; // 集計
newRow.push(val);
}
}
if (newRow.length > 0) q.enqueue(newRow); // 空行は追加しない
chunkCount++;
}
processed += chunk;
const percent = Math.min(100, Math.floor((processed / rows) * 100));
document.getElementById('bar').style.width = percent + '%';
document.getElementById('status').textContent = `処理中... ${percent}%`;
q.compact();
if (processed < rows) {
setTimeout(processChunk, 0);
} else {
document.getElementById('status').textContent =
`完了! 集計合計 = ${sum}, 残り行数 = ${q.size()}`;
}
}
// スタート
processChunk();
</script>
</body>
</html>
ポイント解説
- 多次元配列に対応
- 配列の中に配列（行単位）で操作
- 各行ごとに条件付き処理＋変換＋集計
- 条件付き削除
- 空行はキューに戻さない → filter 相当の処理
- チャンク処理でブラウザフリーズ回避
- 一度に複数行処理せず、少しずつ処理する
- 進捗バーで可視化
- 行単位で進捗を更新
- 巨大データでも UI が応答
- メモリ効率
- 中間配列は各行内だけ
- 巨大行列でもブラウザで安全に操作可能
💡 応用例
- ExcelやCSVの大量データをブラウザで逐次処理
- ゲームやシミュレーションで2次元マップの更新
- Webブラウザでのリアルタイム統計やデータ加工
