JavaScriptで元の配列の値に影響を与えずに新しい配列を作成する方法

JavaScriptでは、元の配列に影響を与えることなく、既存の配列の値をコピーした新しい配列を作成したい場面がよくあります。この記事では、その具体的な実現方法をわかりやすく解説します。

元となる配列

まず、次のような配列があると仮定しましょう。

var listOfNames = ["John", "Mike", "Sam", "Carol"];

JSON.parse(JSON.stringify())を使った方法

JSON.parse(JSON.stringify()) を使うと、配列を一度文字列に変換してから再度パースすることで、完全に独立した新しい配列を作成できます。この方法なら、元の配列の値には一切影響を与えません。

コード例

function createNewArray(listOfNames) {
  return JSON.parse(JSON.stringify(listOfNames));
}

var listOfNames = ["John", "Mike", "Sam", "Carol"];
var namesArray = listOfNames.slice();

console.log("新しい配列=");
console.log(namesArray);

なお、上記の例では slice() メソッドも併用しています。slice() を引数なしで呼び出すと、配列全体の浅いコピー（シャローコピー）を簡単に作成できます。

プログラムの実行方法

上記のプログラムを実行するには、Node.jsで次のコマンドを使用します。ここでは、ファイル名を demo111.js として保存しています。

node demo111.js

実行結果

上記のコマンドを実行すると、コンソールに以下の出力が表示されます。

PS C:\Users\Amit\JavaScript-code> node demo111.js
新しい配列=
[ 'John', 'Mike', 'Sam', 'Carol' ]

補足：その他の配列コピー方法

配列を複製する方法は、ほかにもいくつかあります。

• スプレッド構文：[...listOfNames] と書くだけで簡潔にコピーできます。
• Array.from()：Array.from(listOfNames) を使って新しい配列を生成できます。

ただし、slice() やスプレッド構文によるコピーはすべて「浅いコピー」です。ネストされたオブジェクトまで完全に複製したい場合は、冒頭で紹介した JSON.parse(JSON.stringify()) や、ES2022で導入された structuredClone() の利用を検討するとよいでしょう。