2020.08.05レシピオブジェクトオブジェクトを複製するすでにあるオブジェクトから別のオブジェクトを複製する方法について解説します。この記事のポイントオブジェクトの複製は参照渡しに注意するオブジェクトが入れ子(階層状態)のときはJSONオブジェクトのメソッドを使って複製する目次オブジェクトを複製する変数の代入ではオブジェクトを複製できないオブジェクトが入れ子になっている場合の複製オブジェクトを複製するすでにあるオブジェクトを複製したいときはassignメソッドを使います。以下の例では変数data1に入っているオブジェクトを変数data2に複製します。"Lili"}assignメソッドには第1パラメータに空のオブジェクトを渡して、第2パラメータに複製したい元のオブジェクトを渡します。今回は変数data1に入っているオブジェクトを複製したいので、上記のようにdata1は第2パラメータに指定して、空のオブジェクトを第1パラメータに指定します。assignメソッドは複製したオブジェクトを戻り値にするため、変数data2で受け取ります。複製したいオブジェクトがオブジェクトの入れ子構造になっている場合の対応方法は後述しますが、まずは変数の代入ではオブジェクトを複製することができない例を解説します。変数の代入ではオブジェクトを複製できないassignメソッドを使わずに、変数の代入をするとオブジェクトは参照渡しになってしまうため複製することはできません。以下の例では変数data1に入っているオブジェクトをそのまま変数data2に代入した後に、変数data2の各プロパティに値を設定しています。"Jesica"}変数data1とdata2の値を出力してみると、変数data2のプロパティに設定した値がdata1のオブジェクトにも反映されてしまっていることが分かります。オブジェクトが入れ子になっている場合の複製オブジェクトのプロパティが以下のように入れ子になっている場合は、assignメソッドによる複製は注意が必要です。以下のようにオブジェクトのプロパティの値としてオブジェクトが入っているデータを複製して、複製した後のオブジェクトのプロパティに新しい値を設定してみます。"Book"}出力した値を確認すると、idプロパティとnameプロパティは問題ありませんが、itempプロパティの値がdata1のものも更新されてしまっていることが分かります。この現象はオブジェクトの参照が解除されていないために発生しますが、JSONオブジェクトのstringifyメソッドとparseメソッドを使って参照を解除してから複製することで解消できます。"Book"}2つのオブジェクトのitemプロパティが正常に設定されました。以下のコードを使って、「JSON.parse(JSON.stringify(data1))」でどんなことが起こっているか確認していきます。"Pen"}まず、「JSON.stringify(data1);」の箇所でstringifyメソッドを実行することでオブジェクトをJSON形式のテキストに変換します。この時点ですでに、変数data1に入っているオブジェクトとは参照が切断されます。続いて、parseメソッドを実行して変数tempに入っているJSON形式のテキストを解析し、JavaScriptのオブジェクトを作成します。プレーンなテキストをオブジェクトに変換するイメージです。以上の2つの処理から、stringifyメソッドによるJSON変換によってオブジェクトの参照を解除し、全く新しい別のオブジェクトとして作成し直すことで参照渡しを避けたオブジェクトの複製をすることができます。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。