TypeScriptでMap・Set・for...ofなどES6構文を活用する方法

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

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

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

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

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

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とは？重複しないデータを集める箱

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

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

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

console.log(fruits.size);

2

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

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

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を組み合わせて使う

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で一覧表示する

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);
}

1
2
3

このように、ES6構文を使うことで、コードが短くなり、読みやすくなります。TypeScriptでは型が支えてくれるため、プログラミング未経験の方でも安心して学習を進められます。

7. TypeScriptでES6構文を使うメリット

7. TypeScriptでES6構文を使うメリット

TypeScriptでMap・Set・for...ofなどのES6構文を使う最大のメリットは、ミスを減らしながら、分かりやすいコードを書けることです。人間が読んで理解しやすい書き方は、長く使われるプログラムほど重要になります。

最初は箱やリストのイメージで覚えれば十分です。細かい仕組みは、使っていくうちに自然と理解できるようになります。