JavaScriptで配列を扱っていると、「元の配列を残したままコピーした配列を使いたい」という場面があります。
そんなときに便利なのが スプレッド構文（…） です。
スプレッド構文を使えば簡単に配列をコピーでき、コピーした配列を加工しても元の配列は壊れません。
この記事では、配列をコピーする基本の方法と、コピーした配列をシャッフルしても元の配列に影響しない実例を紹介します。
コード
const males = ['太郎', '次郎', '三郎'];
const malesCopy = [...males];
console.log(malesCopy);
// 出力: ['太郎', '次郎', '三郎']
const females = ['花子', '恵子', '愛子'];
const persons = [...males, ...females];
console.log(persons);
// 出力: ['太郎', '次郎', '三郎', '花子', '恵子', '愛子']
// 配列をシャッフルする関数（元の配列を直接変更する）
const shuffleArray = (ary) => {
let len = ary.length;
while (len) {
let i = Math.floor(Math.random() * len);
let last = ary[--len];
ary[len] = ary[i];
ary[i] = last;
}
return ary;
};
const shuffled = shuffleArray([...persons]);
console.log(shuffled);
// 出力例: ['恵子', '三郎', '太郎', '花子', '次郎', '愛子']
// （順番はランダムなので実行ごとに変わる）
console.log(persons);
// 出力: ['太郎', '次郎', '三郎', '花子', '恵子', '愛子']
// → コピーして渡したので、元の persons はそのまま残っている
解説
1. 配列のコピー
const males = ['太郎', '次郎', '三郎'];
const malesCopy = [...males];
console.log(malesCopy);
// 出力: ['太郎', '次郎', '三郎']
malesという配列を作っています。malesCopy = [...males]で スプレッド構文 を使ってコピーしています。- コピーした配列は元の配列と独立しているので、
malesCopyを操作してもmalesは変わりません。
2. 配列の結合
const females = ['花子', '恵子', '愛子'];
const persons = [...males, ...females];
console.log(persons);
// 出力: ['太郎', '次郎', '三郎', '花子', '恵子', '愛子']
malesとfemalesの2つの配列を、スプレッド構文を使って結合しています。personsという新しい配列に、すべての要素が順番通りにコピーされます。- 元の配列
malesやfemalesは変更されません。
3. 配列のシャッフル
// 配列をシャッフルする関数（元の配列を直接変更する）
const shuffleArray = (ary) => {
let len = ary.length;
while (len) {
let i = Math.floor(Math.random() * len);
let last = ary[--len];
ary[len] = ary[i];
ary[i] = last;
}
return ary;
};
const shuffled = shuffleArray([...persons]);
console.log(shuffled);
// 出力例: ['恵子', '三郎', '太郎', '花子', '次郎', '愛子']
// （順番はランダムなので実行ごとに変わる）
shuffleArrayは配列をランダムに並べ替える関数です（詳しくは別ページで解説しています）。- 重要なポイント：
[...persons]でコピーした配列を渡しています。 - そのため、シャッフルしても元の
personsはそのまま残ります。
console.log(persons);
// 出力: ['太郎', '次郎', '三郎', '花子', '恵子', '愛子']
- コピーを使わずに直接渡すと
persons自体がシャッフルされてしまいます。 - コピーを使うことで、元の配列を安全に保ちながら新しい配列を操作できるのです。
まとめ
- スプレッド構文
...を使うと、配列のコピーや結合が簡単にできます。 - コピーした配列は元の配列と独立しているので、自由に加工やシャッフルが可能です。
- 元の配列を残したまま操作したいときには、コピーして使うのが基本です。
Web制作を学ぶならUdemy
私は動画学習プラットフォームのUdemyでプログラミングを学習しています。
HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。
興味がある方はUdemyの講座をチェックしてください。
実際に私が受講した講座はこちら👇
Udemyでは頻繁にセールをやっていて、90％オフになることも！
気になる講座はセール時に購入するのがおすすめです。
