JavaScriptで配列をコピーする"本当に"正しい方法

JavaScriptで注意が必要なことの１つが配列やオブジェクトのコピーです。

間違った方法でコピーしてしまうと予期せぬ動作やバグの原因にもなりかねません。

そこでここでは配列を完全にコピーするための本当に正しい方法を解説します。

このページの目次

配列をコピーするときにやりがちなNG例
配列を深い（ディープ）コピーするには
連想配列をコピーする場合もディープコピーが必要
ここまでのまとめ

配列をコピーするときにやりがちなNG例

まず配列コピーで絶対してはいけないNG例を紹介します。

そのNG例とは配列を別の変数にそのまま代入してしまうこと

例えば次のように配列をコピーしている（つもり）のコード例があるとしましょう。

var original = ['A', 'B', 'C'];
var cloned = original;

1 2	var original = ['A', 'B', 'C']; var cloned = original;

上コードでは cloned = original; のように別変数に配列を代入しています。一見正しそうですが実は全く意味をなさない間違ったコードです。

本当に間違えているかは次のコードを書いて実行してみれば分かるはず

cloned[0] = 'X';
cloned[1] = 'Y';
cloned[2] = 'Z';

console.log(original);
console.log(cloned);

cloned[0] = 'X';

cloned[1] = 'Y';

cloned[2] = 'Z';

console.log(original);

console.log(cloned);

コピー先の配列 cloned を書き換え、 original と cloned の両方をコンソール表示しています。

そして次がコンソール表示された original の内容、

[ 'X', 'Y', 'Z' ]

1	[ 'X', 'Y', 'Z' ]

そして次がコンソール表示された cloned の内容

[ 'X', 'Y', 'Z' ]

1	[ 'X', 'Y', 'Z' ]

・・・見てわかるように cloned の変更が original には反映されちゃってます。

こうなる理由は代入によって浅いコピー（Shallow Copy）が起きてしまったためです。

普通の数値などの変数の場合、別変数に代入すれば完全に別物として扱われます。しかし配列（あるいはオブジェクト）の場合はコピーと言っても・・・

深い（ディープ）コピー【Deep Copy】
浅い（シャロー）コピー【Shallow Copy】

・・・の２種類があります。

シャローコピーの場合はオリジナル配列とクローン配列は同じ参照（データのある場所）を共有しているにすぎません。そのため一方を変更すればもう一方も変更されてしまうという訳です。

ここら辺はポインタの概念がある言語（例えばC言語など）を学べば分かりやすいですが、そういうものだと思っておけば問題ありません。

なので結論としては完全に配列をコピーするにはディープコピーする必要があるという訳です。

配列を深い（ディープ）コピーするには

＊訂正＊

コメントでご指摘いただいた通り、Array.from は浅いコピーでした。なのでディープコピーという言葉を使うのは正しくなかったです。以下はコピー時に元配列に反映させない方法になります。

ではJavaScriptで配列（Array）をディープコピーするにはどうすればいいか・・・

という話ですが Array.from という配列専用のコピーメソッドを使えばOKです。

使い方はコピー元の配列を original として次のように書くだけ

var cloned = Array.from(original);

1	var cloned = Array.from(original);

これで cloned が original のディープコピーして作成されます。

例えば次は Array.from を使い配列をコピーし、コピー元・先をコンソール表示するコード例

var original = ['A', 'B', 'C'];
var cloned = Array.from(original);

cloned[0] = 'D';
cloned[1] = 'E';
cloned[2] = 'F';

console.log(original);
console.log(cloned);

var original = ['A', 'B', 'C'];

var cloned = Array.from(original);

cloned[0] = 'D';

cloned[1] = 'E';

cloned[2] = 'F';

console.log(original);

console.log(cloned);

このコードを実行すると cloned が original の浅いコピー配列として作成されます。

そして次がコピー元の配列 original のコンソール表示、

[ 'A', 'B', 'C' ]

1	[ 'A', 'B', 'C' ]

そして次がコピー先の配列 cloned のコンソール表示です。

[ 'D', 'E', 'F' ]

1	[ 'D', 'E', 'F' ]

・・・今度は無事 cloned の変更が original に反映されないようになりました。

配列をコピーするときは、この例のようにディープコピーしてあげれば問題ありません。

もし配列代入を使ってしまうと、予想しない動作が起こるので要注意です。
意図的でない場合以外は基本的には Array.from を使うのがほとんどだと思います。

連想配列をコピーする場合もディープコピーが必要

ここまでで配列のコピー方法についてまとめてきました。

コピー種類にはシャローとディープの２つがあり、データも含めて完全コピーするにはディープコピーするのを忘れないことが重要です。

そして配列同様、連想配列（オブジェクト）の場合も完全コピーにディープコピーが必要になります。

その詳しいやり方やコード例は次記事でまとめた通り

PisukeCode - Web開発まとめ

JavaScriptで連想配列（オブジェクト）のコピーをする正しい方法

https://pisuke-code.com/js-correct-way-of-object-copy

JavaScriptでよく使うデータ型と言えば連想配列（あるいはオブジェクトとも言う）これをコピーする場合、間違った方法を使うとバグや不具合の原因になります。しかもエラーも出ないので自分でミスにも気づきにくいのが厄介な所です。ここでは連想配列をコピーする本当に正しい方法とコード例についてまとめました。連想配列コピーのNG例まず連想配列コピーでやってはいけないNG例を紹介します。それはある変数に連想配列をそのまま代入してしまうことこれをやってしまうとコピー元とコピー先のデータが共有されてしまいます。例...

配列と同じく連想配列のコピーでもコピー方法には要注意です。

ここまでのまとめ

ということで配列をコピーする方法まとめ

コピーにシャローコピーを使ってはダメ
浅いコピーだとコピー元とコピー先の参照（データのある場所）が共有されてしまう
そのため一方を変更するともう一方も変更されてしまうことに要注意！
コピーは基本ディープコピーを使う
配列の場合、ディープコピーするには Array.from を使えばOK
使用することでコピー元とコピー先の配列が完全に別のものとして扱える

浅いコピー（シャローコピー）が必要になる場面はあまりないと思います。

なので配列コピーする場合はディープコピーを使うのが安全です。