【JavaScript】配列に要素を追加するpushメソッドの使い方

JavaScriptでデータを扱う際、最も頻繁に利用される操作の一つが「配列（Array）への要素の追加」です。
その中でも push() メソッドは、リストの末尾に新しいデータを付け加えるための最も基本的で強力な手段となります。

こうした疑問を抱えている方のために、この記事では push() メソッドの基本的な使い方から、スプレッド構文を用いた配列結合、そして初心者がハマりやすい「上書き」の罠までを徹底的に解説します。

JavaScriptのpushメソッドの基本：末尾への要素追加

JavaScriptの push() メソッドは、配列の末尾に1つ以上の要素を追加し、追加後の配列の新しい長さを返すという性質を持っています。

配列を操作するメソッドの中でも直感的に理解しやすく、タスクリストの更新や動的なデータの蓄積において中心的な役割を果たします。

まずは最もシンプルな、単一の要素を追加する例を見てみましょう。

1つの要素を追加する基本コード

// 配列の宣言
const colors = ["赤", "青"];

// 末尾に要素を追加
const newLength = colors.push("黄");

console.log("更新後の配列:", colors);
console.log("新しい要素数:", newLength);

実行結果

更新後の配列: ["赤", "青", "黄"]
新しい要素数: 3

このソースコードの動作を紐解くと、まず colors という2つの要素を持つ配列を用意しています。
そこに push("黄") を実行することで、配列の一番後ろに新しい文字列が継ぎ足されました。

ここで注目したいのは、push() メソッド自体が「戻り値」を持っている点です。

実行結果の通り、メソッドを呼び出した変数（ここでは newLength）には、追加後の配列の長さである 3 が格納されます。

実際の開発では、配列の中身を更新する目的で使われることが多いため、この戻り値を意識して活用する場面は限られますが、言語仕様として覚えておくとデバッグに役立ちます。

複数の要素を一度に追加する方法とスプレッド構文

push() は1つだけでなく、カンマで区切ることで複数の要素を一度に末尾へ追加することが可能です。

また、ES6から導入された「スプレッド構文」を組み合わせることで、既存の配列そのものを展開して別の配列の末尾に流し込むこともできるようになりました。

複数追加と配列の展開プッシュ

const fruits = ["りんご"];

// 1. カンマ区切りで複数追加
fruits.push("バナナ", "オレンジ");

// 2. 別の配列をそのまま push（スプレッド構文を使用）
const extraFruits = ["イチゴ", "メロン"];
fruits.push(...extraFruits);

console.log("最終的なフルーツリスト:", fruits);

実行結果

最終的なフルーツリスト: ["りんご", "バナナ", "オレンジ", "イチゴ", "メロン"]

まず最初の push("バナナ", "オレンジ") では、複数の引数を渡すことで一度に2つの要素を末尾へ追加しています。
これにより、1行ずつメソッドを書く手間が省けます。

次に重要なのが fruits.push(...extraFruits) の記述です。

ここにある ...（スプレッド構文）は、extraFruits 配列の中身を「バラバラにして」渡す役割を持っています。
もしこの構文を使わずに fruits.push(extraFruits) と記述してしまうと、配列の中に配列が入った状態（入れ子）になってしまいますが、スプレッド構文を使うことで「配列に別の配列の要素を結合する」という直感的な操作が実現できます。

2次元配列やオブジェクト配列へのpush操作

実務のデータ処理では、単純な文字列や数値だけでなく、さらに複雑な構造を持つ配列を扱う場面が多々あります。

特に、表形式のデータを扱う「2次元配列」や、APIレスポンスなどの「オブジェクト配列」における追加方法は必須の知識です。

2次元配列とオブジェクト配列の追加例

// 2次元配列（行列）への追加
const matrix = [
    [1, 2],
    [3, 4]
];
matrix.push([5, 6]);

// オブジェクト配列（連想配列のリスト）への追加
const users = [
    { id: 1, name: "田中" },
    { id: 2, name: "佐藤" }
];
const newUser = { id: 3, name: "鈴木" };
users.push(newUser);

