【JS応用｜豆知識】モダンなJS開発で必須！Object.assignによるオブジェクト操作の極意

導入: なぜObject.assignが必要なのか

フロントエンド開発において、APIから取得したデータや状態管理のオブジェクトを扱う際、元のデータを壊さずに「一部の値を更新した新しいオブジェクトを作りたい」という場面は頻繁に発生します。Object.assignは、複数のオブジェクトを一つに統合したり、オブジェクトのコピーを作成したりする際に非常に便利な標準メソッドです。これを使うことで、イミュータブル（不変）なデータの取り扱いが容易になり、予期せぬバグを未然に防ぐことができます。

基礎知識: Object.assignの仕組み

Object.assign(target, …sources)は、第一引数の「ターゲットオブジェクト」に対して、第二引数以降の「ソースオブジェクト」の列挙可能なプロパティをコピーするメソッドです。
重要なのは、ターゲットオブジェクト自身が書き換えられる（破壊的変更）という点です。もし元のオブジェクトを汚染したくない場合は、第一引数に空のオブジェクト{}を指定するのが定石です。

実装/解決策: 安全なオブジェクトのコピーと結合

現場で最もよく使われるパターンは「既存の設定値に、新しい設定値を上書きして新しいオブジェクトを生成する」という手法です。これにより、Reactのstate更新やReduxのreducerなど、オブジェクトの参照を保持したまま値を更新したいケースに安全に対応できます。

サンプルプログラム

以下のコードは、ユーザーのデフォルト設定に特定の項目を上書きする実践的な例です。

// デフォルトのユーザー設定
const defaultConfig = {
  theme: 'light',
  notifications: true,
  fontSize: 14
};

// ユーザーが変更した設定
const userSettings = {
  theme: 'dark'
};

// defaultConfigを破壊せず、新しい設定オブジェクトを作成する
const finalConfig = Object.assign({}, defaultConfig, userSettings);

console.log(finalConfig);
// 出力: { theme: 'dark', notifications: true, fontSize: 14 }

// 元のオブジェクトは変更されていないことを確認
console.log(defaultConfig.theme); // 'light' のまま

応用・注意点: 現場で陥りやすい罠

Object.assignを使用する上で最も注意すべき点は、「シャローコピー（浅いコピー）」であることです。
オブジェクトの中にさらに別のオブジェクト（ネストされた構造）が含まれている場合、その階層まではコピーされず、参照が共有されたままになります。ネストされた深い階層の値を更新したい場合は、構造化クローン（structuredClone）や、LodashのcloneDeepといった手法を検討する必要があります。また、最近のプロジェクトであれば、より直感的なスプレッド構文（…）を使うことも一般的ですが、Object.assignには「メソッドとして関数チェーンに組み込みやすい」という独自の強みがあります。状況に応じて使い分けるのがフロントエンド・エンジニアの腕の見せ所です。