• StructuredClone() とは何ですか?

  • StructuredClone() は 2022 年に導入されたグローバル関数で、JavaScript オブジェクトのディープ クローン作成を可能にします。複雑な構造や循環参照に苦労する JSON.stringify() や JSON.parse() などの従来のメソッドとは異なり、structuraldClone() はこれらの課題を簡単に処理します。

• なぜこれがゲームチェンジャーなのでしょうか?

  • これは、追加のロジックや回避策を必要とせずに、ネストされたオブジェクトと循環参照の整合性を維持し、真のディープ クローンを作成するための堅牢なツールです。さらに、Web Workers を含む最新の環境でも利用できます。

---

1.単純なオブジェクトのクローン作成: 基本

• {...obj} の使用 (浅いコピー)

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• 何が起こっていますか？

  • スプレッド演算子 {...obj} は浅いコピーのみを作成します。詳細オブジェクトは深く複製されていないため、shallowCopy.details への変更は元の詳細にも影響します。
  • JSON.stringify() JSON.parse() の使用 (ディープコピー)

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• 何が起こっていますか？

  • このメソッドはディープ コピーを作成しますが、関数、未定義、または循環参照を処理できないという制限があります。
  • structuraldClone() の使用 (ディープ コピー)

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• 何が起こっていますか？
  • StructuredClone() はディープ クローンを作成し、JSON.stringify() の制限なしで構造を保持し、循環参照や未定義などの複雑なデータ型を処理します。

---

2.循環参照の処理: 課題

• {...obj} による循環参照

const オリジナル = { 名前: "アリス" }; オリジナル.セルフ = オリジナル; // これによりエラーが発生します: constarrowCopy = { ...オリジナル }; // TypeError: 循環構造を JSON に変換します

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 何が起こっていますか？

  {...obj} は循環参照を処理できないため、エラーが発生します。
  • JSON.stringify() による循環参照

const オリジナル = { 名前: "アリス" }; オリジナル.セルフ = オリジナル; // これによりエラーが発生します: const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: 循環構造を JSON に変換します

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 何が起こっていますか？

  JSON.stringify() も循環参照で失敗し、エラーがスローされます。
  • structuraldClone() による循環参照

const オリジナル = { 名前: "アリス" }; オリジナル.セルフ = オリジナル; const clone = 構造化Clone(オリジナル); console.log(クローン !== オリジナル); // 真実 console.log(clone.self === クローン); // 真実

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 何が起こっていますか？
  StructuredClone() は循環参照をシームレスに処理し、エラーなしで適切なディープ クローンを作成します。

---

3.関数と未定義を使用したクローン作成: 別のテスト

• {...obj} の使用

const original = { 名前: "アリス"、挨拶: () => "こんにちは!"、値: 未定義 }; constarrowCopy = { ...オリジナル }; console.log(shallowCopy.greet()); // "こんにちは！" console.log(shallowCopy.value); // 未定義

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 何が起こっていますか？

  {...obj} は期待どおり関数と未定義をコピーしますが、浅くのみコピーします。
  • JSON.stringify() の使用

const original = { 名前: "アリス"、挨拶: () => "こんにちは!"、値: 未定義 }; const jsonCopy = JSON.parse(JSON.stringify(original)); console.log(jsonCopy.greet); // 未定義 console.log(jsonCopy.value); // 未定義

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 何が起こっていますか？

  JSON.stringify() は関数または未定義をシリアル化できないため、クローンされたオブジェクトで関数が失われます。
  • structuraldClone() の使用

const original = { 名前: "アリス"、挨拶: () => "こんにちは!"、値: 未定義 }; const clone = 構造化Clone(オリジナル); console.log(clone.greet); // 未定義 コンソール.ログ(クローン.値); // 未定義

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 何が起こっていますか？
  また、structuraldClone() は関数のクローンを作成しませんが、未定義の値を保持するため、複雑なオブジェクトに対して JSON.stringify() よりも信頼性が高くなります。

---

4.速度と効率: パフォーマンスに関するメモ

• 大規模データによる効率

constlargeArray = new Array(1e6).fill({ key: "value" }); console.time("構造化クローン"); const clone = StructuredClone(largeArray); console.timeEnd("構造化クローン"); console.time("JSON.stringify JSON.parse"); const jsonCopy = JSON.parse(JSON.stringify(largeArray)); console.timeEnd("JSON.stringify JSON.parse");

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• 何が起こっていますか？
  多くの場合、StructuredClone() は、大規模で複雑なデータの場合、JSON.stringify() JSON.parse() より高速であり、シリアル化と逆シリアル化の落とし穴を回避します。

---

5.結論: StructuredClone() が未来である理由

• 信頼性: 循環参照、関数、未定義の値をより予測どおりに処理します。
• 効率: 大規模なデータセットに対してディープ クローン作成をより速く実行し、回避策を必要としません。
• シンプルさ: すべてを制御する 1 つの方法。{...obj}、JSON.stringify()、またはカスタムのディープ クローン関数のいずれかを選択する必要はもうありません。