JavaScriptのピリオド3つ入門！7つのサンプルコードで理解しよう

はじめに
●ピリオド3つ（スプレッド構文）とは
- ○スプレッド構文の基本
●スプレッド構文の使い方
●応用例
●注意点と対処法
- ○スプレッド構文の制限
- ○非破壊的な操作を心掛ける
まとめ

はじめに

この記事を読めば、JavaScriptのピリオド3つ（スプレッド構文）を使いこなすことができるようになります。

初心者の方でも分かりやすく解説しているので、ぜひ最後まで読んで理解を深めましょう。

●ピリオド3つ（スプレッド構文）とは

JavaScriptでよく使われるピリオド3つ（…）は、スプレッド構文と呼ばれます。

スプレッド構文は、配列やオブジェクトの要素を展開して、別の配列やオブジェクトに組み込む際に利用されます。

○スプレッド構文の基本

スプレッド構文は、配列やオブジェクトの要素を展開することができます。

例えば、次のように記述することができます。

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];
console.log(array2); // [1, 2, 3, 4, 5, 6]

このコードでは、array1の要素を展開し、新しい配列array2に組み込んでいます。

●スプレッド構文の使い方

スプレッド構文は、さまざまな場面で利用できます。具体的な使用例を紹介します。

○サンプルコード1：配列の要素を展開する

const fruits1 = ['apple', 'banana', 'orange'];
const fruits2 = ['grape', 'melon', ...fruits1];
console.log(fruits2); // ['grape', 'melon', 'apple', 'banana', 'orange']

このコードでは、fruits1の要素をfruits2に展開しています。

○サンプルコード2：オブジェクトのプロパティを展開する

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4, ...obj1 };
console.log(obj2); // { c: 3, d: 4, a: 1, b: 2 }

このコードでは、obj1のプロパティをobj2に展開しています。

○サンプルコード3：関数の引数を展開する

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

このコードでは、関数sumの引数に、配列numbersの要素を展開しています。

●応用例

スプレッド構文を活用することで、さまざまな操作を簡単に行うことができます。

具体的な応用例を紹介します。

○サンプルコード4：配列の結合

const array1 = ['apple', 'banana'];
const array2 = ['grape', 'melon'];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // ['apple', 'banana', 'grape', 'melon']

このコードでは、array1とarray2の要素を展開し、新しい配列combinedArrayに組み込んでいます。

○サンプルコード5：オブジェクトのマージ

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 3, c: 4 }

このコードでは、obj1とobj2のプロパティを展開し、新しいオブジェクトmergedObjに組み込んでいます。

重複するプロパティは後のものが優先されます。

○サンプルコード6：配列の複製

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]

このコードでは、originalArrayの要素を展開し、新しい配列copiedArrayに組み込んでいます。

これにより、元の配列とは別の新しい配列が作成されます。

○サンプルコード7：配列やオブジェクトの要素の変更

const originalArray = [1, 2, 3];
const updatedArray = [...originalArray.slice(0, 1), 10, ...originalArray.slice(2)];
console.log(updatedArray); // [1, 10, 3]

このコードでは、originalArrayの2番目の要素を10に変更した新しい配列updatedArrayを作成しています。

●注意点と対処法

スプレッド構文を使う際には、いくつかの注意点があります。

○スプレッド構文の制限

スプレッド構文は、配列やオブジェクトの展開が可能ですが、深い階層の要素に対しては適用されません。

そのため、深い階層の要素を展開する場合は、別の方法を検討する必要があります。

○非破壊的な操作を心掛ける

スプレッド構文を利用する際、元の配列やオブジェクトを変更せずに新しい配列やオブジェクトを作成することができます。

このような非破壊的な操作は、プログラムの安全性や保守性を向上させるために重要です。

例えば、次のコードでは、元の配列originalArrayを変更せずに、新しい配列updatedArrayを作成しています。

const originalArray = [1, 2, 3];
const updatedArray = [...originalArray.slice(0, 1), 10, ...originalArray.slice(2)];
console.log(originalArray); // [1, 2, 3]
console.log(updatedArray); // [1, 10, 3]

この例では、originalArrayの2番目の要素を10に変更した新しい配列updatedArrayを作成していますが、元の配列は変更されていません。