コピーを変えたら元も変わる？入れ子の値を比較する

この記事の目次開く・閉じる

今回の仕上がり

オブジェクトをスプレッド構文でコピーしても、入れ子のオブジェクトは同じ参照を持ちます。今回、playerの中にscoreがあるデータをコピーし、コピー側のscoreを10へ変えると、元のscoreも10になりました。

同じデータをstructuredCloneでコピーした条件では、元のscoreは0のままでした。自作例では毎回新しい初期データを作り、前の操作の影響を残さず比較します。

コピーの処理はstructuredClone(original)です。ただし、何でもコピーできるわけではありません。例では失敗をcatchし、成功したような表示を出さないようにしています。保存用ZIPを展開してexample.htmlを開くと、同じ3条件を試せます。

公式の仕様説明では、構造化複製できない値を含む場合のDataCloneErrorが説明されています。今回の対象は単純な入れ子オブジェクトと関数です。DOM、独自クラス、大きなデータ、transfer指定の動作は検証していません。

すべての更新で深いコピーを作ればよい、という結論ではありません。データ量や共有したい値、失敗時の扱いで選択は変わります。前の並べ替えの実験と合わせ、配列を新しくすることと、入れ子を別にすることを分けて確認してください。Xでの流行や反響は未確認です。

確認日：2026年10月30日。PCブラウザとスマホ幅で確認。スマホ実機・読み上げ・全ブラウザは未確認です。