JavaScriptのスプレッド構文でオブジェクトをコピーする方法をわかりやすく解説！初心者向け

1. スプレッド構文とは？

1. スプレッド構文とは？

スプレッド構文（...）は、配列やオブジェクトの中身を取り出して、別の配列やオブジェクトに展開するための便利な書き方です。例えばオブジェクトの場合は、元のオブジェクトのプロパティと値をまるごと新しいオブジェクトにコピーできます。

const original = { name: "太郎", age: 20 };
const copy = { ...original };
console.log(copy);

{ name: "太郎", age: 20 }

このように{ ...original }と書くだけで、新しいオブジェクトcopyが作れます。

2. スプレッド構文でプロパティを追加しながらコピーする方法

2. スプレッド構文でプロパティを追加しながらコピーする方法

コピーすると同時に新しいプロパティを追加したい場合も、スプレッド構文なら簡単です。

const original = { name: "太郎", age: 20 };
const updated = { ...original, city: "東京" };
console.log(updated);

{ name: "太郎", age: 20, city: "東京" }

このようにコピーと追加を同時に行うことができます。元のオブジェクトは変更されません。

3. プロパティを上書きしてコピーする方法

3. プロパティを上書きしてコピーする方法

コピーするときに一部の値だけ変更したい場合もスプレッド構文が便利です。

const original = { name: "太郎", age: 20, city: "大阪" };
const modified = { ...original, city: "東京" };
console.log(modified);

{ name: "太郎", age: 20, city: "東京" }

この例ではcityだけ上書きして、新しいオブジェクトmodifiedを作っています。元のoriginalはそのままです。

4. ネストしたオブジェクトのコピーについて

4. ネストしたオブジェクトのコピーについて

オブジェクトの中にさらにオブジェクトが入っている場合（ネストされたオブジェクト）、スプレッド構文は浅いコピー（shallow copy）になります。

const original = { name: "太郎", address: { city: "大阪", zip: "123-4567" } };
const copy = { ...original };
copy.address.city = "東京";
console.log(original.address.city);

"東京"

ネストしたオブジェクトはコピー先と元が同じ参照を持つため、元の値も変わります。深くコピーしたい場合は、別の方法（JSON.parse(JSON.stringify(...))など）を使います。

5. 配列と一緒にスプレッド構文を使う例

5. 配列と一緒にスプレッド構文を使う例

スプレッド構文はオブジェクトだけでなく配列でも使えます。オブジェクトと配列を組み合わせると便利です。

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4, 5];
console.log(newArray);

[1, 2, 3, 4, 5]

このように配列もコピーしつつ新しい要素を追加できます。

6. オブジェクトと配列を組み合わせた便利な例

6. オブジェクトと配列を組み合わせた便利な例

オブジェクトの中に配列を持つ場合、スプレッド構文を使うと便利です。

const user = { name: "花子", scores: [80, 90] };
const newUser = { ...user, scores: [...user.scores, 100] };
console.log(newUser);

{ name: "花子", scores: [80, 90, 100] }

この例では、オブジェクトをコピーしつつ、配列の中身もコピーして新しい点数を追加しています。

7. まとめとしてスプレッド構文を覚えるポイント

7. まとめとしてスプレッド構文を覚えるポイント

ポイントは3つです。
1. { ...obj }でオブジェクトをコピーできる。
2. コピーと同時にプロパティを追加や上書きできる。
3. ネストされたオブジェクトは浅いコピーになるので注意。

初心者でもスプレッド構文を使えば、オブジェクトのコピーやデータの整理が簡単になります。実際の開発でもよく使われるテクニックなので覚えておきましょう。

まとめ

まとめ

今回の記事では、JavaScriptのスプレッド構文を使ってオブジェクトや配列をコピーする方法について詳しく解説しました。スプレッド構文は、オブジェクトのプロパティや配列の要素を展開して新しいオブジェクトや配列を作るための非常に便利な書き方です。基本的なコピーから、プロパティの追加や上書き、ネストしたオブジェクトの扱い、配列との組み合わせなど、さまざまな場面で役立ちます。ポイントとしては、{ ...obj }でコピーできること、コピーと同時にプロパティを追加・上書きできること、そしてネストしたオブジェクトは浅いコピーになることに注意することです。特にネストしたオブジェクトの扱いは、元のオブジェクトに影響を与えないようにする場合、JSON.parse(JSON.stringify(obj))のような深いコピーを検討する必要があります。また、スプレッド構文は配列でも使えるため、オブジェクトと配列を組み合わせたデータ操作も簡単に行えます。これにより、初心者でもコードがシンプルになり、バグを減らすことができます。実務においても、データのコピーや変更が必要な場面は非常に多いため、このテクニックは必ず覚えておくと役立ちます。

サンプルプログラムの振り返り

例えば、基本のオブジェクトコピーは以下のように書きます。

const original = { name: "太郎", age: 20 };
const copy = { ...original };
console.log(copy);

{ name: "太郎", age: 20 }

コピーと同時にプロパティを追加したい場合は次のように書けます。

const updated = { ...original, city: "東京" };
console.log(updated);

{ name: "太郎", age: 20, city: "東京" }

ネストされたオブジェクトは浅いコピーになるため、元のオブジェクトに影響を与えることもあります。

const nested = { name: "太郎", address: { city: "大阪" } };
const shallowCopy = { ...nested };
shallowCopy.address.city = "東京";
console.log(nested.address.city);

"東京"

必要に応じて深いコピーを使うことも検討しましょう。