console.log("2次元配列:", matrix);
console.log("オブジェクト配列:", users);

実行結果

2次元配列: [[1, 2], [3, 4], [5, 6]]
オブジェクト配列: [
  { id: 1, name: "田中" },
  { id: 2, name: "佐藤" },
  { id: 3, name: "鈴木" }
]

ソースコードの内容を詳しく解説します。

2次元配列の場合、matrix.push([5, 6]) のように「配列そのもの」を1つの要素としてプッシュします。
これにより、多次元のデータ構造を維持したまま行を追加できます。

また、JavaScriptにおいて「連想配列を追加したい」という検索意図は、通常「オブジェクト形式のデータをリストに加えたい」というニーズを指します。

users.push(newUser) のように、キーと値のペアを持つオブジェクトをプッシュすることで、いわゆるデータベースのレコードのような形式でデータを蓄積していくことが可能です。

途中の追加や先頭への追加：push以外の選択肢

push() は常に末尾にデータを追加しますが、要件によっては「最初に追加したい」あるいは「特定の場所（途中）に割り込ませたい」というケースも発生します。

これらの操作には、unshift() や splice() といった別のメソッドを使い分けます。

unshiftとspliceによる位置指定追加

const list = ["B", "C"];

// 先頭に追加
list.unshift("A");

// 指定したインデックス（途中）に追加
// インデックス2（Cの前）に "X" を挿入
list.splice(2, 0, "X");

console.log("操作後のリスト:", list);

実行結果

操作後のリスト: ["A", "B", "X", "C"]

このコードでは、まず unshift("A") を使って配列のインデックス0に要素を挿入し、既存の要素を後ろにずらしています。

さらに splice(2, 0, "X") を使用しています。

このメソッドの第1引数は「開始位置」、第2引数は「削除する数」を意味します。第2引数を 0 に設定することで、「何も削除せずに、指定した位置に要素を割り込ませる」という使い方が可能になります。

このように位置に応じてメソッドを使い分けることが、配列操作をマスターする鍵となります。

pushで発生する「上書き」の罠とループ内の注意点

JavaScriptの初学者がよく直面する問題に、「pushしたはずのデータがすべて同じ値に上書きされてしまう」という現象があります。

これは、JavaScriptのオブジェクトが「参照（メモリ上の場所）」で管理されているために起こる、非常に典型的なバグです。

参照渡しによる上書き問題の再現と解決

// NG例: 同じ参照をpushし続けた場合
const result = [];
const template = { name: "" };

for (let i = 1; i <= 3; i++) {
    template.name = "ユーザー" + i;
    result.push(template); // 同じオブジェクトの場所を記録し続けている
}

console.log("NG例の結果:", result);

// OK例: 毎回新しいオブジェクトを生成する場合
const safeResult = [];
for (let i = 1; i <= 3; i++) {
    // ループ内で新しいオブジェクトを作成する
    const user = { name: "ユーザー" + i };
    safeResult.push(user);
}

console.log("OK例の結果:", safeResult);

実行結果

NG例の結果: [{name: "ユーザー3"}, {name: "ユーザー3"}, {name: "ユーザー3"}]
OK例の結果: [{name: "ユーザー1"}, {name: "ユーザー2"}, {name: "ユーザー3"}]

この現象の理由を詳しく説明します。

NG例では、ループの外で定義した template という一つの「箱」の中身を書き換えて、その「箱の場所」を配列に push しています。

配列には「中身」ではなく「箱の位置」が記録されるため、最後に箱の中身を「ユーザー3」に書き換えると、配列が指しているすべての場所の中身が「ユーザー3」に見えてしまうのです。

これを防ぐには、OK例のようにループのたびに新しいオブジェクト（新しい箱）をメモリ上に作成する必要があります。

または、スプレッド構文を使って {...template} のように「浅いコピー」を作成してからプッシュする手法も実務では多用されます。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptで配列に要素を追加するpushメソッドの使い方について詳しく解説してきました。