JavaScriptのスプレッド構文で配列やオブジェクトを結合する方法｜初心者向け完全ガイド

1. 配列の結合にスプレッド構文を使う

1. 配列の結合にスプレッド構文を使う

JavaScriptの配列を結合するときは、concatメソッドを使う方法もありますが、スプレッド構文を使うとより簡単です。スプレッド構文は配列の要素を一つずつ取り出して、新しい配列にまとめることができます。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// スプレッド構文で結合
const combinedArray = [...array1, ...array2];
console.log(combinedArray);

[1, 2, 3, 4, 5, 6]

このように、...array1と...array2を使うだけで、二つの配列が一つにまとめられます。

2. 配列の途中に別の配列を挿入する

2. 配列の途中に別の配列を挿入する

スプレッド構文は配列の途中に別の配列を挿入することもできます。順番も自由に指定可能です。

const fruits = ['リンゴ', 'バナナ'];
const vegetables = ['ニンジン', 'キャベツ'];

// 配列の途中に挿入
const mixed = [...fruits, 'みかん', ...vegetables];
console.log(mixed);

["リンゴ", "バナナ", "みかん", "ニンジン", "キャベツ"]

このように、任意の場所に要素や別の配列を挿入できるのもスプレッド構文の便利な特徴です。

3. オブジェクトの結合にスプレッド構文を使う

3. オブジェクトの結合にスプレッド構文を使う

JavaScriptのオブジェクトもスプレッド構文で簡単に結合できます。オブジェクトのプロパティをまとめて新しいオブジェクトを作ることができます。

const person1 = { name: '太郎', age: 25 };
const person2 = { job: 'エンジニア', city: '東京' };

// オブジェクトの結合
const mergedPerson = { ...person1, ...person2 };
console.log(mergedPerson);

{ name: "太郎", age: 25, job: "エンジニア", city: "東京" }

このようにオブジェクト同士を結合して、新しいオブジェクトを作ることができます。

4. オブジェクトのプロパティを上書きする

4. オブジェクトのプロパティを上書きする

結合する際、同じプロパティがある場合は、後ろに書いたオブジェクトの値で上書きされます。

const defaultSettings = { theme: 'light', fontSize: 12 };
const userSettings = { fontSize: 16 };

// 後のオブジェクトで上書き
const settings = { ...defaultSettings, ...userSettings };
console.log(settings);

{ theme: "light", fontSize: 16 }

このように、ユーザー設定などを上書きして便利に使えます。

5. 配列のコピーにもスプレッド構文を使う

5. 配列のコピーにもスプレッド構文を使う

スプレッド構文は配列を結合するだけでなく、コピーを作るときにも便利です。元の配列を壊さずに新しい配列を作れます。

const original = [1, 2, 3];
const copy = [...original];

copy.push(4);

console.log(original);
console.log(copy);

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

このように、元の配列は変更されず、新しい配列にだけ変更が反映されます。

6. オブジェクトのコピーにもスプレッド構文を使う

6. オブジェクトのコピーにもスプレッド構文を使う

オブジェクトも同様にコピーが可能です。浅いコピーになりますが、便利に使えます。

const originalObj = { a: 1, b: 2 };
const copyObj = { ...originalObj };

copyObj.b = 3;

console.log(originalObj);
console.log(copyObj);

{ a: 1, b: 2 }
{ a: 1, b: 3 }

元のオブジェクトはそのままで、新しいオブジェクトに変更を加えることができます。

7. スプレッド構文と関数呼び出し

7. スプレッド構文と関数呼び出し

スプレッド構文は関数に配列を渡すときにも使えます。複数の引数として展開できます。

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

const numbers = [1, 2, 3];

console.log(sum(...numbers));

6

このように、配列を個別の引数として簡単に渡せるのも便利な使い方です。

8. 注意点：深いコピーには向かない

8. 注意点：深いコピーには向かない

スプレッド構文は便利ですが、オブジェクトや配列の中にさらにオブジェクトがある場合、浅いコピーしか作れません。深いコピーが必要な場合は別の方法を使う必要があります。

const nested = { a: 1, b: { c: 2 } };
const shallowCopy = { ...nested };

shallowCopy.b.c = 5;

console.log(nested.b.c); // 5に変わってしまう

5

この点に注意しながら、便利に使うとよいでしょう。

9. スプレッド構文まとめ

9. スプレッド構文まとめ

JavaScriptのスプレッド構文を使うと、配列やオブジェクトの結合、コピー、関数呼び出しなどを簡単に行えます。初心者でも短いコードで直感的に操作できるので、ぜひ日常的に使って慣れていきましょう。

まとめ

まとめ

今回の記事では、JavaScriptのスプレッド構文を使った配列やオブジェクトの結合、コピー、関数呼び出しの方法について詳しく解説しました。スプレッド構文は「...」という記号で、配列やオブジェクトの中身を展開して新しい配列やオブジェクトにまとめる便利な構文です。配列の結合では[...array1, ...array2]のように書くことで、複数の配列を簡単にまとめられます。また、配列の途中に別の配列や要素を挿入することも自由に行えます。オブジェクトでは{...obj1, ...obj2}で結合でき、同じプロパティがある場合は後ろのオブジェクトの値で上書きされる仕組みです。さらに、配列やオブジェクトのコピーを作るときにもスプレッド構文は便利で、元のデータを壊さずに新しい変数にコピーできます。

さらに、スプレッド構文は関数の引数に配列を展開して渡すときにも役立ちます。例えばsum(...numbers)のように書くことで、配列の各要素を個別の引数として渡せます。ただし、スプレッド構文は浅いコピーしか作れないため、オブジェクトや配列の中にさらにオブジェクトがある場合は深いコピーが必要なときには注意が必要です。このように、スプレッド構文を正しく理解すれば、配列やオブジェクトの操作を効率的に行うことができます。

実際のコードを見ながら、配列やオブジェクトを結合したりコピーしたりすることで、日常的なプログラミングでの操作が直感的に理解できるようになります。初心者でも簡単に扱える構文ですので、繰り返し練習して慣れることをおすすめします。