【JavaScript】配列に要素を追加する方法

2024.08.24

JavaScriptで配列に要素を追加する方法は複数あります。選ぶときの一番大事な軸は「元の配列を変更するか（破壊的）／新しい配列を作るか（非破壊的）」です。とくにReactなどでは、元の配列を変更しない方法が求められます。

この記事では、各メソッドを破壊的・非破壊的で分けて整理し、比較表とES2023の新メソッドまで解説します。

この記事の結論：末尾は push、先頭は unshift、任意位置は splice（いずれも元の配列を変更＝破壊的）。元を変えたくないなら [...array, item]（スプレッド）や concat、任意位置の非破壊なら ES2023 の toSpliced を使います。
スポンサーリンク

末尾・先頭に追加する（push / unshift）

もっとも基本的な追加です。push は末尾、unshift は先頭に追加します。どちらも元の配列を直接変更し（破壊的）、戻り値は変更後の長さです。

JavaScript：push / unshift
const fruits = ["apple", "banana"];

// 末尾に追加（戻り値は新しい長さ）
const len = fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]
console.log(len);    // 3

// 先頭に追加
fruits.unshift("grape");
console.log(fruits); // ["grape", "apple", "banana", "orange"]

なお unshift は要素を全部ずらすため、大量データでは push（末尾）より遅くなります。

任意の位置に追加する（splice）

splice は指定した位置に要素を挿入できます。第1引数が開始位置、第2引数を 0 にすると「削除せずに挿入」になります。これも破壊的です。

JavaScript：spliceで任意位置に挿入
const fruits = ["apple", "banana"];

// インデックス1の位置に挿入（第2引数0=削除しない）
fruits.splice(1, 0, "orange");
console.log(fruits); // ["apple", "orange", "banana"]

反対に要素を削除する方法（splice・filter・pop など）は配列から要素を削除する方法で解説しています。

元の配列を変えずに追加する（spread / concat）

元の配列を変更したくないときは、新しい配列を作るスプレッド構文や concat を使います。Reactの状態更新など、元を変えてはいけない場面で必須です。

JavaScript：spread / concat（非破壊）
const fruits = ["apple", "banana"];

// スプレッド構文（新しい配列を作る）
const a = [...fruits, "orange"];   // 末尾に
const b = ["orange", ...fruits];   // 先頭に

// concat（新しい配列を返す）
const c = fruits.concat("orange");
const d = fruits.concat(["orange", "grape"]); // 配列同士の結合

console.log(fruits); // ["apple", "banana"]（元は変わらない）

破壊的か非破壊的かで選ぶ（比較表）

これまでの方法を、追加位置・破壊的かどうか・戻り値で整理します。「元を変えていいか」でまず絞り込むと選びやすくなります。

方法 追加位置 元の配列 戻り値
push 末尾 変更（破壊的） 新しい長さ
unshift 先頭 変更（破壊的） 新しい長さ
splice 任意 変更（破壊的） 削除した要素の配列
スプレッド [...] 任意 変更しない 新しい配列
concat 末尾 変更しない 新しい配列
toSpliced 任意 変更しない 新しい配列

モダンな非破壊メソッド（toSpliced / with）

ES2023で、非破壊版の toSpliced が追加されました。splice と同じ書き方で、元の配列を変えずに新しい配列を返します。

JavaScript：toSpliced（非破壊のsplice）
const fruits = ["apple", "banana"];

// toSpliced: spliceの非破壊版（ES2023）
const inserted = fruits.toSpliced(1, 0, "orange");
console.log(inserted); // ["apple", "orange", "banana"]
console.log(fruits);   // ["apple", "banana"]（元は変わらない）

似たメソッドに with がありますが、これは「追加」ではなく指定位置の要素を非破壊で差し替えるものです。

JavaScript：with（非破壊の差し替え）
const arr = ["a", "b", "c"];
const replaced = arr.with(1, "X"); // インデックス1を差し替え
console.log(replaced); // ["a", "X", "c"]
console.log(arr);      // ["a", "b", "c"]（元は変わらない）

配列の変換・集計には map / filter / reduce も便利です。使い方はmap・filter・reduceの使い方、条件で要素を取り出すなら配列から条件に合う要素を取り出す方法を参考にしてください。

よくある質問（FAQ）

QJavaScriptで配列に要素を追加する方法は？
Apush()（末尾）、unshift()（先頭）、splice(index, 0, item)（任意位置）が破壊的な追加です。非破壊的に追加するなら [...array, item]（スプレッド）やconcat()、ES2023の toSpliced() を使います。
Qunshift()とpush()の速度差は？
Aunshift() は配列全体をずらすため O(n) の操作です。push() は O(1)（定数時間）。パフォーマンスが重要な場合は末尾への操作（push）を優先しましょう。
Q配列への追加を非破壊的に行うには？
Aスプレッド構文 [...array, item] や concat()、任意位置なら toSpliced() でオリジナル配列を変更せず新しい配列を返します。Reactの状態管理など、元の配列を変更できない場面で重要です。
QpushとtoSplicedはどう使い分ける？
A元の配列をその場で変更してよいなら push など破壊的メソッドが手軽です。Reactのstateのように元を変えてはいけない場合は、新しい配列を返す toSpliced やスプレッドを使います。

まとめ

配列への追加は、まず「元の配列を変更してよいか」で選ぶのがコツです。変更してよいなら末尾 push・先頭 unshift・任意位置 splice、変更したくないなら [...array, item]・concat・toSpliced を使います。

破壊的メソッドは戻り値が「長さ」や「削除分」で、非破壊メソッドは「新しい配列」を返す点も覚えておくと、const newArr = array.push(...) のような取り違えを防げます。用途に合わせて使い分けましょう。