1. ES6構文とは？TypeScriptとの関係

まずES6（イーエスシックス）とは、JavaScriptが大きく進化したときの新しい書き方のルールの集合です。正式には「ECMAScript 2015」と呼ばれます。TypeScriptは、このES6やさらに新しいESNextの構文を、そのまま使うことができます。

難しく考えなくて大丈夫です。今までよりも分かりやすく、安全に書ける便利な書き方が増えた、とイメージしてください。MapやSet、for...ofは、その代表的な機能です。

2. Mapとは？名前付きのデータを管理する箱

Map（マップ）は、「名前」と「中身」をセットで保存できる仕組みです。例えば、ロッカーに番号と荷物を対応させて入れておくような感覚です。配列よりも、何が入っているか分かりやすいのが特徴です。


const userMap = new Map<string, string>();
userMap.set("id", "001");
userMap.set("name", "太郎");
userMap.set("job", "学生");

console.log(userMap.get("name"));


太郎

new Map()でMapを作り、setでデータを入れ、getで取り出します。TypeScriptでは、<string, string>のように型を書くことで、「文字と文字のセットですよ」とコンピュータに教えられます。これにより、入力ミスを防げます。

3. Setとは？重複しないデータを集める箱

Set（セット）は、「同じものを2つ以上入れられない箱」です。たとえば、出席者リストのように、同じ名前が何度も入らないようにしたい場面で役立ちます。


const fruits = new Set<string>();
fruits.add("りんご");
fruits.add("みかん");
fruits.add("りんご");

console.log(fruits.size);

同じ「りんご」を2回入れても、1つとして数えられます。sizeは、中に入っている数を表します。重複を自動で防いでくれるので、初心者でも安心して使えます。

4. for...ofとは？中身を順番に取り出す方法

for...of（フォー・オブ）は、箱の中身を上から順番に取り出すための書き方です。難しい設定がいらず、人が見ても動きが想像しやすいのが特徴です。


const colors = ["赤", "青", "黄色"];

for (const color of colors) {
    console.log(color);
}


赤
青
黄色

「colorsの中から1つずつ取り出して、colorに入れる」という意味になります。配列だけでなく、MapやSetにも使えるので、ES6構文の中でもとても重要です。

5. Mapとfor...ofを組み合わせて使う

Mapはfor...ofと組み合わせることで、本領を発揮します。名前と中身を同時に取り出せるため、何を処理しているかが一目で分かります。


const scoreMap = new Map<string, number>();
scoreMap.set("国語", 80);
scoreMap.set("算数", 90);

for (const [subject, score] of scoreMap) {
    console.log(subject + ":" + score);
}


国語:80
算数:90

[subject, score]のように書くことで、1つ目が名前、2つ目が中身として自動的に分かれます。TypeScriptでは型があるため、数字と文字を間違える心配も減ります。

6. Setとfor...ofで一覧表示する

Setも同じようにfor...ofで中身を確認できます。重複しない一覧を作りたいときにとても便利です。


const numbers = new Set<number>();
numbers.add(1);
numbers.add(2);
numbers.add(2);
numbers.add(3);

for (const num of numbers) {
    console.log(num);
}