はじめに
プログラミングでオブジェクトをコピーする場面って、意外とよくあります。
私自身、システム開発の中で structuredClone や Object.assign を頻繁に使っているのですが、実はずっと「この2つって何が違うの？」とモヤモヤしていました。
今回は、同じように「とりあえず使ってるけど違いはよく分かっていない」という方向けに、双方の基本的な機能・使い方と違いを丁寧に解説していきます。
各用語解説
-
オブジェクト：名前や年齢など、いくつかの情報を1つにまとめた「情報のセット」
-
配列：いくつかのデータを順番に並べて入れる長い箱のようなもの（たとえば、1番目・2番目・3番目…と順番で取り出せる）
-
DOM要素：画面に表示されている文字やボタンなどの「ページの部品」
-
モダン：昔のやり方じゃない、今っぽい「新しい機能や技術」のこと
-
ネスト：オブジェクトや配列の中に、さらに別のオブジェクトや配列が入っている「入れ子構造」
-
ディープコピー（深いコピー）：データの中までそっくり別のものとしてコピーする方法
-
シャローコピー（浅いコピー）：データの表面だけをコピーして、中身は元のデータと共有している状態
structuredClone()とは
structuredClone() は、オブジェクトの「深いコピー（ディープコピー）」を作るためのメソッドです。
例えば、オブジェクトの中にさらにオブジェクトや配列があるようなネスト構造をまるごとコピーしたいときに使います。
// {サンプルコード}
const original = { a: 1, b: { c: 2 } };
const copy = structuredClone(original);
copy.b.c = 999;
console.log(original.b.c); // 2（元の値は変わらない！）
// 上記では、b.c を変更しても元のオブジェクトには影響しないことがわかります
Object.assign()とは
Object.assign() は、オブジェクトの「浅いコピー（シャローコピー）」を作るためのメソッドです。
こちらはネストされたオブジェクトの中身まではコピーしません。
const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);
copy.b.c = 999;
console.log(original.b.c); // 999（元の値も変わってしまう）
// b の中身（c）は同じ参照を持っているため、変更が反映されてしまいます
structuredCloneとObject.assignの主な違い
| 特徴 | structuredClone | Object.assign |
|---|---|---|
| コピーの深さ | ディープコピー（完全コピー） | シャローコピー（浅いコピー） |
| ネストされたデータ | 独立してコピーされる | 元と参照が共有される |
| 使用可能なデータ | 関数・DOM要素など一部は不可 | 基本的に全て（ただし浅い） |
| サポート | モダンなブラウザで対応 | 幅広い環境で対応 |
応用的な使い方
structuredClone の応用例
Webアプリで状態管理（state）を巻き戻す処理など、元のデータを安全に保存しておきたいときに便利です。
// 状態を安全にバックアップ
const currentState = { user: { name: "Alice", score: 100 } };
const backup = structuredClone(currentState);
// 状態を変更
currentState.user.score = 50;
// 元に戻す
const restored = structuredClone(backup);
console.log(restored.user.score); // 100
Object.assign の応用例
スタイルや設定の上書きに便利です。初期値に対してユーザー設定を合成する、といった用途がよくあります。
// デフォルト設定にユーザー設定を上書き
const defaultConfig = { theme: "light", fontSize: 12 };
const userConfig = { fontSize: 16 };
const finalConfig = Object.assign({}, defaultConfig, userConfig);
console.log(finalConfig); // { theme: 'light', fontSize: 16 }
おわりに
オブジェクトのコピーと一言で言っても、その挙動には大きな違いがあります。
構造が単純なときや一時的なコピーなら Object.assign、
安全で確実なコピーが必要なら structuredClone というように、使い分けがポイントです。
「なんとなく」使っていた方も、今回の解説を通じて少しでも理解が深まれば幸いです。