object.assign・とは？初心者でも理解できる基本と実例ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

object.assign・とは？

object.assign とは JavaScript の標準メソッドのひとつで、複数のオブジェクトから自分のオブジェクトへプロパティをコピーする働きをします。正式名称は Object.assign で、ターゲットとなるオブジェクトと、コピー元となるソースオブジェクトを渡す形で使います。ES6（ECMAScript 2015）で導入され、今も広く使われている基本技術です。

この機能は「物を合体させる」感じに似ていて、複数の辞書のような情報を一つの辞書に集約するイメージです。重要な点は、コピーは浅いコピー（シャローコピー）であることです。つまり、もしソースの値が別のオブジェクトを参照している場合、その参照先のオブジェクト自体は新しく作られず、同じオブジェクトを指す形になります。

基本的な使い方

構文はとてもシンプルです。Object.assign(target, ...sources)。ターゲットオブジェクトへ、1つ以上のソースオブジェクトの列挙可能な自分のプロパティをコピーします。コピーが完了すると、ターゲットオブジェクトが返されます。

実例1: 基本的な結合

const target = { a: 1 };

Object.assign(target, { b: 2 });

結果は target が { a: 1, b: 2 } になります。

実例2: オブジェクトの上書き

const target = { a: 1, c: 3 };

Object.assign(target, { a: 9, b: 2 });

結果は { a: 9, c: 3, b: 2 } になります。ここで同じキーの値はソースの方で上書きされます。

よく使われる活用ケース

前提となるオブジェクトのデフォルト値と、実際に使う値を組み合わせたいときに便利です。よくあるパターンは、空のオブジェクトをターゲットにして defaults の値を設定しつつ、options で実際の値を上書きする方法です。

例: デフォルト値とオプションの組み合わせ

const defaults = { color: 'blue', size: 'M' };

const options = { size: 'L' };

const result = Object.assign({}, defaults, options);

結果は { color: 'blue', size: 'L' } になります。新しい空のオブジェクトをターゲットにすることで、defaults 自体を変更せずに済みます。

注意点と制限

・シャローコピーなので、ネストしたオブジェクトは参照のコピーになります。つまり内部のオブジェクトを別の場所で変更すると、元のオブジェクトにも影響します。

・ターゲットが null または undefined の場合は TypeError が発生します。これは厳密には「ターゲットはオブジェクトでなければならない」という仕様です。

・ソースオブジェクトが null/undefined の場合はコピーされません。複数のソースを渡しても安全です。

・非列挙プロパティや prototype のプロパティ、通常はコピーされません。ただしソースのプロパティが列挙可能な自分のプロパティである場合はコピーされます。

オブジェクトの深いコピーと比較

object.assign は深いコピーではありません。複雑なオブジェクトを「完全に新しい独立したコピー」にしたい場合は、別の方法を使う必要があります。代表的な方法としては、JSON へのシリアライズとデシリアライズを利用する方法や、ライブラリを使って深いコピーを行う方法があります。ただし JSON 化は関数や undefined、シンボルなどは失われるなどの制約があります。

似た使い方との比較

スプレッド構文を使う方法もよくあります。{ ...defaults, ...options } のように書くと、同じくシャローコピーを作ることができます。違いは、オブジェクトを新しく作成して返す点です。Object.assign はターゲットを変更し、そのターゲットを返します。

表でまとめると

<th>項目

説明
構文	Object.assign(target, ...sources)
戻り値	ターゲットオブジェクト
コピーの性質	列挙可能な自分のプロパティをコピー。ネストは参照コピー、深いコピーではない
注意点	ターゲットが null/undefined のときは TypeError。ソースが null/undefined なら無視。プロトタイプのプロパティはコピーされない。

このように object.assign は、日常のコーディングで「複数の設定を一つのオブジェクトにまとめたい」ときにとても役立つ基本ツールです。正しく使えばコードをすっきりさせ、デフォルト値の管理も楽になります。

object.assignの同意語

Object.assign: 複数のオブジェクトのプロパティを1つに結合する、JavaScriptの組み込みメソッド。ターゲットオブジェクトへソースのプロパティをコピーし、同名プロパティは後から来たソースで上書きされる（浅いコピー）。
オブジェクトの結合: 複数のオブジェクトを1つにまとめる操作の総称。Object.assignと同様にプロパティのコピーと結合を指す言い回し。
オブジェクトのプロパティをコピーして結合: ソースオブジェクトのプロパティをターゲットへコピーして、1つのオブジェクトへ統合する行為。
オブジェクトのプロパティをマージ: 複数のオブジェクトのプロパティを1つに統合すること。重複プロパティは後勝ちで上書きされる仕様が一般的。
浅いコピーによるマージ: Object.assignは浅いコピーとして動作するため、ネストしたオブジェクトは参照を共有する点に注意する説明。
ターゲットオブジェクトへコピー: コピー先（ターゲット）オブジェクトに対して、ソースのプロパティを上書きして追加していく操作の説明。
スプレッド構文でのオブジェクト結合: スプレッド演算子を使ってオブジェクトを結合する方法。例: { ...a, ...b }。Object.assignの代替として用いられることが多い。
展開演算子を使った結合: 展開演算子を利用してオブジェクトを結合する考え方。スプレッド構文と同義の概念。
複数オブジェクトの統合: 複数のソースオブジェクトを1つのオブジェクトへ統合する考え方・操作。
プロパティの上書きを伴うマージ: 同名のプロパティがある場合、後から来たソースの値で上書きされる挙動を強調した説明。
オブジェクトの結合（代替手段）: Object.assignの代替として、スプレッド構文など他の方法でオブジェクトを結合する表現。

