JavaScriptでオブジェクトのコピーを作成する際、よく遭遇するエラーの1つが「structuredClone」に関連するものです。この記事では、structuredClone()関数の基本的な使い方から実践的な活用方法まで、わかりやすく解説します。

structuredClone()とは

structuredClone()は、JavaScriptオブジェクトのディープコピーを作成するための組み込み関数です。2022年に導入されたこの機能により、複雑なデータ構造も簡単にコピーできるようになりました。

基本的な使い方

const originalObj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "gaming"]
};

const clonedObj = structuredClone(originalObj);

従来のコピー方法との違い

従来のスプレッド演算子やObject.assign()との主な違いを見てみましょう：

// シャローコピー（浅いコピー）
const shallowCopy = { ...originalObj };

// ディープコピー（深いコピー）
const deepCopy = structuredClone(originalObj);

structuredClone()のメリット

1. 循環参照にも対応

2. 複雑なネストされたオブジェクトも正確にコピー

3. Date、Map、Set、ArrayBufferなども適切にコピー

サポートされるデータ型

  • プリミティブ値（数値、文字列、真偽値など）
  • オブジェクト
  • 配列
  • Date
  • Map、Set
  • ArrayBuffer
  • TypedArray
  • DataView

注意点と制限事項

structuredClone()には以下の制限があります：

  • 関数はコピーできない
  • DOM要素はコピーできない
  • Errorオブジェクトはコピーできない
// エラーの例
const objWithFunction = {
  method: () => console.log("Hello")
};

// これはエラーになります
const cloned = structuredClone(objWithFunction);
// TypeError: Function object could not be cloned.

実践的な使用例

1. 複雑なデータ構造のコピー

const complexObj = {
  user: {
    name: "John",
    details: {
      address: {
        city: "Tokyo",
        country: "Japan"
      }
    }
  },
  dates: [new Date(), new Date(2024, 0, 1)]
};

const clonedComplex = structuredClone(complexObj);

2. 循環参照を含むオブジェクトのコピー

const obj = {
  name: "Circular Reference"
};
obj.self = obj;

const clonedCircular = structuredClone(obj);
// 正常にコピーされます

ブラウザ互換性

structuredClone()は比較的新しい機能のため、古いブラウザでは使用できない場合があります。そのような場合は、以下のような代替手段を検討してください：

// 代替手段の例
const deepClone = obj => JSON.parse(JSON.stringify(obj));

まとめ

structuredClone()は、JavaScriptでのオブジェクトのディープコピーを簡単かつ安全に行うための強力なツールです。特に複雑なデータ構造や循環参照を含むオブジェクトを扱う際に重宝します。ただし、関数やDOM要素などのコピーには制限があるため、使用する際はこれらの制限事項を考慮する必要があります。

関連キーワード：JavaScript、オブジェクトコピー、ディープコピー、構造化クローン、データ構造