【ITニュース解説】✨ Mastering Object Spread & Rest in JavaScript

JavaScriptにおけるオブジェクト操作は、プログラミングにおいて頻繁に行われる基本的な作業の一つである。特に、現代のJavaScript開発では、オブジェクトスプレッド構文（...）とオブジェクトレスト構文（...）という二つの強力な機能が広く利用されている。これらは見た目が似ているため、初心者には混乱しやすいが、それぞれの役割を理解することで、コードの記述がより効率的かつ簡潔になる。

まず、オブジェクトスプレッド構文について説明する。スプレッド構文は、主にオブジェクトのプロパティをコピーしたり、複数のオブジェクトを一つの新しいオブジェクトに結合したり、既存のオブジェクトのプロパティを上書きしたりするために用いられる。これは、既存のオブジェクトのプロパティを「展開」して、新しいオブジェクトの中に含めるイメージである。

具体的な使用例を見てみよう。二つのオブジェクトbirdDetailsとbirdHabitatを結合するケースを考える。birdDetailsには鳥の名前や色に関する情報が、birdHabitatには生息地や気候に関する情報が格納されているとする。これら二つのオブジェクトの全プロパティを一つの新しいオブジェクトparrotInfoにまとめたい場合、スプレッド構文は非常に便利である。

Copy
1const birdDetails = {
2  name: "Crow",
3  color: "black",
4};
5
6const birdHabitat = {
7  region: "South Africa",
8  climate: "warm to hot",
9};
10
11const parrotInfo = {
12  ...birdDetails,
13  ...birdHabitat,
14};
15
16// parrotInfo の結果: { name: "Crow", color: "black", region: "South Africa", climate: "warm to hot" }

このコードでは、birdDetailsオブジェクトのすべてのプロパティ（nameとcolor）がまずparrotInfoにコピーされ、次にbirdHabitatオブジェクトのすべてのプロパティ（regionとclimate）がparrotInfoにコピーされる。その結果、parrotInfoには両方のオブジェクトのプロパティが結合された状態で格納される。これにより、余分な手作業でのプロパティのコピーや、複雑なループ処理を記述することなく、オブジェクトを簡単にマージできる。

次に、スプレッド構文を用いたプロパティの上書きと追加について考える。既存のオブジェクトを基にしつつ、一部のプロパティの値を変更したり、新しいプロパティを追加したりする場合にスプレッド構文が活用できる。

Copy
1const car = {
2  brand: "Toyota",
3  name: "Toyota Corolla",
4  color: "white",
5};
6
7const newCar = {
8  ...car,
9  speed: "220km/h",
10  brand: "Honda",
11  name: "Honda Civic",
12};
13
14// newCar の結果: { brand: "Honda", name: "Honda Civic", color: "white", speed: "220km/h" }

この例では、まずcarオブジェクトのプロパティ（brand, name, color）がnewCarオブジェクトに展開される。その後に続くspeed: "220km/h"という記述により、speedという新しいプロパティが追加される。さらに、brand: "Honda"とname: "Honda Civic"が続くことで、既に展開されていたbrand: "Toyota"とname: "Toyota Corolla"の値がそれぞれ新しい値で上書きされる。このように、スプレッド構文を最初に記述し、その後に同じ名前のプロパティを記述すると、後から記述されたプロパティが優先され、値を上書きできる。新しいプロパティを追加することも、既存のプロパティの値を変更することも、非常に簡潔に記述できるため、オブジェクトの柔軟な更新が可能になる。

次に、オブジェクトレスト構文について説明する。レスト構文も...を使用するが、これはオブジェクトの分割代入と組み合わせて使用され、特定のプロパティをオブジェクトから抽出し、残りのプロパティを一つの新しいオブジェクトとして「収集」する役割を持つ。つまり、特定のプロパティを取り出した「残り」をまとめて一つのオブジェクトにしたい場合に利用される。

具体的な使用例を見てみよう。あるstudentオブジェクトから、nameとageという特定のプロパティだけを個別に抽出し、それ以外の残りのプロパティ（gradeとcity）をまとめて一つのオブジェクトとして扱いたい場合がある。

Copy
1const student = {
2  name: "Usama",
3  age: 22,
4  grade: "4.5",
5  city: "Karachi",
6};
7
8const { name, age, ...another } = student;
9
10// name の結果: "Usama"
11// age の結果: 22
12// another の結果: { grade: "4.5", city: "Karachi" }

このコードでは、studentオブジェクトからnameプロパティが変数nameに、ageプロパティが変数ageにそれぞれ抽出される。...anotherという記述は、nameとage以外のstudentオブジェクトの残りのすべてのプロパティ（この場合はgradeとcity）を収集し、それらを一つの新しいオブジェクトとして変数anotherに代入する。これにより、必要なプロパティだけを個別に取得し、残りをまとめて効率的に処理できる。

レスト構文は関数の引数としても非常に役立つ。関数の引数としてオブジェクトを受け取る際、特定のプロパティだけを個別に受け取り、残りをまとめて処理したい場合に利用できる。

Copy
1function remaProp({ name, age, ...another }) {
2  console.log("Remaining properties:", another);
3  console.log("Name and Age:", name, age);
4}
5
6const student = {
7  name: "Usama",
8  age: 22,
9  grade: "4.5",
10  city: "Karachi",
11};
12
13remaProp(student);
14// 出力:
15// Remaining properties: { grade: "4.5", city: "Karachi" }
16// Name and Age: Usama 22

この例では、remaProp関数が引数としてstudentオブジェクトを受け取る。関数の仮引数部分で分割代入が行われ、studentオブジェクトからnameプロパティが変数nameに、ageプロパティが変数ageに代入される。そして、...anotherによって、nameとage以外の残りのプロパティが収集され、anotherという新しいオブジェクトとして利用される。これにより、関数内で特定のプロパティを直接利用しつつ、残りのデータは柔軟に扱えるようになる。

まとめると、オブジェクトスプレッド構文（...）はオブジェクトのプロパティを新しいオブジェクトに「展開」し、コピー、マージ、または上書きを行うために使用される。一方、オブジェクトレスト構文（...）は、オブジェクトの分割代入時に特定のプロパティを取り出した後、残りのプロパティを「収集」して一つの新しいオブジェクトとしてまとめるために使用される。これら二つの構文を使いこなすことで、JavaScriptにおけるオブジェクト操作はより簡潔で読みやすいものとなり、システムエンジニアとしての開発効率を向上させることができるだろう。