object.assignの対義語・反対語

不変性の操作: 元のオブジェクトを直接変更せず、新しいオブジェクトを返して値を反映させる考え方・操作の総称。Object.assign が対象を上書きするのに対し、こちらは元オブジェクトを壊さずに更新を行うイメージ。
非破壊的更新: 既存オブジェクトを変更せずに新しいオブジェクトを作成・返す更新方法。副作用を抑えたい場面で使われ、Object.assign の代替として使われることが多い。
オブジェクトの凍結: Object.freeze のようにオブジェクトのプロパティの追加・変更・削除を実質不可能にする性質。更新を禁止する、対になる概念。
新規オブジェクトを返す結合: 既存オブジェクトを直接変更せず、複数のソースを新しいオブジェクトに結合して返す方法（スプレッド演算子など）。元のオブジェクトは不変のまま。
深いコピーを用いた新規生成: 元のオブジェクトを完全に複製してから変更を適用する手法。結果として新しいオブジェクトが作られ、元オブジェクトは影響を受けない点が対比となる。

object.assignの共起語

Object.assign: 複数のソースオブジェクトのプロパティを1つのターゲットオブジェクトにコピーして結合する、JavaScriptの静的メソッドです。
ターゲットオブジェクト: プロパティをコピーの受け皿となるオブジェクト。第1引数として指定します。コピーの結果はこのオブジェクトに反映され、通常は同じオブジェクトが返ります。
ソースオブジェクト: コピー元のオブジェクト。第2引数以降として渡します。複数渡せば順番にプロパティがコピーされます。
プロパティ: コピー対象となるキーと値。オブジェクトの実データの基本単位です。
列挙可能な自身のプロパティ: Object.assign はソースオブジェクトの、列挙可能な自身プロパティのみをコピーします。プロトタイプのプロパティは通常コピーされません。
浅いコピー: Object.assign は浅いコピーなので、ネストしたオブジェクトはその参照だけがコピーされ、元のオブジェクトの変更が影響します。
深いコピー: Object.assign は深いコピーではありません。ネストしたオブジェクトは参照がコピーされます。
マージ: 複数のオブジェクトを1つに結合する動作を指します。冗長なキーは後ろのソースで上書きされます。
スプレッド演算子: 同様の機能を持つ構文です。例: {...a, ...b} は Object.assign(a, b) と同等の効果を得られます。
ポリフィル: Object.assign が使えない環境で同等の機能を提供する補助コードのこと。
ES6 / ES2015: Object.assign はECMAScript 2015（ES6）で追加された標準機能です。
ブラウザサポート: 多くのモダンブラウザはサポートしますが、古い環境ではポリフィルが必要になることがあります。
戻り値: コピー後のターゲットオブジェクトを返します。メソッドチェーンで利用できることが多いです。
同じキーの上書き: ターゲットとソースに同じキーがある場合、後から来たソースの値で上書きされます。
Symbolキーのコピー: シンボルキーもコピー対象になる場合がありますが、環境によって挙動が異なることがあります。
非列挙プロパティ: 非列挙プロパティはコピー対象になりません。列挙可能なプロパティのみが対象です。
参照渡し: オブジェクトは参照がコピーされるため、ネストしたオブジェクトは元と同じ参照を指すことがあります。
例外と注意点: プリミティブ値には変化はなく、ターゲットはオブジェクトである必要があります。

object.assignの関連用語

Object.assign: 複数のソースオブジェクトの列挙可能なプロパティを第一引数のターゲットオブジェクトへコピーし、そのターゲットを返す浅いコピーの方法です。
スプレッド構文: オブジェクトのコピーやマージを直感的に行える構文で、{ …obj } や { ...a, ...b } の形を使います。
シャローコピー: ネストされたオブジェクトは参照されるだけの浅いコピー。Object.assign で作成したコピーはネストしたオブジェクトを新しく作らず、参照を共有します。
ディープコピー: ネストしたオブジェクトの全てを新しくコピーして独立させる方法。Object.assign はディープコピーを行いません。
ターゲットオブジェクト: コピー先のオブジェクト。第一引数として渡します。
ソースオブジェクト: コピー元となるオブジェクト。複数渡すことができます。
自身のプロパティ: コピーの対象となるのは対象オブジェクトが自身が保有するプロパティだけです。Prototype のプロパティは含まれません。
列挙可能性: コピーされるのは列挙可能な自身のプロパティのみで、不可視プロパティは対象外です。
同名プロパティの上書き: 複数のソースに同じキーがある場合、後ろのソースの値で前の値が上書きされます。
返り値: 処理後に変更されたターゲットオブジェクトを返します。
エラーケース null undefined: ターゲットが null または undefined の場合 TypeError が発生します。
互換性: 古いブラウザではサポートされていないことがあり、互換性の問題があります。
ポリフィル: 未対応環境で Object.assign の機能を再現する小さなライブラリのことです。
使用用途の例: デフォルト設定とユーザー設定のマージや浅いコピーなどに使われます。
対比スプレッド構文: スプレッド構文は読みやすく直感的であり、同様の機能を提供します。
プロパティ属性の保持: コピー時には元のプロパティの writable や configurable などの属性は保持されず、値だけがコピーされます。
ソースが null または undefined の場合は無視される: Object.assign はソースとして渡された値が null または undefined の場合は無視します。
配列への影響: 配列もオブジェクトの一種として取り扱われ、数値キーのプロパティとしてコピーされます。