JavaScript でのオブジェクト操作は、モダンな Web 開発において欠かせない技術です。特に設定ファイルの結合、API レスポンスのマージ、状態管理でのオブジェクト更新など、日々の開発作業でオブジェクトを結合する場面は数え切れないほどあります。

しかし、JavaScript 標準のオブジェクト結合機能だけでは、複雑な要件に対応することが困難な場面も多く存在するのが現実です。そこで注目されるのが、Lodash ライブラリが提供する merge と assign 関数でしょう。

これらの関数を適切に活用することで、従来は煩雑で複雑だったオブジェクト結合処理を、より安全で効率的に実装できるようになります。本記事では、Lodash の merge と assign の特性を理解し、実際のプロジェクトで活用できる実践的な知識をお届けいたします。

背景

JavaScript 標準のオブジェクト結合の限界

現代の JavaScript には、オブジェクトを結合するための標準機能がいくつか用意されています。Object.assign() やスプレッド演算子（...）などがその代表例ですが、これらの機能には重要な制約があることをご存知でしょうか。

最も大きな制約は、これらの機能が「浅いコピー」しか行わないという点です。つまり、オブジェクトの第一階層のプロパティは正しくコピーされますが、ネストしたオブジェクトについては参照がコピーされるだけなのです。

javascriptCopy codeconst defaultConfig = {
  database: {
    host: 'localhost',
    port: 5432,
  },
  cache: {
    ttl: 3600,
  },
};

const userConfig = {
  database: {
    host: 'production.db.com',
  },
};

// Object.assign() を使用した場合
const merged = Object.assign({}, defaultConfig, userConfig);
console.log(merged.database);
// 結果: { host: 'production.db.com' }
// port プロパティが失われてしまう

このコードを実行すると、userConfig.database が defaultConfig.database を完全に上書きしてしまい、port プロパティが失われてしまいます。

深い階層のオブジェクトマージの課題

実際の Web アプリケーション開発では、設定オブジェクトや状態オブジェクトが複数階層にネストしているケースが一般的です。このような深い階層のオブジェクトを適切にマージするためには、手動で再帰的な処理を実装する必要があります。

javascriptCopy code// 手動での深いマージ実装例（簡略版）
function deepMerge(target, source) {
  const result = { ...target };

  for (const key in source) {
    if (source[key] && typeof source[key] === 'object') {
      if (target[key] && typeof target[key] === 'object') {
        result[key] = deepMerge(target[key], source[key]);
      } else {
        result[key] = source[key];
      }
    } else {
      result[key] = source[key];
    }
  }

  return result;
}

このような実装は複雑になりがちで、バグの温床となる可能性があります。

パフォーマンスと可読性の問題

手動で深いマージを実装する場合、パフォーマンスの最適化と可読性の両立が困難になることも課題の一つです。また、配列の扱いや null・undefined の処理、循環参照の検出など、考慮すべき要素が多岐にわたります。

これらの課題を解決するために、多くの開発者が Lodash のようなユーティリティライブラリに頼ることになるのです。

課題

Object.assign() の浅いコピーによる制約

Object.assign() は ES6 で導入された標準機能として広く使用されていますが、前述の通り浅いコピーしか行いません。この制約により、以下のような問題が発生します。

javascriptCopy codeconst baseSettings = {
  ui: {
    theme: 'light',
    language: 'ja',
    notifications: {
      email: true,
      push: false,
    },
  },
  api: {
    timeout: 5000,
    retries: 3,
  },
};

const userSettings = {
  ui: {
    theme: 'dark',
    notifications: {
      email: false,
    },
  },
};

// Object.assign() での結合
const settings = Object.assign(
  {},
  baseSettings,
  userSettings
);
console.log(settings.ui);
// 結果: { theme: 'dark', notifications: { email: false } }
// language プロパティと notifications.push が失われる

この例では、ユーザー設定で theme を変更し、email 通知を無効にしたかっただけなのに、language プロパティや push 通知の設定が失われてしまいました。

スプレッド演算子では解決できない複雑なケース

スプレッド演算子も同様の制約を持っています。さらに、複数のオブジェクトを結合する際の順序管理も煩雑になります。

javascriptCopy code// スプレッド演算子での結合
const settings = {
  ...baseSettings,
  ...userSettings,
  ui: {
    ...baseSettings.ui,
    ...userSettings.ui,
    notifications: {
      ...baseSettings.ui.notifications,
      ...userSettings.ui.notifications,
    },
  },
};

