深いコピーのための structuredClone
複雑なオブジェクトを安全に複製します。
「深いコピーのための structuredClone」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
ディープコピーの問題
スプレッド構文とObject.assignで作成されるのはシャローコピーです。ネストされたオブジェクトは参照によって共有されます。ネストされた構造を完全に複製するには、ディープコピーが必要です。
structuredCloneが組み込みの解決策です。
スプレッド構文だけでは不十分な理由
スプレッド構文で作成したコピーは、ネストされたオブジェクトを共有します。コピーのネストされた部分を変更すると、元のオブジェクトにも影響します。
const original = { user: { name: 'Ada' } };
const shallow = { ...original };
shallow.user.name = 'Grace';
console.log(original.user.name);structuredCloneによる解決
structuredCloneは構造全体を再帰的にコピーします。クローンを変更しても、元のオブジェクトには一切影響しません。
const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);
deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);独立したネストされたオブジェクト
クローン後は、各ネストされたオブジェクトが別々の参照になります。そのため、どの階層でも同一性比較の結果はfalseです。
const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);
console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);配列のクローン
ネストされた配列を含め、配列もディープコピーされます。クローン内のネストされた配列に要素を追加しても、元の配列は変更されません。
const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);
clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);MapとSetにも対応
JSON.parse(JSON.stringify(...))とは異なり、structuredCloneはMap、Set、Dateなど、多くの組み込み型に対応しています。
const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);
clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);循環参照にも対応
自己参照するオブジェクトはJSONを使った方法では処理できませんが、structuredCloneなら問題なくクローンできます。
const node = { name: 'root' };
node.self = node;
const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);クローンできないもの
structuredCloneは関数やDOMノードをコピーできず、DataCloneErrorをスローします。また、プロトタイプチェーンも破棄され、プレーンオブジェクトが返されます。
try {
structuredClone({ fn: () => 1 });
} catch (e) {
console.log(e.name);
}プロトタイプは保持されない
クローンされたクラスのインスタンスはプレーンオブジェクトになります。データはコピーされますが、メソッドとプロトタイプは失われます。
class Point {
constructor(x) { this.x = x; }
show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);
console.log(clone.x);
console.log(clone instanceof Point);structuredCloneとJSONを使った方法の比較
従来のJSON.parse(JSON.stringify(x))ではundefinedが失われ、日付は文字列になり、循環参照があると失敗します。structuredCloneなら、シリアライズ可能なデータについてこれらの問題を回避できます。
const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);
console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);重要な理由
structuredCloneを使うと、プレーンなデータを確実にディープコピーできます。壊れやすい手作りのクローン処理を置き換えられます。ネストされた状態から完全に独立したコピーが必要なときに使用し、関数とプロトタイプが削除されることを覚えておいてください。
const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);理解度チェック
ネストされたデータに対して、スプレッド演算子ではなくstructuredCloneを使うのはなぜですか。
まとめ：structuredClone
信頼性の高いディープコピーについて学びました。
- スプレッド構文はシャローコピーですが、
structuredCloneはディープコピーを作成します。 Map、Set、Date、循環参照に対応しています。- 関数やDOMノードはクローンできず、プロトタイプは破棄されます。
JSON.parse(JSON.stringify())を使った方法より安全な代替手段です。
AI チューターと学ぶ JavaScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 59
- レッスン
- 200
よくある質問
「深いコピーのための structuredClone」レッスンは無料ですか？
はい。「深いコピーのための structuredClone」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「深いコピーのための structuredClone」で何を学びますか？
複雑なオブジェクトを安全に複製します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「深いコピーのための structuredClone」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Object.freeze と seal
- 浅い凍結と深い凍結
- イミュータブルな更新パターン
- 深いコピーのための structuredClone