Lodash の cloneDeep で安全なディープコピー

2025年8月6日

Lodash

JavaScriptでオブジェクトを扱う際、「コピーしたはずなのに元のデータも変わってしまった」という経験はありませんか？これは多くの開発者が一度は遭遇する、参照渡しによる予期しない副作用です。

特にReactやVue.jsなどのフレームワークを使用している場合、状態管理において正確なオブジェクトのコピーは不可欠です。そんな時に頼りになるのが、LodashライブラリのcloneDeep関数なのです。

今回は、JavaScriptにおけるオブジェクトコピーの課題から、Lodash cloneDeepを使った安全で確実なディープコピーの実現方法まで、実際のコードとエラー例を交えながら詳しく解説いたします。

背景

JavaScriptにおけるオブジェクトコピーの必要性

モダンなJavaScript開発において、オブジェクトのコピーは避けて通れない重要な操作です。特に以下のような場面で、正確なオブジェクトコピーが求められます。

1. 状態管理におけるイミュータビリティの維持

ReactやReduxなどのライブラリでは、状態の変更を正しく検知するために、元の状態オブジェクトを直接変更せず、新しいオブジェクトを作成する必要があります。これにより、コンポーネントの再レンダリングが適切にトリガーされ、パフォーマンスの最適化も図れます。

2. APIレスポンスデータの安全な操作

APIから取得したデータを加工する際、元のデータを保持しながら変更版を作成したい場合があります。特に、同じデータを複数の用途で使用する場合、意図しない変更による副作用を防ぐことが重要です。

3. 複雑なフォームデータの管理

ネストした構造を持つフォームデータを扱う際、バリデーションエラーの表示や一時的な変更の保存において、原本データとの分離が必要になります。

課題

浅いコピーと深いコピーの違いと問題点

JavaScriptでオブジェクトをコピーする際の最大の課題は、「浅いコピー（Shallow Copy）」と「深いコピー（Deep Copy）」の違いを理解し、適切に使い分けることです。

浅いコピーの落とし穴

一般的によく使われるスプレッド構文（...）やObject.assign()は、浅いコピーしか行いません。これらの方法では、ネストしたオブジェクトや配列の参照がそのまま維持されてしまいます。

以下のコードを見てみましょう：

javascript// 浅いコピーの問題例
const originalUser = {
  name: '田中太郎',
  age: 30,
  address: {
    prefecture: '東京都',
    city: '渋谷区'
  },
  hobbies: ['読書', '映画鑑賞']
};

// スプレッド構文による浅いコピー
const copiedUser = { ...originalUser };
copiedUser.name = '佐藤花子'; // これは問題なし

上記のコードでは、nameプロパティの変更は問題ありませんが、ネストしたオブジェクトを変更すると予期しない結果が発生します：

javascript// ネストしたオブジェクトを変更すると...
copiedUser.address.city = '新宿区';
copiedUser.hobbies.push('スポーツ');

console.log('元のユーザー:', originalUser.address.city); // '新宿区' - 変わってしまった！
console.log('元のユーザーの趣味:', originalUser.hobbies); // ['読書', '映画鑑賞', 'スポーツ']

実際に発生するエラーの例：

Reactアプリケーションでこのような浅いコピーを使用すると、以下のようなエラーが発生することがあります：

vbnetWarning: Cannot update a component while rendering a different component.
Error: Objects are not valid as a React child
TypeError: Cannot read property 'map' of undefined

JSON.parse/JSON.stringifyの限界

深いコピーを実現する方法として、JSON.parse(JSON.stringify(obj))がよく紹介されますが、この方法には重大な制限があります：

javascriptconst complexObject = {
  date: new Date(),
  func: function() { return 'hello'; },
  undefined: undefined,
  symbol: Symbol('test'),
  regex: /test/g
};

const jsonCopy = JSON.parse(JSON.stringify(complexObject));
console.log(jsonCopy);
// 結果: { date: "2024-01-15T10:30:00.000Z" }
// 関数、undefined、Symbol、RegExpが失われる

この方法では以下のデータ型が正しく処理されません：

関数
undefined
Symbol
Date オブジェクト（文字列になる）
RegExp オブジェクト
循環参照を含むオブジェクト

解決策

Lodash cloneDeepによる安全なディープコピーの実現

これらの課題を解決するのが、LodashライブラリのcloneDeep関数です。 cloneDeepは、JavaScriptのあらゆるデータ型を正確にコピーし、完全に独立したオブジェクトを作成してくれます。

Lodashのインストールと基本的な使用方法

まず、プロジェクトにLodashをインストールしましょう：

