目次

• 導入
• StructuredClone の理解と使用
• 結論

導入

スプレッド演算子 (...) を使用して Javascript でオブジェクトをコピーしようとした結果、元の変更が依然としてコピーに影響していることに気づいたことがありますか?オリジナルから独立したコピーを期待していたのに、結果的にオリジナルにリンクされたコピーが存在する場合、イライラすることがあります。これは、ディープ オブジェクトを扱うときによくある問題であり、予期しないバグにつながる可能性があります。ありがたいことに、JavaScript にはこの問題を解決する StructuredClone() メソッドがあります

StructuredClone() の理解と使用

まず、JavaScript の StructuredClone() メソッドは、配列、オブジェクト、その他の複雑なデータ型などのネストされた構造を持つオブジェクトを含む、オブジェクトのディープ コピーを作成するために使用されます。

あなたは疑問に思っているかもしれません: コピー とは正確には何ですか?JavaScript には何種類のコピーがありますか? 浅いと深いのコピーがあります。 StructuredClone() が後者を作成することはわかっていますが、スプレッド演算子 を使用すると前者が作成されます。

浅いコピーは、オブジェクトの最上位プロパティのみをコピーします。つまり、ネストされたオブジェクトまたは配列は、引き続き元のオブジェクトから参照されます。一方、ディープコピーは、ネストされた構造を含むすべてを複製し、クローンがオリジナルから完全に独立していることを保証します。

JavaScript での浅いコピーと深いコピーの例をいくつか見てみましょう

浅いコピーの例

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

上記のコードから次のことが言えます:

• name プロパティはプリミティブ値であるため、浅いコピー(personClone.name = "Jane Doe";) で変更しても、元の (person.name)
には影響しません。
• langages 配列は非プリミティブであるため、オリジナル (person) とクローン (personClone) の両方が同じ参照を共有します。 personClone 配列を変更すると、元の person 配列に影響します

ディープコピーの例

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

上記のコードから、次のように結論付けることができます:

• person === deepClonedperson は、structuraldClone() が新しい独立したオブジェクトを作成することを確認します。
• person.langers === deepClonedperson.langers は、ネストされた配列も個別にコピーされることを示しています。
• person.name === deepClonedperson.name をチェックすると、ディープ クローンへの変更が元のオブジェクトに影響を与えないことが検証されます。
• 言語の値は、ディープ クローン (deepClonedperson) への変更がオリジナル (person) に反映されていないことを示しています

結論

この記事では、structuredClone() メソッドがオブジェクトのディープ コピーを作成する信頼性の高い方法を提供し、ネストされた構造が元の構造から完全に独立していることを確認する方法を検討しました。

最後まで読んでいただきありがとうございます。この記事が役に立ったと思われた場合は、JavaScript のディープ コピーについて学ぶことで恩恵を受ける可能性がある他の人たちと「いいね」を押して共有してください

このトピックについてどう思いますか? JavaScript でオブジェクトをコピーするための他のテクニックを見つけたことがありますか?以下のコメントセクションでお気軽にあなたの洞察を共有してください。

追伸 私は現在、フロントエンド開発者の機会を探しています。見込み客をお持ちの場合、または採用を検討している場合は、お気軽に私の履歴書をチェックするか、LinkedIn で私と連絡を取ってください。ぜひご意見をお待ちしております!