JavaScript

【JavaScript】オブジェクトをコピーする方法

本記事では、JavaScriptのオブジェクトをコピーする方法について解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

オブジェクトのコピー

Object.assignメソッド

オブジェクトをコピーする場合、Object.assignメソッドを使用します。

Object.assign({}, コピーしたいオブジェクト);

Object.assignはオブジェクト同士の結合で使われることが多いメソッドですが、第一引数に空のオブジェクト「{}」を指定し第二引数にコピーしたいオブジェクトを指定することでオブジェクトのコピーをすることができます。

const fruitsObj = {
  id:1,
  name:"apple"
}

const copyObj = Object.assign({},fruitsObj);
copyObj.name = "orange";
console.log(fruitsObj); // -> {id:1, name:"apple"}
console.log(copyObj); // -> {id:1, name:"orange"}

注意点:ディープコピーされない

Object.assignメソッドを使ってオブジェクトは第一階層までの浅いコピーであれば、問題ありませんがオブジェクトの階層が第二階層以上ある時は正しくコピーされません。

const fruitsObj = {
  id:1,
  name:"apple",
  detail: {
    area: "青森",
    price: 200,
  }
}

const copyObj = Object.assign({},fruitsObj);
copyObj.detail.area = "長野";
copyObj.detail.price = "250";
console.log(fruitsObj); // -> {id:1, name:"apple", detail:{area: "長野",price: 250,}}
console.log(copyObj); // -> {id:1, name:"apple", detail:{area: "長野",price: 250,}}

ディープコピーをする場合は、次に解説するObject.assignメソッドとJSON.parseメソッドとJSON.stringifyメソッドを組み合わせた方法でオブジェクトをコピーしてください。

JSON.parseメソッドとJSON.stringifyメソッド

オブジェクトをディープコピーする場合、Object.assignメソッドとJSON.parseメソッドとJSON.stringifyメソッドを使用します。

Object.assign({}, JSON.parse(JSON.stringify(コピーしたいオブジェクト)));

仕組みを解説すると、JSON.stringifyメソッドでJavaScriptオブジェクトを取得しJSON文字列に変換します。次にJSON.parseメソッドでJSON文字列をJavaScriptに変換します。これで第二階層以上のオブジェクトを別物として扱えるようになったので、Object.assignメソッドでオブジェクトをコピーします。

const fruitsObj = {
  id:1,
  name:"apple",
  detail: {
    area: "青森",
    price: 200,
  }
}

const copyObj = Object.assign({}, JSON.parse(JSON.stringify(fruitsObj)));
copyObj.detail.area = "長野";
copyObj.detail.price = "250";
console.log(fruitsObj); // -> {id:1, name:"apple", detail:{area: "青森",price: 200,}}
console.log(copyObj); // -> {id:1, name:"apple", detail:{area: "長野",price: 250,}}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村