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

JavaScriptのピリオド3つを理解するためのイメージ図JS
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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']

このコードでは、array1array2の要素を展開し、新しい配列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 }

このコードでは、obj1obj2のプロパティを展開し、新しいオブジェクト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を作成していますが、元の配列は変更されていません。

まとめ

この記事では、JavaScriptのピリオド3つ(スプレッド構文)について解説しました。

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

また、スプレッド構文を使うことで、非破壊的な操作を行いやすくなり、プログラムの安全性や保守性が向上します。

是非、日々のコーディングでスプレッド構文を活用し、よりシンプルでわかりやすいコードを書いていきましょう。