こんにちは、Reiです。
JavaScriptでコードを書いていると、
配列やオブジェクトのデータを まとめたり、コピーしたり、書き換えたりする場面 がよくあります。
例えば、
・2つの配列を1つにまとめる
・元のデータを残したまま一部だけ変更する
・配列の一部だけ取り出す
といった処理です。
こうしたときに役立つのが
「スプレッド構文（Spread構文）」 です。
この書き方を使うと、
配列やオブジェクトのデータ操作を
シンプルに、そして安全に行うことができます。
まずは基本となる使い方から整理していきましょう！
スプレッド構文の基本
スプレッド構文は、
配列やオブジェクトをもとにして
新しい配列やオブジェクトを作るときによく使われる書き方です。
JavaScriptでは、ドットを3つ並べた「 … 」を使います。
この「 … 」を書くと、
配列やオブジェクトの中に入っている値を
外に取り出して展開することができます。
例えば次のコードを見てみましょう。
const arr1 = [1, 2];
const arr2 = [3, 4];
const sumArr = [...arr1, ...arr2];
console.log(sumArr);
このコードでは、次のような処理が行われます。
① arr1 の中身を展開
1, 2
② arr2 の中身を展開
3, 4
③ それらを新しい配列 sumArrとしてまとめる
その結果、
[1, 2, 3, 4]
という新しい配列が作られ、 sumArr に代入されます。
このようにスプレッド構文を使うと、
配列の中に入っている値を取り出して並べ、
新しい配列を作ることができるのです。
配列の一部をまとめる
スプレッド構文は、
分割代入と組み合わせて使うこともできます。
例えば次のコードを見てみましょう。
const numbers = [10, 20, 30, 40, 50];
const [first, ...others] = numbers;
console.log(first);
console.log(others);
このコードでは、次のような処理が行われます。
① 配列の最初の要素を取り出す
first = 10
② 残りの要素をまとめる
others = [20, 30, 40, 50]
つまり、
first → 10
others → [20, 30, 40, 50]
このように、配列の要素を
「最初の値」と「残りの値」に分けて分割して代入することもできます。
このように
残りの要素をまとめて配列にする書き方 も
スプレッド構文とよく似た形で使われる書き方です。
オブジェクトのコピーと上書き
スプレッド構文は、
オブジェクトでも同じように使うことができます。
例えば次のコードを見てみましょう。
const user = { name: "田中", age: 25 };
const updatedUser = {
...user,
age: 26
};
console.log(updatedUser);
このコードでは、次のような処理が行われます。
① user の中身を展開
name: “田中”
age: 25
② age を 26 に上書きする
その結果、
{ name: "田中", age: 26 }
という 新しいオブジェクト が作られます。
このようにスプレッド構文を使うと、
元のデータをコピーしながら一部だけ変更する
という処理を簡単に書くことができます。
なぜ push ではなくスプレッド構文を使うの？
ここで、ひとつ重要なポイントがあります。
JavaScriptの配列やオブジェクトは、
変数の中にデータそのものが入っているのではなく、
データが保存されている場所（参照）
が入っているということです。
例えば次のコードを見てみましょう。
const originalArr = ["A", "B"];
const copyArr = originalArr;
この場合、
originalArr と copyArr は
同じデータの場所を参照しています。
そのため、
copyArr.push("C");
のようにcopyArr の配列に “C” を追加すると、
["A", "B", "C"]
となり、同じ場所を参照している originalArr の内容も
一緒に変化してしまうのです。
このように、
元のデータを直接変更してしまうことを
破壊的変更 と呼びます。
なぜスプレッド構文で新しい配列を作るの？
スプレッド構文を使うと、
元のデータの内容をコピーしながら
新しく配列やオブジェクトを作ることができます。
例えば次のように書きます。
const newArr = [...originalArr, "C"];
この書き方では、
① originalArr の中身を展開する
② 新しい配列を作る
③ “C” を追加する
という処理が行われます。
つまり、スプレッド構文を使って
配列やオブジェクトの内容をコピーし、
必要な変更を加えることで、
元の配列を変更せずに、新しい配列やオブジェクトを作ることができるのです。
この考え方は、
イミュータビリティ（不変性）
と呼ばれ、ReactなどのモダンなJavaScript開発でもとても重要になります。
まとめ
ここまで、JavaScriptの スプレッド構文 を見てきました。
スプレッド構文を使うと、
配列やオブジェクトの中身を展開して新しいデータを作ることができます。
＼＼ 今回のまとめ ／／
・ スプレッド構文は「 ... 」を使ってデータを展開する書き方
・ 配列を結合したりコピーしたりできる
・ 分割代入と組み合わせて残りの要素をまとめることができる
・ オブジェクトのコピーや一部更新にも使える
・ 元のデータを変更せず、新しいデータを作ることができる
スプレッド構文を使えるようになると、
配列やオブジェクトを より安全でシンプルに扱えるようになります。
最初は少し不思議に感じるかもしれませんが、
実際の開発ではとてもよく使われる書き方です。
ぜひコードを書きながら、
この書き方に少しずつ慣れていきましょう！
次は、オブジェクトや配列から値を取り出す
「分割代入（Destructuring）」 を見ていきます。
コメント