このように手動で階層ごとにスプレッド演算子を適用する必要があり、深い階層になるほど複雑で保守性が低くなります。

配列やネストオブジェクトの適切な結合方法

特に困難なのが、配列を含むオブジェクトの結合です。配列をどのように扱うかは用途によって異なりますが、標準機能だけではこの制御が困難です。

javascriptCopy codeconst defaultTags = {
  categories: ['general', 'news'],
  preferences: {
    colors: ['blue', 'green'],
    features: ['dark-mode'],
  },
};

const userTags = {
  categories: ['tech'],
  preferences: {
    colors: ['red'],
    features: ['notifications', 'auto-save'],
  },
};

// 配列を置き換えるのか、結合するのか？
// この判断は用途によって異なる

このような複雑なケースに対して、Lodash の merge と assign は柔軟で安全な解決策を提供してくれます。

解決策

Lodash merge の深いマージ機能

Lodash の merge 関数は、前述の課題を解決する強力な深いマージ機能を提供します。この関数は、ネストしたオブジェクトを再帰的に結合し、期待通りの結果を生成してくれます。

まず、merge の基本的な特徴を確認してみましょう。

特徴	説明
深いマージ	ネストしたオブジェクトを再帰的に結合
配列の結合	配列要素も深くマージされる
型安全性	適切な型チェックが行われる
イミュータブル	元のオブジェクトを変更せずに新しいオブジェクトを返す

javascriptCopy code// Lodash のインストールと import
// yarn add lodash
import { merge } from 'lodash';

const baseConfig = {
  database: {
    host: 'localhost',
    port: 5432,
    ssl: false,
  },
  cache: {
    ttl: 3600,
    maxSize: 100,
  },
};

const userConfig = {
  database: {
    host: 'production.db.com',
    ssl: true,
  },
};

// merge を使用した深いマージ
const finalConfig = merge({}, baseConfig, userConfig);
console.log(finalConfig);
/*
結果:
{
  database: {
    host: 'production.db.com',
    port: 5432,        // 保持される！
    ssl: true
  },
  cache: {
    ttl: 3600,         // 保持される！
    maxSize: 100       // 保持される！
  }
}
*/

このように、merge を使用することで、ネストしたオブジェクトの部分的な更新が安全に行えるようになります。

Lodash assign の効率的な浅いマージ

一方、assign 関数は JavaScript の Object.assign() と似た動作をしますが、より一貫性のある実装と追加機能を提供します。浅いマージで十分な場合は、assign を使用することでパフォーマンスを向上させることができます。

項目	Lodash assign	Object.assign()
パフォーマンス	最適化済み	ブラウザ依存
一貫性	常に同じ動作	ブラウザ間で若干の差異
エラーハンドリング	より堅牢	基本的

javascriptCopy codeimport { assign } from 'lodash';

const baseProps = {
  id: 1,
  name: 'default',
  active: true,
};

const userProps = {
  name: 'custom',
  color: 'blue',
};

// assign を使用した浅いマージ
const finalProps = assign({}, baseProps, userProps);
console.log(finalProps);
// 結果: { id: 1, name: 'custom', active: true, color: 'blue' }

用途に応じた使い分けの指針

merge と assign の適切な使い分けは、以下の基準で判断できます。

merge を使用すべき場面

1. 設定オブジェクトの結合: デフォルト設定とユーザー設定をマージする場合
2. API レスポンスの部分更新: 既存のデータオブジェクトを新しいデータで更新する場合
3. 状態管理: React や Vue での複雑な状態オブジェクトの更新

javascriptCopy code// 設定オブジェクトの例
const appConfig = merge(
  {},
  defaultConfig,
  environmentConfig,
  userConfig
);

// API レスポンスの例
const updatedUser = merge({}, currentUser, apiResponse);

assign を使用すべき場面

1. フラットなオブジェクトの結合: ネストが必要ない単純なプロパティの追加
2. パフォーマンスが重要: 大量のオブジェクト処理でオーバーヘッドを削減したい場合
3. プロパティの上書き: 意図的に完全な上書きを行いたい場合

javascriptCopy code// プロパティの追加例
const enrichedData = assign(
  {},
  rawData,
  metadata,
  timestamp
);

