JavaScriptのObject.assign()メソッドとは？オブジェクトのコピーとマージをわかりやすく解説

JavaScriptには、オブジェクトを操作するためのさまざまなメソッドを備えたObjectクラスが用意されています。この記事では、その中でも特に便利なObject.assign()メソッドに焦点を当て、基本的な使い方から実践的な活用例まで詳しく解説します。

前提知識：JavaScriptのオブジェクトとは

まずおさらいとして、JavaScriptにおけるオブジェクトは、Pythonの辞書（dict）に似たデータ型で、「キー（key）と値（value）」のペアで構成されます。例えば、Harryというオブジェクトを作ると、次のようなキーと値のペアを持つことができます。

let Harry = {
  firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: {
    name: 'Hedwig',
    animal: 'owl'
  }
};

基本ルールとして、コロンの左側がキー（プロパティ名）、右側が値になります。ほとんどのキーと値はシンプルですが、最後のpetプロパティだけ少し特殊です。petもキーであることには変わりありませんが、その値自体がさらに2つのキーと値のペアを持つオブジェクトになっています。このような構造を「ネストされたオブジェクト（入れ子のオブジェクト）」と呼びます。

Object.assign()の基本構文

Object.assign(target, ...sourceObjs)

Objectクラスにはassign()というメソッドがあり、1つ以上のソースオブジェクト（コピー元）をターゲットオブジェクト（コピー先）にコピーできます。実際のコードを見てみましょう。

let hpChar = {
  firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: {
    name: 'Hedwig',
    animal: 'owl'
  }
};

Object.assign({}, hpChar);
console.log(hpChar, '\n');

Object.assign(hpChar, {
  firstName: 'Hermione',
  lastName: 'Grainger',
  pet: {
    name: 'Crookshanks',
    animal: 'cat'
  }
});

console.log(hpChar);

コードを順番に見ていきましょう。まず、hpCharというオブジェクトリテラルを定義しています。このオブジェクトは、firstName、lastName、age、house、petという5つのプロパティを持ち、petプロパティの値はそれ自体がオブジェクトです。

次に登場するのが、本題のObject.assign()メソッドです。このメソッドは2つ以上の引数を受け取ります。最初の引数は必ずターゲットオブジェクト（値を代入したい対象）です。ここでは空のオブジェクト{}を指定しています。

2つ目の引数はコピー元となるソースオブジェクトです。ここでは先ほど定義したhpCharを指定しています。

続く行でコンソールに出力すると、結果は次のようになります。

{
  firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Hedwig', animal: 'owl' }
}

出力結果に大きな変化はないように見えますね。これは、hpCharを空のオブジェクトにコピーした、つまりオブジェクトを複製しただけだからです。

既存のオブジェクトへの上書き（マージ）

では、今度は空のオブジェクトではなく、hpChar自身をターゲットにして、一部の値を変更してみましょう。ソースオブジェクト側で指定しなかったプロパティは変更されず、そのまま保持されます。

Object.assign(hpChar, {
  firstName: 'Hermione',
  lastName: 'Grainger',
  pet: {
    name: 'Crookshanks',
    animal: 'cat'
  }
});

この場合、コンソールの出力は次のようになります。

{
  firstName: 'Hermione',
  lastName: 'Grainger',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Crookshanks', animal: 'cat' }
}

firstName、lastName、petは新しい値で上書きされましたが、ageとhouseは元の値が保たれているのがわかります。これが、同じプロパティを持つ2つのオブジェクトをマージする際の動作です。

3つ以上のオブジェクトをマージする

では、異なるプロパティを持つ3つのオブジェクトをマージするとどうなるでしょうか？

var obj1 = {
  foo: 1
};

var obj2 = {
  bar: 2
};

var obj3 = {
  baz: 3
};

Object.assign(obj1, obj2, obj3);

console.log(obj1);

ここではobj1がターゲット、obj2とobj3がソースオブジェクトです。重複するプロパティがないため、すべてのプロパティがそれぞれの値とともにobj1へマージされます。

{ foo: 1, bar: 2, baz: 3 }

注意点：浅いコピー（シャローコピー）であること

補足として、Object.assign()は「浅いコピー（シャローコピー）」を行う点に注意が必要です。ネストされたオブジェクト（今回の例でいうpetなど）は参照がコピーされるだけで、深い複製は行われません。完全に独立したコピーが必要な場合は、structuredClone()やJSON.parse(JSON.stringify())といった方法を検討しましょう。

まとめ

以上、Object.assign()メソッドの基本的な使い方を解説しました。オブジェクトの複製やマージは日常的に使うテクニックなので、ぜひマスターしておきましょう。これらの概念を理解できれば、ReactやVue.jsなどのJavaScriptフレームワークの学習にも一歩近づきます。

関連記事

• JavaScript Object.keys()の使い方
• JavaScript let宣言 ステップバイステップガイド
• JavaScript typeof演算子の使い方
• JavaScript文字列検索：ステップバイステップガイド
• JavaScript変数の基礎