✅ Rest構文（...）とは？

Rest構文は、配列やオブジェクトの「残りの要素」をひとまとめに受け取る構文です。

...（スプレッド構文と見た目は同じ）を使いますが、使う場所が違えば意味も違うのがポイント。

✅ 基本構文

配列の場合

const [first, ...rest] = [1, 2, 3, 4];

オブジェクトの場合

const { a, ...rest } = { a: 1, b: 2, c: 3 };

関数の引数で使う

function myFunc(...args) {
  console.log(args); // 配列としてすべての引数が入る
}

✅ Rest構文の特徴

• 先頭の要素だけ分けて、残りをまとめるときに使える
• オブジェクトの一部だけを取り出して、残りをまとめたいときに便利
• 関数で可変長引数を扱うときに使える

✅ 練習

コピペではなく実際に打ち込んで練習してみましょう。

1. 配列の先頭だけを取り出し、残りをまとめる

const numbers = [10, 20, 30, 40];
const [first, ...rest] = numbers;

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

2. オブジェクトのプロパティを分けて扱う

const user = { name: "Taro", age: 25, city: "Tokyo" };
const { name, ...other } = user;

console.log(name);  // "Taro"
console.log(other); // { age: 25, city: "Tokyo" }

3. 関数で任意の数の引数をまとめて受け取る

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(5, 10));   // 15

4. 最初の2つだけ使って、残りは無視

const [a, b, ..._] = [1, 2, 3, 4, 5];
console.log(a, b); // 1 2

✅ 練習のコツ

• 配列・オブジェクトの展開位置で意味が変わるので、場所を意識して練習しよう
• スプレッド構文とセットで学ぶと理解が深まる
• 可変長引数を扱う練習で、実際に ...args を使ってみよう

✅ まとめ（Rest構文）

• ... を使って「残りの要素をまとめる」ことができる
• 配列・オブジェクト・関数の引数に使える
• スプレッド構文との違いは「使う場所と目的」