先生と生徒の会話形式で理解しよう

生徒

「TypeScriptの説明で、スプレッド構文とかrest構文ってよく出てくるんですが、正直よく分かりません…」

先生

「最初は難しく感じますよね。でも実は、データをまとめたり分けたりする、とても身近な考え方なんですよ。」

生徒

「パソコンをほとんど触ったことがなくても理解できますか？」

先生

「もちろんです。日常生活の例えを使いながら、TypeScriptでのスプレッド構文とrest構文の使い方を一つずつ見ていきましょう。」

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

TypeScriptのスプレッド構文とrest構文は、どちらも「...（ドット3つ）」を使って書きます。見た目は同じですが、役割は正反対です。

スプレッド構文は「バラして広げる」ための書き方で、rest構文は「まとめて集める」ための書き方です。 TypeScriptはJavaScript（ES6/ESNext）の文法をベースにしているため、これらの構文もそのまま安全に使えます。

プログラミング未経験の方は、「お菓子の袋」を想像してみてください。スプレッド構文は袋の中身を机の上に全部出すイメージ、rest構文は机の上のお菓子を袋にまとめるイメージです。

2. スプレッド構文の基本的な使い方

まずはスプレッド構文から見ていきます。スプレッド構文は、配列（データを順番に並べたもの）やオブジェクト（名前付きのデータの集まり）を展開するときに使います。

配列とは、「りんご・バナナ・みかん」のように、複数の値を順番にまとめたデータです。スプレッド構文を使うと、その中身を一つずつ取り出せます。


const fruits = ["りんご", "バナナ", "みかん"];
const allFruits = ["ぶどう", ...fruits, "もも"];
console.log(allFruits);


["ぶどう", "りんご", "バナナ", "みかん", "もも"]

この例では、fruits配列の中身がバラされて、新しい配列の中に入っています。元の配列は変更されないため、データを安全に扱えるのもTypeScriptの大きなメリットです。

オブジェクトとは、「名前」と「値」をセットで管理するデータです。例としては、「名前は山田、年齢は20歳」といった情報のまとまりを想像してください。


const user = { name: "山田", age: 20 };
const userWithAddress = { ...user, address: "東京" };
console.log(userWithAddress);


{name: "山田", age: 20, address: "東京"}

スプレッド構文を使うことで、元のオブジェクトを壊さずに、新しい情報を追加できます。これは、TypeScriptで安全なコードを書くうえでとても重要な考え方です。

次にrest構文です。rest構文は、バラバラに渡された値を一つにまとめるときに使います。主に関数（処理をまとめたもの）の中で使われることが多いです。

関数とは、「入力すると結果が返ってくる箱」のようなものです。 rest構文を使うと、いくつ値が来てもまとめて受け取れます。


function showNumbers(...numbers: number[]) {
    console.log(numbers);
}

showNumbers(1, 2, 3, 4);


[1, 2, 3, 4]

...numbersと書くことで、渡された数字が配列としてまとめられます。 TypeScriptでは型（ここではnumber）を指定できるため、間違ったデータが入るのを防げます。

ここまでで、スプレッド構文とrest構文の基本を学びました。最後に、それぞれの役割をもう一度整理します。

同じ「...」でも、使う場所によって意味が変わる点がポイントです。 TypeScriptでは型と組み合わせることで、より安全で読みやすいコードが書けるようになります。