// 完全上書きの例
const newState = assign({}, currentState, {
  loading: false,
  error: null,
});

この使い分けを意識することで、コードの意図が明確になり、予期しない動作を防ぐことができるでしょう。

具体例

基本的な merge・assign の使用法

まず、merge と assign の基本的な動作の違いを具体的なコード例で確認してみましょう。

javascriptCopy codeimport { merge, assign } from 'lodash';

// テスト用のオブジェクト
const original = {
  name: 'John',
  age: 30,
  address: {
    city: 'Tokyo',
    postal: '100-0001',
  },
  hobbies: ['reading'],
};

const update = {
  age: 31,
  address: {
    city: 'Osaka',
  },
  hobbies: ['gaming'],
};

次に、assign の動作を確認します。

javascriptCopy code// assign の動作例
const assignResult = assign({}, original, update);
console.log('assign 結果:', assignResult);
/*
{
  name: 'John',
  age: 31,
  address: { city: 'Osaka' },      // postal が失われる
  hobbies: ['gaming']              // 完全に置き換わる
}
*/

続いて、merge の動作を見てみましょう。

javascriptCopy code// merge の動作例
const mergeResult = merge({}, original, update);
console.log('merge 結果:', mergeResult);
/*
{
  name: 'John',
  age: 31,
  address: { 
    city: 'Osaka', 
    postal: '100-0001'             // 保持される！
  },
  hobbies: ['reading', 'gaming']   // 配列が結合される
}
*/

この例から、assign は浅いマージで上書きを行い、merge は深いマージで既存の値を保持することがよくわかりますね。

ネストしたオブジェクトのマージ実例

実際のアプリケーション開発でよく遭遇するユーザー設定の管理を例に、より複雑なネストオブジェクトの結合を見てみましょう。

javascriptCopy code// アプリケーションのデフォルト設定
const defaultSettings = {
  ui: {
    theme: 'light',
    language: 'en',
    layout: {
      sidebar: 'left',
      toolbar: 'top',
      density: 'medium',
    },
    notifications: {
      desktop: true,
      email: true,
      sound: false,
    },
  },
  editor: {
    fontSize: 14,
    tabSize: 2,
    wordWrap: true,
    features: {
      autoComplete: true,
      syntaxHighlight: true,
      lineNumbers: true,
    },
  },
};

ユーザーが一部の設定のみを変更した場合の処理です。

javascriptCopy code// ユーザーの設定変更
const userSettings = {
  ui: {
    theme: 'dark',
    layout: {
      sidebar: 'right',
    },
    notifications: {
      sound: true,
    },
  },
  editor: {
    fontSize: 16,
  },
};

// merge による設定の結合
const finalSettings = merge(
  {},
  defaultSettings,
  userSettings
);
console.log(
  '最終設定:',
  JSON.stringify(finalSettings, null, 2)
);

実行結果を確認すると、ユーザーが指定していない設定値は全て保持されていることがわかります。

jsonCopy code{
  "ui": {
    "theme": "dark",
    "language": "en",
    "layout": {
      "sidebar": "right",
      "toolbar": "top",
      "density": "medium"
    },
    "notifications": {
      "desktop": true,
      "email": true,
      "sound": true
    }
  },
  "editor": {
    "fontSize": 16,
    "tabSize": 2,
    "wordWrap": true,
    "features": {
      "autoComplete": true,
      "syntaxHighlight": true,
      "lineNumbers": true
    }
  }
}

配列を含むオブジェクトの結合

配列を含むオブジェクトの結合は、特に注意が必要な領域です。デフォルトでは、merge は配列の要素をインデックスベースで結合します。

javascriptCopy code// 配列を含むオブジェクトの例
const basePermissions = {
  user: {
    roles: ['user', 'viewer'],
    permissions: {
      read: ['posts', 'comments'],
      write: ['profile'],
    },
  },
};

const additionalPermissions = {
  user: {
    roles: ['editor'],
    permissions: {
      read: ['analytics'],
      write: ['posts'],
      delete: ['own-posts'],
    },
  },
};

// デフォルトの merge 動作
const mergedPermissions = merge(
  {},
  basePermissions,
  additionalPermissions
);
console.log('結合結果:', mergedPermissions);
/*
{
  user: {
    roles: ['editor', 'viewer'],        // インデックス 0 は 'editor' で上書き
    permissions: {
      read: ['analytics', 'comments'],   // インデックスベースで結合
      write: ['posts'],                  // 完全に上書き
      delete: ['own-posts']              // 新規追加
    }
  }
}
*/

