浅いコピーと深いコピーの違いは何ですか？

Question

Accepted Answer

オブジェクトは**参照によって**代入されるため、`b = a` はコピーではありません。両方が同じオブジェクトを指します。**浅い（shallow）**コピーは最上位の階層を複製しますがネストされた参照は共有します。**深い（deep）**コピーはすべてを複製し、完全に独立します。

```js
const original = { name: "Ann", address: { city: "NY" } };

// shallow copy: spread / Object.assign
const shallow = { ...original };
shallow.name = "Bob";            // ✅ independent (top-level primitive)
shallow.address.city = "LA";     // ⚠️ ALSO changes original.address.city — shared!

original.address.city; // "LA"  ← mutated through the shallow copy
```

ネストされた `address` オブジェクトは両方で**同じ参照**なので、それを変更すると両方に影響します。

## 深いコピーを作る

```js
const deep = structuredClone(original); // modern, built-in, handles most types
deep.address.city = "Chicago";          // ✅ original is untouched
```

その他の選択肢とその注意点:

```js
JSON.parse(JSON.stringify(obj)); // simple, but LOSES functions, Dates → strings, undefined
// lodash: _.cloneDeep(obj)       // robust, for complex cases
```

## なぜ重要なのか

これは「なぜ自分の state が予期せず変わったのか？」というバグの最大の原因の一つで、特に state を変更してはいけない React/Redux で問題になります。

最上位のフィールドだけを変更する場合はスプレッドで十分ですが、ネストされた更新ではネストした階層もコピーする（`{ ...obj, address: { ...obj.address, city } }`）か、深いクローンを行う必要があります。