JavaScriptオブジェクトのディープコピー

JavaScriptにおけるオブジェクトのディープコピーの効率的な方法

ディープコピーとは？

ディープコピーとは、オブジェクトの完全な独立したコピーを作成することです。元のオブジェクトとコピーされたオブジェクトは、互いに影響を与えません。

ディープコピーが必要な理由

• オブジェクトを関数に渡す際、元のオブジェクトを変更したくない場合。
• オブジェクトの構造を保持しながら、元のデータを変更せずに操作したい場合。

structuredClone() (推奨)

• 移譲可能オブジェクト（Proxyなど）もコピーできます。
• モダンブラウザでサポートされており、最も効率的で安全な方法です。

const originalObject = { ... };
const deepCopy = structuredClone(originalObject);

JSON.parse(JSON.stringify())

• シリアライズできないデータ（関数、シンボル、undefinedなど）は失われます。
• シンプルですが、制限があります。

const originalObject = { ... };
const deepCopy = JSON.parse(JSON.stringify(originalObject));

再帰関数による手動コピー

• カスタムロジックが必要な場合に使用できますが、複雑でエラーが発生しやすいです。

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const copy = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deep   Clone(obj[key]);
    }
  }
  return copy;
}

効率性と考慮点

• オブジェクトの深さやサイズによってパフォーマンスが変わる場合があります。
• 手動コピーはカスタムロジックが必要な場合に使用しますが、効率性は低いです。
• JSON.parse(JSON.stringify()) はシンプルですが、データの損失に注意してください。
• structuredClone() が最も効率的で安全な方法です。

const originalObject = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};

const deepCopy = structuredClone(originalObject);

deepCopy.age = 31; // deepCopyのみが変更される

console.log(originalObject); // { name: 'Alice', age: 30, address: { city: 'Tokyo', country: 'Japan' } }
console.log(deepCopy);     // { name: 'Alice', age: 31, address: { city: 'Tokyo', country: 'Japan' } }

const originalObject = {
  name: 'Bob',
  age: 25
};

const deepCopy = JSON.parse(JSON.stringify(originalObject));

deepCopy.age = 26;

console.log(originalObject); // { name: 'Bob', age: 25 }
console.log(deepCopy);     // { name: 'Bob', age: 26 }

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const copy = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deep   Clone(obj[key]);
    }
  }
  return copy;
}

const originalObject = {
  name: 'Charlie',
  hobbies: ['coding', 'reading']
};

const deepCopy = deepClone(originalObject);

deepCopy.hobbies.push('gaming');

console.log(originalObject); // { name: 'Charlie', hobbies: ['coding', 'reading'] }
console.log(deepCopy);     // { name: 'Charlie', hobbies: ['coding', 'reading', 'gaming'] }

重要ポイント

• 手動コピーは複雑でエラーが発生しやすい可能性があります。

代替方法

structuredClone() や JSON.parse(JSON.stringify()) 以外にも、ディープコピーを実現する方法がいくつかあります。

• メリット
  
  • 特