導入
JavaScript開発において、配列の末尾に要素を追加する Array.prototype.push は最も頻繁に使用されるメソッドの一つです。しかし、大規模なデータ処理やパフォーマンスが求められるフロントエンド開発の現場では、単に「追加する」以上の知識が求められます。本記事では、pushメソッドの挙動を正しく理解し、パフォーマンス低下を防ぐための実務的なアプローチを解説します。
基礎知識
Array.prototype.push() は、配列の末尾に1つ以上の要素を追加し、その配列の新しい長さを返すメソッドです。特筆すべきは、このメソッドが 破壊的（Mutable） であるという点です。つまり、元の配列自体を直接変更します。ReactやReduxなど、イミュータブル（不変性）な状態管理が求められる環境では、この特性がバグの原因となることが多いため、注意が必要です。
実装/解決策
実務において「配列に要素を追加する」際、pushを選択すべき場面と、他の手法（スプレッド構文など）を選択すべき場面を明確に区別することが重要です。
・パフォーマンスを重視する場合: 数万件のデータをループで追加する場合、pushは非常に高速です。
・状態管理（React等）を行う場合: 元の配列を汚染しないよう、スプレッド構文 […arr, newItem] を使用して新しい配列を作成するのが定石です。
サンプルプログラム
以下のコードは、pushメソッドの基本的な使い方と、配列を結合する際の実用的なテクニックです。
// 1. 基本的な使用例
const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange'); // 配列の末尾に要素を追加
console.log(fruits); // ["apple", "banana", "orange"]
console.log(newLength); // 3 (新しい配列の長さが返る)
// 2. 複数の配列を一度に追加する（スプレッド構文との併用）
const moreFruits = ['mango', 'pineapple'];
fruits.push(...moreFruits);
console.log(fruits); // ["apple", "banana", "orange", "mango", "pineapple"]
// 3. 実務でよくある「条件付き追加」のパターン
const items = [1, 2, 3];
const shouldAdd = true;
if (shouldAdd) {
// 配列を直接操作するため、メモリ効率が良い
items.push(4);
}
応用・注意点
現場で陥りやすいバグとして、「Reactのstate更新でpushを使ってしまう」ケースがあります。Reactでは state が直接書き換えられても再レンダリングがトリガーされないことがあり、UIが更新されないバグに繋がります。
また、パフォーマンス面での注意点として、非常に大きな配列に対してループ内で push を繰り返すと、メモリの再割り当てが発生し、処理速度が低下することがあります。もし事前に配列のサイズが予測できる場合は、`new Array(size)` で初期化することも検討してください。
最後に、pushは「戻り値が新しい配列ではなく、長さである」という点も忘れがちです。メソッドチェーンで配列を操作しようとしてエラーになるケースが多いため、記述時には注意を払いましょう。