配列の結合動作をより詳しく理解するために、別の例も見てみましょう。

javascriptCopy code// 配列のインデックスベース結合の詳細
const array1 = { items: ['a', 'b', 'c'] };
const array2 = { items: ['x', 'y'] };

const result = merge({}, array1, array2);
console.log(result.items); // ['x', 'y', 'c']
// インデックス 0, 1 は上書きされ、インデックス 2 は保持される

カスタマイザー関数を使った高度なマージ

merge の最も強力な機能の一つが、カスタマイザー関数を使用した結合ロジックのカスタマイズです。これにより、配列や特定のプロパティの結合方法を細かく制御できます。

javascriptCopy codeimport { mergeWith, isArray } from 'lodash';

// 配列を連結するカスタマイザー
function arrayCustomizer(objValue, srcValue) {
  if (isArray(objValue)) {
    return objValue.concat(srcValue);
  }
}

const base = {
  tags: ['react', 'javascript'],
  config: {
    plugins: ['eslint'],
    rules: ['no-console'],
  },
};

const additional = {
  tags: ['typescript'],
  config: {
    plugins: ['prettier'],
    rules: ['no-debugger'],
  },
};

// カスタマイザーを使用した結合
const customMerged = mergeWith(
  {},
  base,
  additional,
  arrayCustomizer
);
console.log('カスタム結合結果:', customMerged);
/*
{
  tags: ['react', 'javascript', 'typescript'],
  config: {
    plugins: ['eslint', 'prettier'],
    rules: ['no-console', 'no-debugger']
  }
}
*/

特定の条件に基づく高度なカスタマイザーの例も見てみましょう。

javascriptCopy code// 条件付きカスタマイザー
function conditionalCustomizer(objValue, srcValue, key) {
  // 'permissions' 配列は重複を除いて結合
  if (key === 'permissions' && isArray(objValue)) {
    return [...new Set([...objValue, ...srcValue])];
  }

  // 'metadata' オブジェクトは完全に上書き
  if (key === 'metadata') {
    return srcValue;
  }

  // その他はデフォルト動作
  return undefined;
}

const userData = {
  permissions: ['read', 'write'],
  metadata: { version: 1, author: 'old-author' },
  profile: { name: 'John' },
};

const updateData = {
  permissions: ['write', 'delete'],
  metadata: { version: 2, author: 'new-author' },
  profile: { age: 30 },
};

const customResult = mergeWith(
  {},
  userData,
  updateData,
  conditionalCustomizer
);
console.log('条件付き結合:', customResult);
/*
{
  permissions: ['read', 'write', 'delete'],  // 重複除去して結合
  metadata: { version: 2, author: 'new-author' },  // 完全上書き
  profile: { name: 'John', age: 30 }  // デフォルト深いマージ
}
*/

これらの例を通じて、Lodash の merge と assign の柔軟性と実用性をご理解いただけたでしょうか。実際のプロジェクトでは、これらの機能を組み合わせることで、複雑なオブジェクト操作を簡潔かつ安全に実装することができるようになります。

まとめ

本記事では、Lodash の merge と assign を活用した柔軟なオブジェクト結合について、基本概念から実践的な応用例まで幅広くご紹介いたしました。

JavaScript 標準のオブジェクト結合機能では対応が困難な深いネストオブジェクトの部分更新や、配列を含む複雑なデータ構造の結合も、Lodash を使用することで安全かつ効率的に実装できることがおわかりいただけたでしょう。

特に重要なポイントとして、merge は深いマージが必要な設定管理や状態更新に、assign は軽量な浅いマージが適している場面で使い分けることで、コードの意図が明確になり保守性が向上します。また、カスタマイザー関数を活用することで、プロジェクト固有の要件にも柔軟に対応できるようになりますね。

現代の Web 開発においてオブジェクト操作は避けて通れない技術領域です。Lodash の強力な機能を適切に活用することで、より堅牢で読みやすいコードを書けるようになることでしょう。

関連リンク

• Lodash 公式ドキュメント
• Lodash merge 関数リファレンス
• Lodash assign 関数リファレンス
• MDN - Object.assign()
• MDN - スプレッド構文
• npm - lodash パッケージ