JavaScriptでオブジェクトを結合する際によく使用される`Object.assign()`メソッド。このメソッドの使い方と活用方法について、実践的なコード例を交えて詳しく解説します。

Object.assign()とは

`Object.assign()`は、1つ以上のソースオブジェクトから、ターゲットオブジェクトにプロパティをコピーするメソッドです。

基本的な構文は以下の通りです：

Object.assign(target, ...sources)

基本的な使い方

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 4, c: 5 }
console.log(target); // { a: 1, b: 4, c: 5 }

新しいオブジェクトを作成する

元のオブジェクトを変更せずに、新しいオブジェクトを作成する場合：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const newObject = Object.assign({}, target, source);
console.log(newObject); // { a: 1, b: 4, c: 5 }
console.log(target); // { a: 1, b: 2 } - 変更されていない

複数のオブジェクトの結合

const object1 = { a: 1 };
const object2 = { b: 2 };
const object3 = { c: 3 };

const merged = Object.assign({}, object1, object2, object3);
console.log(merged); // { a: 1, b: 2, c: 3 }

よくある使用例

デフォルト値の設定

const defaults = { size: 'medium', color: 'red' };
const userPreferences = { color: 'blue' };

const settings = Object.assign({}, defaults, userPreferences);
console.log(settings); // { size: 'medium', color: 'blue' }

オブジェクトのクローン作成

const original = { x: 1, y: 2 };
const clone = Object.assign({}, original);

注意点

浅いコピーであること

`Object.assign()`は浅いコピーを行います：

const obj1 = { 
  a: 1, 
  b: { 
    c: 2 
  } 
};
const copy = Object.assign({}, obj1);

copy.b.c = 3;
console.log(obj1.b.c); // 3 - ネストされたオブジェクトは参照がコピーされる

プロパティの上書き

後のソースオブジェクトのプロパティが、前のソースオブジェクトのプロパティを上書きします：

const target = { a: 1, b: 2 };
const source1 = { b: 3 };
const source2 = { b: 4 };

Object.assign(target, source1, source2);
console.log(target.b); // 4

代替手段

ES2018以降では、スプレッド構文を使用することもできます：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const result = { ...target, ...source };
console.log(result); // { a: 1, b: 4, c: 5 }

まとめ

`Object.assign()`は、オブジェクトの結合やコピーに非常に便利なメソッドです。ただし、浅いコピーであることや、プロパティの上書きの挙動には注意が必要です。モダンなJavaScriptでは、スプレッド構文という代替手段も利用可能です。用途に応じて適切な方法を選択することが重要です。