JavaScriptの配列コピーを簡単に！スプレッド構文で安全に複製する方法

1. スプレッド構文で配列をコピーする基本

1. スプレッド構文で配列をコピーする基本

JavaScriptでは、配列をコピーする場合に、スプレッド構文を使うと簡単に新しい配列を作ることができます。スプレッド構文は「...（三点リーダー）」で表します。

const fruits = ["りんご", "みかん", "バナナ"];
const copyFruits = [...fruits];

console.log(copyFruits);

["りんご", "みかん", "バナナ"]

このように、元の配列fruitsを壊さずにコピーできます。新しい配列copyFruitsは独立しているので、変更しても元の配列には影響しません。

2. 配列をコピーして別の要素を追加する

2. 配列をコピーして別の要素を追加する

スプレッド構文を使うと、コピーするだけでなく、新しい要素を追加して新しい配列を作ることもできます。

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers);

[1, 2, 3, 4, 5]

この例では、numbersをコピーしつつ、新しい数値4と5を追加しています。元の配列は変わりません。

3. 配列の一部だけコピーして新しい配列を作る

3. 配列の一部だけコピーして新しい配列を作る

スプレッド構文とsliceを組み合わせることで、配列の一部分だけコピーして新しい配列を作ることもできます。

const animals = ["犬", "猫", "鳥", "うさぎ"];
const someAnimals = [...animals.slice(1, 3)];

console.log(someAnimals);

["猫", "鳥"]

この例では、slice(1, 3)で元の配列から「猫」と「鳥」を取り出し、それをスプレッド構文で新しい配列に展開しています。

4. 二次元配列をコピーする場合の注意点

4. 二次元配列をコピーする場合の注意点

スプレッド構文で二次元配列（配列の中に配列があるもの）をコピーすると、浅いコピーになります。つまり、外側の配列はコピーされますが、内側の配列は元の配列と共有されます。

const matrix = [[1, 2], [3, 4]];
const copyMatrix = [...matrix];

copyMatrix[0][0] = 100;

console.log(matrix);

[[100, 2], [3, 4]]

内側の配列が元の配列と共有されるため、元のmatrixも影響を受けます。二次元配列や多次元配列を安全にコピーしたい場合は、mapやJSON.parse(JSON.stringify())などの方法を使う必要があります。

5. mapで二次元配列をコピーして安全に複製する

5. mapで二次元配列をコピーして安全に複製する

二次元配列をスプレッド構文とmapを組み合わせてコピーすれば、内側の配列も独立したコピーを作れます。

const matrix = [[1, 2], [3, 4]];
const safeCopy = matrix.map(inner => [...inner]);

safeCopy[0][0] = 100;

console.log(matrix);
console.log(safeCopy);

[[1, 2], [3, 4]]
[[100, 2], [3, 4]]

これで元の配列を壊さず、安全に二次元配列をコピーできます。

6. 配列コピーの応用：結合して新しい配列を作る

6. 配列コピーの応用：結合して新しい配列を作る

スプレッド構文を使うと、複数の配列をまとめて新しい配列を作ることもできます。従来のconcatよりもシンプルです。

const array1 = [1, 2];
const array2 = [3, 4];
const mergedArray = [...array1, ...array2];

console.log(mergedArray);

[1, 2, 3, 4]

このようにスプレッド構文は、配列のコピーだけでなく、結合や追加など多くの操作に活用できます。

7. スプレッド構文で関数に配列を渡す

7. スプレッド構文で関数に配列を渡す

配列をコピーするだけでなく、関数に複数の引数として展開して渡すこともできます。

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [10, 20, 30];
console.log(sum(...numbers));

60

このようにスプレッド構文は、配列のコピーや結合だけでなく、関数の引数展開にも使えて便利です。

8. 配列コピーのまとめ的なポイント

8. 配列コピーのまとめ的なポイント

• スプレッド構文（...）を使うと簡単に配列をコピーできる
• コピーは浅いコピーなので、二次元配列には注意
• mapと組み合わせると安全に二次元配列もコピー可能
• 配列の追加や結合も簡単にできる
• 関数の引数展開にも使えるので、覚えておくと便利

スプレッド構文を理解して使いこなすことで、JavaScriptの配列操作がとても楽になり、コードも見やすくなります。初心者でも、コピーや結合などの操作を直感的に書けるようになるので、ぜひ練習してみましょう。

まとめ

まとめ

この記事では、JavaScriptで配列をコピーする方法として、特にスプレッド構文を中心に解説しました。配列コピーは単純な作業に見えますが、元の配列を壊さずに安全にコピーすることは、プログラムの安定性や可読性を保つ上で非常に重要です。スプレッド構文を使えば、簡単に新しい配列を作成でき、コピーだけでなく新しい要素の追加や配列の結合、関数への引数展開など多様な操作が直感的に可能になります。 また、二次元配列や多次元配列の場合はスプレッド構文だけでは浅いコピーになるため、内側の配列が元の配列と共有される点に注意が必要です。こうした場合には、mapを使って内側の配列も展開する方法や、JSON.parse(JSON.stringify())による深いコピーなどを活用することで、データの安全性を保ちながら操作できます。 記事内で示したサンプルコードを順番に試すことで、配列コピーの基本から応用まで理解でき、実際の開発で役立てることができます。さらに、スプレッド構文を使った配列操作はコードを簡潔にし、可読性を高めるため、チーム開発や将来的なメンテナンスにも効果的です。JavaScript初心者でも、配列コピーや結合、関数引数の展開を組み合わせることで、より効率的で安全なコーディングが可能になるでしょう。

サンプルプログラムで振り返る

例えば、一次元配列のコピーは次のように簡単に実現できます。

const fruits = ["りんご", "みかん", "バナナ"];
const copyFruits = [...fruits];
copyFruits.push("ぶどう");

console.log(fruits); // 元の配列は変わらない
console.log(copyFruits); // コピー配列に新しい要素を追加

["りんご", "みかん", "バナナ"]
["りんご", "みかん", "バナナ", "ぶどう"]

二次元配列の場合は、mapと組み合わせることで安全にコピーできます。

const matrix = [[1, 2], [3, 4]];
const safeCopy = matrix.map(inner => [...inner]);

safeCopy[0][0] = 100;

console.log(matrix); // 元の配列は壊れない
console.log(safeCopy); // コピー配列は変更可能

[[1, 2], [3, 4]]
[[100, 2], [3, 4]]