では、巨大配列で 先頭削除＋末尾追加＋map処理など複数操作 をまとめて効率的に行う、ブラウザ用サンプルを作ります。進捗バー付きで、大量データでも安全に処理できる形です。
例：キュー操作＋変換処理＋進捗バー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<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: #FF5722;
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; }
}
// 100万件の配列を用意
const size = 1000000;
let q = new FastQueue();
for (let i = 0; i < size; i++) q.enqueue(i);
// チャンク処理設定
const chunk = 10000;
let processed = 0;
let sum = 0;
function processChunk() {
for (let i = 0; i < chunk && q.size() > 0; i++) {
let v = q.dequeue(); // 先頭削除
v = v * 2; // 変換処理（mapの代わり）
sum += v; // 集計
q.enqueue(v); // 末尾追加
}
processed += chunk;
const percent = Math.min(100, Math.floor((processed / size) * 100));
document.getElementById('bar').style.width = percent + '%';
document.getElementById('status').textContent = `処理中... ${percent}%`;
if (processed < size) {
setTimeout(processChunk, 0); // 次のチャンクへ
} else {
document.getElementById('status').textContent =
`完了! 集計合計 = ${sum}, キューサイズ = ${q.size()}`;
}
}
// スタート
processChunk();
</script>
</body>
</html>
ポイント解説
- 複合処理をまとめて安全に
dequeue()→変換→sum→enqueue()を 1 チャンクでまとめる- 巨大配列でも一度に全処理せず安全
- map/filter など中間配列を作らない
- メモリ効率が高く、大量データでも安定
- 進捗バーで処理状況を可視化
- ユーザーに安心感を提供
- 処理時間の目安が分かる
- チャンク処理でブラウザフリーズを防止
setTimeout(processChunk, 0)により、UI 更新や他処理をブロックしない
- 集計も同時に可能
- map 変換と合計処理を同時に行うことで、中間配列を作らずに効率化
💡 応用例
- 巨大データを逐次処理（ログ解析、統計処理）
- ゲームやシミュレーションで大量エンティティの状態更新
- Webブラウザ上でのリアルタイムデータ加工・集計
