シャローコピー（浅いコピー） とは？

JavaScriptでオブジェクトを const b = a とすると、コピーではなく同じオブジェクトへの参照が複製されるだけ。bを変えるとaも変わってしまう。独立したコピーを作るにはスプレッド構文 {...a} などを明示的に使う必要がある。

const original = { user: { name: "Ken" } } をシャローコピーして copy.user.name = "Tom" とすると、original.user.name も "Tom" になる。ネストされたオブジェクトは参照が共有されているから。これが浅いコピーの罠。

Reactの状態更新では「新しいオブジェクト参照」を作る必要がある。一階層のオブジェクトなら setState({...state, key: newValue}) でOK。ネストが深い場合は該当の階層もスプレッドするか、immerライブラリを使うと安全。

JavaScriptならstructuredClone(original)が一番簡単で安全な方法だよ。以前はJSON.parse(JSON.stringify(obj))という裏技が使われていたけど、関数やundefined、Dateオブジェクトが正しくコピーされない問題があった。structuredCloneはブラウザとNode.js両方で使えて、これらの問題も解決しているんだ。

あるよ。[...array]やArray.from(array)でコピーしても、中にオブジェクトが入っていれば参照が共有される。たとえばconst copy = [...users]としても、copy[0].name = 'Tom'とするとusers[0].nameも変わってしまう。配列の中身がプリミティブ値（数値や文字列）だけなら問題ないけど、オブジェクトを含む配列は要注意だよ。