bash# yarn を使用する場合
yarn add lodash
yarn add -D @types/lodash  # TypeScriptを使用する場合

# npm を使用する場合
npm install lodash
npm install -D @types/lodash  # TypeScriptを使用する場合

cloneDeepの基本的な使用方法

cloneDeepを使用することで、先ほどの問題が完全に解決されます：

javascriptimport { cloneDeep } from 'lodash';

const originalUser = {
  name: '田中太郎',
  age: 30,
  address: {
    prefecture: '東京都',
    city: '渋谷区'
  },
  hobbies: ['読書', '映画鑑賞']
};

// cloneDeepによる安全な深いコピー
const deepCopiedUser = cloneDeep(originalUser);

これで、ネストしたオブジェクトを変更しても元のオブジェクトに影響しません：

javascript// ネストしたオブジェクトを安全に変更
deepCopiedUser.name = '佐藤花子';
deepCopiedUser.address.city = '新宿区';
deepCopiedUser.hobbies.push('スポーツ');

console.log('元のユーザー:', originalUser.address.city); // '渋谷区' - 変わらない！
console.log('元のユーザーの趣味:', originalUser.hobbies); // ['読書', '映画鑑賞']
console.log('コピーしたユーザー:', deepCopiedUser.address.city); // '新宿区'

特殊なデータ型の処理能力

cloneDeepは、JSON.parse/JSON.stringifyでは失われてしまう特殊なデータ型も正確にコピーします：

javascriptconst complexObject = {
  date: new Date('2024-01-15'),
  func: function(name) { return `Hello, ${name}!`; },
  regex: /[a-z]+/gi,
  buffer: Buffer.from('hello'),
  map: new Map([['key1', 'value1'], ['key2', 'value2']]),
  set: new Set([1, 2, 3, 4, 5])
};

const clonedComplex = cloneDeep(complexObject);

// すべてのデータ型が正確にコピーされる
console.log(clonedComplex.date instanceof Date); // true
console.log(typeof clonedComplex.func); // 'function'
console.log(clonedComplex.regex instanceof RegExp); // true

具体例

基本的な使用方法

実際の開発現場でよく遭遇するシナリオを通じて、cloneDeepの威力を体感してみましょう。

シナリオ1: フォームデータの一時保存機能

ユーザーがフォームを入力中に、「下書き保存」や「リセット」機能を実装する場合：

javascriptimport { cloneDeep } from 'lodash';

// 複雑なフォームデータの例
const initialFormData = {
  personalInfo: {
    firstName: '',
    lastName: '',
    email: '',
    phone: ''
  },
  preferences: {
    notifications: {
      email: true,
      sms: false,
      push: true
    },
    privacy: {
      profilePublic: false,
      dataSharing: false
    }
  },
  selectedOptions: ['option1', 'option3']
};

フォーム管理クラスの実装例：

javascriptclass FormManager {
  constructor(initialData) {
    this.initialData = cloneDeep(initialData);
    this.currentData = cloneDeep(initialData);
    this.drafts = [];
  }

  // 現在のデータを更新
  updateData(path, value) {
    // lodashのsetを使用してネストしたプロパティを安全に更新
    const updatedData = cloneDeep(this.currentData);
    // 実際の更新処理（簡略化）
    return updatedData;
  }

  // 下書き保存
  saveDraft() {
    const draftCopy = cloneDeep(this.currentData);
    draftCopy.savedAt = new Date();
    this.drafts.push(draftCopy);
    console.log('下書きを保存しました');
  }

  // リセット機能
  reset() {
    this.currentData = cloneDeep(this.initialData);
    console.log('フォームをリセットしました');
  }
}

シナリオ2: API レスポンスデータの加工

APIから取得したデータを複数の目的で使用する場合：

javascript// APIレスポンスの例
const apiResponse = {
  users: [
    {
      id: 1,
      name: '田中太郎',
      profile: {
        department: '開発部',
        projects: ['プロジェクトA', 'プロジェクトB']
      },
      lastLogin: new Date('2024-01-15T09:30:00')
    },
    {
      id: 2,
      name: '佐藤花子',
      profile: {
        department: 'デザイン部',
        projects: ['プロジェクトC']
      },
      lastLogin: new Date('2024-01-14T14:20:00')
    }
  ],
  metadata: {
    total: 2,
    page: 1,
    lastUpdated: new Date()
  }
};

異なる用途でのデータ活用：

javascript// 管理画面用のデータ処理
function prepareAdminData(rawData) {
  const adminData = cloneDeep(rawData);
  
  // 管理者用の追加情報を付与
  adminData.users.forEach(user => {
    user.adminNotes = '';
    user.permissions = ['read', 'write'];
    // 最終ログイン日時の日本語フォーマット
    user.lastLoginFormatted = user.lastLogin.toLocaleDateString('ja-JP');
  });
  
  return adminData;
}

