JavaScript: スプレッド構文によるオブジェクトのコピー、マージ、上書きなど

2024-10-062024-12-22

以下に、JavaScriptのスプレッド構文（Spread Operator）を使ったオブジェクト操作についての技術記事を記述します。備忘録として使えるように、基本的な使い方から応用までカバーしています。

JavaScriptのスプレッド構文を使ったオブジェクト操作

スプレッド構文とは？

スプレッド構文（...）は、ES6（ECMAScript 2015）で導入された機能で、配列やオブジェクトを展開（スプレッド）して、新しい配列やオブジェクトを生成することができます。主に「展開」「コピー」「マージ」の操作を効率的に行うことができるため、使い勝手の良い構文です。

この記事では、スプレッド構文を使ったオブジェクトの操作に焦点を当てます。

基本構文

オブジェクトのスプレッド構文は、オブジェクトのキーと値のペアを新しいオブジェクトに展開する際に使用します。以下はその基本的な例です。

const original = { name: 'Alice', age: 25 };

// スプレッド構文で新しいオブジェクトを作成
const copy = { ...original };

console.log(copy); // { name: 'Alice', age: 25 }

original オブジェクトをスプレッド構文で展開し、新しいオブジェクト copy を生成しています。この操作は浅いコピー（shallow copy）であり、ネストされたオブジェクトは参照渡しされます。

オブジェクトのマージ

スプレッド構文は、複数のオブジェクトを1つにマージする際にも便利です。スプレッド構文で展開する順番によって、プロパティが上書きされることがあります。

const user = { name: 'Alice', age: 25 };
const details = { age: 30, city: 'New York' };

// オブジェクトのマージ
const merged = { ...user, ...details };

console.log(merged); // { name: 'Alice', age: 30, city: 'New York' }

この例では、user と details オブジェクトがマージされています。マージの際に age プロパティは details オブジェクトの値で上書きされ、merged オブジェクトには age: 30 として格納されます。

上書きのルール:
スプレッド構文でマージする際、同じキーを持つプロパティがあった場合は、右側にあるオブジェクトのプロパティで上書きされます。

新しいプロパティの追加

オブジェクトのスプレッド構文は、新しいプロパティを追加する際にも使えます。

const original = { name: 'Alice', age: 25 };

// 新しいプロパティを追加
const updated = { ...original, city: 'New York' };

console.log(updated); // { name: 'Alice', age: 25, city: 'New York' }

このように、original オブジェクトに city プロパティを追加して、新しいオブジェクト updated を生成しています。

ネストされたオブジェクトのコピー

スプレッド構文は浅いコピー（shallow copy）であるため、ネストされたオブジェクトがある場合は注意が必要です。

const original = { 
  name: 'Alice', 
  address: { city: 'New York', zip: '10001' } 
};

// 浅いコピー
const copy = { ...original };

// ネストされたオブジェクトを変更
copy.address.city = 'San Francisco';

console.log(original.address.city); // 'San Francisco'

この例では、original と copy は異なるオブジェクトですが、address プロパティは参照渡しされているため、copy の address.city を変更すると、original の address.city も変更されます。ネストされたオブジェクトを完全にコピーしたい場合は、ディープコピー（deep copy）を行う必要があります。

ディープコピーの例:
ディープコピーはJSON.parse/JSON.stringifyを使う方法やlodashのcloneDeepメソッドを使うなどの方法があります。

// JSON.parse/JSON.stringifyを使ったディープコピー
const deepCopy = JSON.parse(JSON.stringify(original));

// deepCopyを変更してもoriginalには影響しない
deepCopy.address.city = 'San Francisco';

console.log(original.address.city); // 'New York'

スプレッド構文の応用例

条件付きプロパティの追加

プロパティを条件に基づいてオブジェクトに追加したい場合、スプレッド構文と条件式を組み合わせることで実現できます。

const baseObject = { name: 'Alice', age: 25 };
const isMember = true;

// isMemberがtrueの場合のみ、roleプロパティを追加
const updatedObject = { 
  ...baseObject, 
  ...(isMember && { role: 'Member' }) 
};

console.log(updatedObject); // { name: 'Alice', age: 25, role: 'Member' }