では、初心者向けに「大きな配列を扱うときのパフォーマンス面」の注意点を、わかりやすくまとめてみます。例を交えて解説します。
1. 配列が大きいと何が問題？
- JavaScript は配列のサイズが大きくなると、処理が遅くなることがあります。
- 特に ループ処理 や 配列の途中に要素を追加/削除 する場合に影響が大きいです。
例：100万件のデータに対して push で追加するのは問題ないですが、shift（先頭に追加/削除）は要注意です。
let arr = [];
console.time('push');
for (let i = 0; i < 1000000; i++) {
arr.push(i); // 末尾追加は高速
}
console.timeEnd('push');
console.time('shift');
for (let i = 0; i < 1000; i++) {
arr.shift(); // 先頭削除は遅い
}
console.timeEnd('shift');
ポイント
push/pop→ 末尾の操作は高速shift/unshift→ 先頭の操作は低速（全ての要素を詰め直す必要があるため）
2. 不要な配列コピーに注意
- 配列をコピーするメソッド（
slice、concat、map）は、配列のサイズが大きいほど 処理コストが高くなる - 可能なら 同じ配列を更新する 方が高速
例：100万件の配列をすべて倍にする場合
let arr = Array.from({length: 1000000}, (_, i) => i);
// map（新しい配列作成）
console.time('map');
let newArr = arr.map(x => x*2);
console.timeEnd('map');
// ループで上書き（既存配列）
console.time('for-loop');
for (let i = 0; i < arr.length; i++) {
arr[i] *= 2;
}
console.timeEnd('for-loop');
結果：既存配列に上書きする方が高速です。
3. filter / map / reduce の連鎖に注意
let arr = Array.from({length: 1000000}, (_, i) => i);
// 連鎖すると中間配列がたくさん作られる
let result = arr.filter(x => x % 2 === 0).map(x => x*2);
- 上の例では filter で新しい配列、map でさらに新しい配列が作られる
- 大きな配列ではメモリ消費と処理速度に影響
対策
- ループでまとめて処理する
- 最近の環境では ジェネレーター を使うと中間配列を作らずに処理できる
4. sort の注意
- 配列が大きい場合、
sort()は比較回数が多くなり遅くなる - 数値配列であれば比較関数を渡すことを忘れない
- 大量データなら 別途ソートアルゴリズム を検討（例えば Web Worker で並列処理）
5. メモリ消費に注意
- 配列のサイズが大きいと、ブラウザや Node.js のメモリを大量に消費
- 不要になった配列は
nullを代入する か、スコープ外にすることで GC（ガベージコレクション）に回収させる
let bigArr = Array.from({length: 10000000}, (_, i) => i);
// 使い終わったら
bigArr = null;
5. 大きな配列を扱うときのまとめ
| 操作 | 小技・注意点 |
|---|---|
末尾追加/削除 (push/pop) | 高速、安全 |
先頭追加/削除 (shift/unshift) | 遅いのでなるべく避ける |
配列コピー (slice/concat/map) | 大きいとコスト高、可能なら in-place 更新 |
| filter/map/reduce の連鎖 | 中間配列が増えるので注意 |
| sort | 数値は比較関数必須、大きい場合は処理工夫 |
| メモリ | 不要配列は null にして GC を促す |
💡 実践のコツ
- 大量データは配列だけでなく TypedArray（Int32Array, Float64Array）も検討するとさらに高速
- 先頭追加/削除が多い場合は キュー・スタック専用構造 を使う（配列は万能ではない）
