【JavaScript入門】配列をコピーする3つの方法：スプレッド構文・forループ・Array.from()を徹底解説

JavaScriptで配列をコピーする場合、代入演算子（=）を使うだけでは複製を作れません。試したことがある方なら、元の配列への参照が作られるだけで、独立したコピーにはならないことに驚いた経験があるかもしれません。これはなぜなのでしょうか？

このガイドでは、JavaScriptで配列をコピーする方法について解説します。3つの代表的なコピー手法のコード例を通して、実際に配列をコピーできるようになるまで丁寧に説明していきます。

JavaScriptで配列をコピーする際の問題点

一見すると、「=」演算子は新しい変数に配列をコピーしているように見えます。しかし、それはコピーというよりポインター（参照）です。「=」演算子は元の配列への参照を作るだけであり、既存の配列の複製は作りません。

まず、他のコードを一切使わずに、代入演算子だけで配列のコピーを作ってみましょう。

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = berries;

console.log(fruits);

このコードを実行すると、次のような結果になります。

[ "Strawberry", "Gooseberry", "Raspberry" ]

一見すると、配列が正しくコピーされたように見えます。「fruits」には「berries」配列のすべての値が含まれています。

では次に、「fruits」配列に要素を追加してみましょう。

fruits.push("Melon");
console.log(fruits);
console.log(berries);

「Melon」をfruits配列に追加し、「fruits」と「berries」の両方の値をコンソールに出力します。

[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

「fruits」と「berries」の両方に同じ値が含まれています。これは、厳密には配列をクローンしていないためです。単に参照を作っただけなのです。

つまり、「berries」配列に変更を加えるたびに、その変更は「fruits」配列にも反映されてしまいます。

JavaScriptで配列をコピーする3つの方法

代入演算子では配列をコピーできないため、別のアプローチを使う必要があります。幸いにも、配列のコピーを作成する方法はいくつもあります。主な3つの方法は以下のとおりです。

• スプレッド構文（スプレッド演算子）を使う
• forループを使う
• Array.from()を使う

それでは、1つずつ詳しく見ていきましょう。

スプレッド構文を使う方法

スプレッド構文はES6（ECMAScript 2015）で導入された機能で、反復可能オブジェクト（iterable）の中身にアクセスできます。この構文は、配列のシャローコピー（浅いコピー）を作成する際によく使われます。

スプレッド構文は、三点リーダー（…）のように3つのドットで表します。先ほどの「berries」配列のコピーを作ってみましょう。

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [...berries];
fruits.push("Melon");

スプレッド構文を使って配列のコピーを作成しました。配列の値を確認して、正しく動作しているかチェックしてみます。

console.log(berries);
console.log(fruits);

実行結果：

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

「Melon」は「fruits」配列にのみ追加されました。これは、スプレッド構文によって「berries」配列の複製を作ったからです。これにより「fruits」配列は完全に独立した配列となり、その値は「berries」配列とは分離されています。

forループを使う方法

定番中の定番とも言えるforループは、配列のコピーを作成する確実な方法です。

この方法は、コードの行数が多くなるため、スプレッド構文ほど人気はありません。しかし、forループでもオブジェクトをしっかりとコピーできます。

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [];

for (var i = 0; i < berries.length; i++) {
	fruits[i] = berries[i]
}

ここでは2つの配列「berries」と「fruits」を宣言しています。fruitsは最初は空の配列です。そして、forループを使って「berries」配列の各要素を順番に処理し、リスト内の各アイテムの値を「fruits」配列へコピーしていきます。

テストを実行して、2つの配列が独立しているか確認してみましょう。

fruits.push("Grapefruit");
console.log(berries);
console.log(fruits);

実行結果：

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Grapefruit" ]

成功です！「berries」と「fruits」は、それぞれ独立した2つの配列になりました。

Array.from()を使う方法

Array.from()メソッドは、あらゆる反復可能オブジェクトを配列に変換します。反復可能オブジェクトの各要素を順に処理し、新しい配列に追加していきます。つまり、このメソッドを使えば配列のコピーも可能です。

もう一度、「berries」配列のコピーを作ってみましょう。

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = Array.from(berries);

この方法も、スプレッド構文と同様にわずか2行のコードで済みます。配列のコピーを効率的かつ簡潔に行える方法です。それでは、新しい配列をテストしてみましょう。

fruits.push("Pineapple");
console.log(berries);
console.log(fruits);

実行結果：

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Pineapple" ]

配列のコピーに成功しました！

まとめ

ポイントさえ押さえれば、JavaScriptで配列をコピーするのは簡単です。

独立した配列のコピーを作りたい場合、代入演算子だけでは不十分です。代入演算子は既存の配列への参照（ポインター）を作るだけで、新しい配列は生成しないからです。

配列のコピーを作成するには、スプレッド構文、forループ、Array.from()メソッドのいずれかを使用しましょう。これで、あなたもプロのようにJavaScriptで配列をコピーできるようになります。