// 一般ユーザー表示用のデータ処理
function preparePublicData(rawData) {
  const publicData = cloneDeep(rawData);
  
  // センシティブな情報を除外
  publicData.users.forEach(user => {
    delete user.lastLogin; // ログイン情報を削除
    user.profile.projects = user.profile.projects.map(project => 
      project.replace(/プロジェクト/, 'Project ') // 表示名を変更
    );
  });
  
  return publicData;
}

// 両方の処理を実行しても元データは保持される
const adminData = prepareAdminData(apiResponse);
const publicData = preparePublicData(apiResponse);

console.log('元データのユーザー数:', apiResponse.users.length); // 2
console.log('元データの最初のユーザー:', apiResponse.users[0].name); // '田中太郎'

複雑なオブジェクト構造でのコピー

実際のアプリケーションでは、より複雑なデータ構造を扱うことがあります。

循環参照を含むオブジェクトの処理

javascript// 循環参照を含むオブジェクトの例
const nodeA = { name: 'ノードA', connections: [] };
const nodeB = { name: 'ノードB', connections: [] };

// 相互参照を作成
nodeA.connections.push(nodeB);
nodeB.connections.push(nodeA);

const networkData = {
  nodes: [nodeA, nodeB],
  metadata: {
    createdAt: new Date(),
    version: '1.0.0'
  }
};

// cloneDeepは循環参照も正しく処理
const clonedNetwork = cloneDeep(networkData);
console.log('コピー成功:', clonedNetwork.nodes.length); // 2

関数とクラスインスタンスを含む複合オブジェクト

javascriptclass UserValidator {
  constructor(rules) {
    this.rules = rules;
  }

  validate(data) {
    return this.rules.every(rule => rule(data));
  }
}

const complexFormConfig = {
  fields: {
    email: {
      type: 'email',
      required: true,
      validator: new UserValidator([
        (data) => data.includes('@'),
        (data) => data.length > 5
      ])
    },
    password: {
      type: 'password',
      required: true,
      transform: (value) => value.trim()
    }
  },
  onSubmit: function(data) {
    console.log('フォーム送信:', data);
  },
  createdAt: new Date()
};

// すべての要素が正確にコピーされる
const clonedConfig = cloneDeep(complexFormConfig);
console.log('バリデーター保持:', clonedConfig.fields.email.validator instanceof UserValidator); // true
console.log('関数保持:', typeof clonedConfig.onSubmit); // 'function'

パフォーマンス比較

実際のパフォーマンスを測定して、cloneDeepの特性を理解しましょう。

テスト用データの準備

javascript// パフォーマンステスト用のデータ生成
function generateTestData(depth = 3, breadth = 10) {
  const data = {
    id: Math.random(),
    timestamp: new Date(),
    active: true,
    children: []
  };

  if (depth > 0) {
    for (let i = 0; i < breadth; i++) {
      data.children.push(generateTestData(depth - 1, breadth));
    }
  }

  return data;
}

const testData = generateTestData(4, 8); // 深さ4、幅8の階層データ

各コピー手法のパフォーマンス測定

javascriptfunction measurePerformance(label, fn, data, iterations = 1000) {
  console.time(label);
  
  for (let i = 0; i < iterations; i++) {
    fn(data);
  }
  
  console.timeEnd(label);
}

// 各手法のテスト
measurePerformance('スプレッド構文（浅いコピー）', (data) => {
  return { ...data };
}, testData);

measurePerformance('JSON.parse/stringify', (data) => {
  return JSON.parse(JSON.stringify(data));
}, testData);

measurePerformance('Lodash cloneDeep', (data) => {
  return cloneDeep(data);
}, testData);

結果の例と考察

一般的な測定結果（実際の値は環境により異なります）：

手法	実行時間（1000回）	正確性	対応データ型
スプレッド構文	2ms	❌ 浅いコピーのみ	基本型のみ
JSON.parse/stringify	45ms	❌ 一部データ型失われる	限定的
Lodash cloneDeep	25ms	✅ 完全な深いコピー	すべて

最適化のポイント

javascript// メモ化を使用したパフォーマンス改善
import { memoize } from 'lodash';

// 同じデータの繰り返し処理を最適化
const memoizedClone = memoize(cloneDeep, (obj) => {
  // カスタムキー生成関数（オプション）
  return JSON.stringify(obj);
});

// 使用例
const result1 = memoizedClone(testData); // 実際にクローン処理
const result2 = memoizedClone(testData); // キャッシュから取得