JavaScriptでオブジェクトをクローン（複製）する方法をわかりやすく解説

オブジェクトのクローンとは

JavaScriptにおける「クローン」とは、既存のオブジェクトのプロパティを別のオブジェクトへコピーすることです。これにより、すでに存在するオブジェクトを重複して作成することを避けられます。

JavaScriptでオブジェクトをクローンする主な方法は以下の3つです。

各プロパティを反復処理しながら新しいオブジェクトへコピーする
JSONメソッド（JSON.stringify / JSON.parse）を利用する
Object.assign() メソッドを利用する

それでは、それぞれの方法を順番に見ていきましょう。

a) 各プロパティを反復処理してコピーする方法

これは昔から使われている古典的な手法で、for...in ループを使って元オブジェクトの各プロパティを1つずつ取り出し、新しいオブジェクトへコピーしていきます。シンプルな方法ですが、現在ではあまり単独では使われません。なお、hasOwnProperty() を使って継承されたプロパティを除外している点に注目してください。

サンプルコード：

<html>
<body>
<p id="cloning-1"></p>
<script>
    const sourceObject = {name:"salman", age:23, salary:25000};
    let requiredObj = {};
    for (let pro in sourceObject) {
      if (sourceObject.hasOwnProperty(pro)) {
        requiredObj[pro] = sourceObject[pro];
      }
    }
    document.getElementById("cloning-1").innerHTML =
    "targetObject name = " + requiredObj.name + ", age = " + requiredObj.age + ", salary = " + requiredObj.salary;
</script>
</body>
</html>

実行結果

targetObject name = salman, age = 23, salary = 25000

b) JSONメソッドを使う方法

これは比較的モダンなクローン方法の一つです。JSON.stringify() でオブジェクトを文字列化し、JSON.parse() で再びオブジェクトに戻すことで、完全に独立した新しいオブジェクトを作成できます（ディープコピー）。ただし、この方法を使う場合は、元のオブジェクトがJSONセーフである必要があります。関数や undefined、Date オブジェクトなどは正しく複製できない点に注意しましょう。

サンプルコード：

<html>
<body>
<p id="cloning-2"></p>
<script>
    const sourceObject = {name:"salman", age:23, salary:25000};
    let requiredObj = {};
    requiredObj = JSON.parse(JSON.stringify(sourceObject));
    document.getElementById("cloning-2").innerHTML =
    "targetObject name = " + requiredObj.name + ", age = " + requiredObj.age + ", salary = " + requiredObj.salary;
</script>
</body>
</html>

実行結果

targetObject name = salman, age = 23, salary = 25000

c) Object.assign() を使う方法

近年最もよく使われている先進的な方法です。第一引数に空のオブジェクト {} を指定し、第二引数にコピー元のオブジェクトを渡すことで、手軽に複製が可能です。

ただし注意点として、このメソッドはシャローコピー（浅いコピー）しか行いません。つまり、ネストされた（入れ子になった）プロパティは参照渡しでコピーされるため、入れ子の中身を書き換えると元のオブジェクトにも影響します。深いコピーが必要な場合は、structuredClone() やライブラリの利用も検討するとよいでしょう。

サンプルコード：

<html>
<body>
<p id="cloning-3"></p>
<script>
    const sourceObject = {name:"salman", age:23, salary:25000};
    let requiredObj = {};
    requiredObj = Object.assign({}, sourceObject);
    document.getElementById("cloning-3").innerHTML =
    "targetObject name = " + requiredObj.name + ", age = " + requiredObj.age + ", salary = " + requiredObj.salary;
</script>
</body>
</html>

実行結果

targetObject name = salman, age = 23, salary = 25000

まとめ

方法	特徴
for...inループ	古典的な方法。プロパティを1つずつ手動でコピーする
JSON.parse(JSON.stringify())	ディープコピーが可能。ただしJSONセーフなデータ限定
Object.assign()	現代的で手軽。ただしネストしたプロパティは参照共有される

用途に応じて適切な方法を選択することで、安全かつ効率的にオブジェクトの複製を行えます。

JavaScriptのMap（マップ）とは？基本構文とオブジェクトとの違いを実例で解説

JavaScriptのマークアンドスイープアルゴリズムとは？仕組みと動作原理をわかりやすく解説

JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法
JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。ポイント：分割代入の基本構文オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。コード例
JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】
はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。サンプルコード以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /