今日の開発Tips
Tips

今日の開発Tips（2025-06-02）

今日の開発Tipsは、JavaScriptにおけるオブジェクトの浅いコピーと深いコピーの違いと、それぞれの状況における適切な使用方法について解説します。浅いコピーでは参照のコピーしか行われないため、元のオブジェクトの変更がコピーにも反映されますが、深いコピーではオブジェクトの構造全体が複製されるため、元のオブジェクトと独立したコピーが作成されます。これらを理解することで、予期せぬバグを減らし、コードの保守性を向上させることができます。

オブジェクトのコピー：浅いコピーと深いコピーの使い分け

JavaScriptでオブジェクトをコピーする際には、浅いコピーと深いコピーの2種類があります。それぞれの違いと、適切な使用方法を理解することで、バグの発生を防ぎ、より効率的なコードを書くことができます。

浅いコピー

浅いコピーは、オブジェクトのトップレベルのプロパティのみをコピーします。ネストされたオブジェクトのプロパティは、元のオブジェクトと共有されます。そのため、元のオブジェクトを変更すると、コピーされたオブジェクトにも変更が反映されます。

const originalObject = {
  name: "original",
  nested: {
    value: 10
  }
};

const shallowCopy = { ...originalObject };

shallowCopy.name = "shallow";
shallowCopy.nested.value = 20;

console.log(originalObject); // 出力: { name: 'original', nested: { value: 20 } }
console.log(shallowCopy);    // 出力: { name: 'shallow', nested: { value: 20 } }

深いコピー

深いコピーは、オブジェクトのすべてのプロパティを再帰的にコピーします。元のオブジェクトとコピーされたオブジェクトは完全に独立しており、一方を変更しても、もう一方には影響しません。JSON.parse(JSON.stringify(object)) を使う方法や、lodashなどのライブラリのcloneDeepメソッドを使う方法があります。

const originalObject = {
  name: "original",
  nested: {
    value: 10
  }
};

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

deepCopy.name = "deep";
deepCopy.nested.value = 30;

console.log(originalObject); // 出力: { name: 'original', nested: { value: 10 } }
console.log(deepCopy);    // 出力: { name: 'deep', nested: { value: 30 } }

注意点

  • JSON.parse(JSON.stringify(object)) は、関数やDateオブジェクトなどの特殊なオブジェクトを正しくコピーできない場合があります。
  • 深いコピーは浅いコピーよりも計算コストが高いです。

おすすめポイント

オブジェクトの共有を意図しない場合は、深いコピーを使用することを推奨します。浅いコピーは、パフォーマンスを重視する場合や、意図的にオブジェクトを共有したい場合にのみ使用してください。 オブジェクトの構造が複雑な場合や、予期せぬ変更を防ぎたい場合は、深いコピーを優先しましょう。 lodash等のライブラリを活用することで、より安全かつ効率的な深いコピーを実現できます。

Tips一覧へ戻る