JavaScriptで配列に要素を追加する方法｜push()とconcat()の使い分けを徹底解説

JavaScriptを使って配列に要素を追加する方法を、実例付きでわかりやすく解説します。

配列に要素を追加するには、状況に応じてJavaScriptの push() メソッドまたは concat() メソッドを使い分けるのが基本です。どちらのメソッドもJavaScriptのArrayオブジェクトが標準で提供しています。

この記事では、それぞれのメソッドの使い方と、実践での使い分けのポイントを順番に見ていきましょう。

配列に1つの要素を追加する

まずは、既存の野菜リスト（配列）に新しい野菜を追加してみましょう。push() を使うと、配列の末尾に要素を追加できます。

const vegetables = ["broccoli", "onion", "spinach"]
vegetables.push("carrot")

結果をコンソールに出力して確認します。

console.log(vegetables)
// ["broccoli", "onion", "spinach", "carrot"]

ここで注意したいのは、元の vegetables 配列そのものが変更されているという点です。これについては後ほど詳しく説明します。

配列に複数の要素を追加する

複数の要素を一度に追加したい場合も push() が使えます。引数をカンマ区切りで複数渡すだけでOKです。

const vegetables = ["broccoli", "onion", "spinach"]
vegetables.push("carrot", "green beans", "kale")

この場合も、元の vegetables 配列が直接変更されます。

元の配列を変更するか、新しい配列を作るか：push() vs concat()

前述のとおり、push() メソッドは元の配列を変更（破壊）します。一方で、元の配列はそのまま残しつつ、そこから新しい配列を作成して要素を追加したい場合には、Arrayオブジェクトの concat() メソッドを使用します。

const vegetables = ["broccoli", "onion", "spinach"]
const newVegetables = vegetables.concat("carrot")

両方の変数を出力して、挙動の違いを確認してみましょう。

console.log(vegetables)
// ["broccoli", "onion", "spinach"]
console.log(newVegetables)
// ["broccoli", "onion", "spinach", "carrot"]

このように、元の vegetables 配列は一切変更されておらず、newVegetables には「vegetables のコピー＋ concat() で追加した "carrot"」からなる新しい配列が格納されています。

concat() も複数の要素に対応しており、先ほどの push() の例と同じようにカンマ区切りで引数を渡せます。

const vegetables = ["broccoli", "onion", "spinach"]
const newVegetables = vegetables.concat("carrot", "green beans", "kale")

補足：スプレッド構文でも新しい配列を作れる

ES2015以降では、スプレッド構文（...）を使って、元の配列を壊さずに新しい配列を生成する書き方も広く使われています。

const newVegetables = [...vegetables, "carrot"]

concat() と同様に非破壊的な操作なので、Reactなどのイミュータビリティ（状態の不変性）が重視される場面でもよく利用されます。

まとめ

2つの配列メソッドを混同しないことがとても重要です。最後にもう一度おさらいしましょう。

• push()：元の配列を変更する（破壊的メソッド）
• concat()：新しい配列を返す（作成する）（非破壊的メソッド）

「元のデータを書き換えてよいかどうか」を基準に、目的に合ったメソッドを選択してください。