JavaScript | 大きな配列を扱うときのパフォーマンス面

では、初心者向けに「大きな配列を効率よくループする具体例」を作り、ポイントを詳しく解説します。

例題：100万件の数値を2倍にして合計を求める

普通に forEach や map を使うと、巨大配列では 中間配列ができたり、関数呼び出しのオーバーヘッド が増えて遅くなることがあります。
そこで for ループで直接処理 する方法がシンプルで高速です。

// 100万件の配列を作成
let bigArr = Array.from({length: 1000000}, (_, i) => i + 1); // [1,2,3,...,1000000]

// 合計を求める（ループで直接計算）
console.time('for-loop');
let sum = 0;
for (let i = 0; i < bigArr.length; i++) {
  sum += bigArr[i] * 2; // 2倍して加算
}
console.timeEnd('for-loop');

console.log('合計:', sum);

// 100万件の配列を作成
let bigArr = Array.from({length: 1000000}, (_, i) => i + 1); // [1,2,3,...,1000000]

// 合計を求める（ループで直接計算）
console.time('for-loop');
let sum = 0;
for (let i = 0; i < bigArr.length; i++) {
  sum += bigArr[i] * 2; // 2倍して加算
}
console.timeEnd('for-loop');

console.log('合計:', sum);

ポイント解説

1. for ループが高速
   • map や forEach ではコールバック関数を毎回呼ぶため、関数呼び出しのオーバーヘッドが発生
   • for ループは「直接アクセス」なので、巨大配列でも高速
2. 中間配列を作らない
   • bigArr.map(x => x*2) は新しい配列を作る
   • 巨大配列では メモリ消費が倍 になる
   • ループ内で直接計算するとメモリ効率が良い
3. length は変数に保持するとさらに高速

let sum2 = 0;
let len = bigArr.length; // ループ前に長さを取得
for (let i = 0; i < len; i++) {
  sum2 += bigArr[i] * 2;
}

let sum2 = 0;
let len = bigArr.length; // ループ前に長さを取得
for (let i = 0; i < len; i++) {
  sum2 += bigArr[i] * 2;
}

• 配列の length はアクセスするたびに参照されるので、ループ中に何度も呼ぶより、事前に変数に入れると微妙に速くなる

4. TypedArray を使うとさらに効率的

let arr = new Uint32Array(1000000); // 0~999999の整数
for (let i = 0; i < arr.length; i++) arr[i] = i + 1;

let sum3 = 0;
for (let i = 0; i < arr.length; i++) sum3 += arr[i] * 2;
console.log(sum3);

let arr = new Uint32Array(1000000); // 0~999999の整数
for (let i = 0; i < arr.length; i++) arr[i] = i + 1;

let sum3 = 0;
for (let i = 0; i < arr.length; i++) sum3 += arr[i] * 2;
console.log(sum3);

• メモリが固定サイズで、高速アクセスが可能

実践的なコツ

• 先頭追加/削除 (shift/unshift) は避ける
• 中間配列を作らない（map/filter の連鎖は控える）
• 必要なら TypedArray を使う
• 長さが分かっている場合は ループ前に length を変数に保持

💡 まとめると：

• 巨大配列では「直接 for ループでアクセス + in-place 計算」が基本
• メモリ効率と速度を考えると map や filter の多用は避ける
• 特殊なケースは TypedArray や Web Worker も検討