TypeScriptマスターへの道！初心者から始めるMapの使い方

はじめに

こんにちは！Syuu（ @syuu_n18）です。

今回は、TypeScriptのMapを初心者向けにわかりやすく解説します！

私自身もTypeScriptでプログラムを書く際にMapを使って、データ管理が効率的になった経験があります。
Mapを使いこなせるようになるとコーディングがより楽しくなること間違いなしです✨

Mapとは？

Mapはキーと値のペアを保持するためのコレクションです。

似たものにオブジェクトがありますが、オブジェクトとはいくつか違いがあります。

Mapはキーに任意の型を使えますが、オブジェクトではキーが文字列かシンボルに限られます。
また、Mapは順番を保持しますがオブジェクトでは順番は保証されません。

例えば、以下のようにのオブジェクトとMapを使ってキーと値を管理することができます。

オブジェクトの例：

const obj = {
  key1: "value1",
  key2: "value2"
};

Mapの例：

const map = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);

Mapを使うべき理由

Mapはオブジェクトよりも高速で順序付けされているため、データの追加や削除が簡単です。

また、任意の型のキーを使用できるため柔軟なデータ構造を作ることができます。
さらに、Mapは以下のような特徴があります。

キーの存在確認が簡単

has() メソッドを使って簡単にキーの存在を確認できます。

逆にオブジェクトではin演算子や hasOwnProperty() メソッドを使う必要があります。

サイズが取得しやすい

Mapでは size プロパティで要素数を取得できます。

一方、オブジェクトでは Object.keys() を使ってキーの配列を取得し、その長さを調べる必要があります。

クリアが簡単

オブジェクトでは個別にプロパティを削除するか、新しいオブジェクトを作成する必要がありますが、Mapでは clear() メソッドを使ってすべての要素を一度に削除できます。

これらの理由からMapはデータ管理に適したコレクションです。

どういう場面でMapを使うべきか

私が実際にMapを使って効果的だったプロジェクトでは、以下のような場面で活躍しました。

ユーザーIDとユーザー情報を紐付ける
複数のAPIから取得したデータをまとめて管理する
イベントリスナーを登録・解除する際の管理

これらの場面でMapを使うことで効率的で読みやすいコードが書けました。

Mapで使えるメソッド

Mapでは、以下のような便利なメソッドが使えます。

set(key, value)

set はMapにキーと値を設定します。

myMap.set("apple", 3);

これでキーが apple で値が3の要素が追加されます。

get(key)

get はキーに対応する値を取得します。
以下の例ではキーが apple の値を取得できます。

const value = myMap.get("apple");

has(key)

Map内に特定のキーが存在するか確認するには has を使用します。

const hasKey = myMap.has("apple");

delete(key)

Map内にあるキーに対応する要素を削除します。
以下の例ではキーが apple の要素が削除されます。

myMap.delete("apple");

clear()

clear を使うことでMap内のすべての要素を削除できます。

myMap.clear();

これでMap内のすべての要素が削除されます。

これらのメソッドを使うことで、Mapのデータ操作が簡単にできます。

実践的な例

では、実際にMapを使ったコード例を見てみましょう。
今回はユーザーIDとユーザー情報を管理する例を紹介します。

まず、ユーザーIDとユーザー情報を紐付けるMapを作成します。

type UserInfo = {
  name: string;
  age: number;
};

const userMap = new Map<number, UserInfo>();

次に、ユーザー情報を追加します。

userMap.set(1, { name: "Yamato", age: 30 });
userMap.set(2, { name: "Nadeshiko", age: 25 });

追加したユーザー情報を取得するには get を使って以下のように記述します。

console.log(userMap.get(1)); // { name: "Yamato", age: 30 }

ユーザー情報が存在するか確認するには has メソッドを使用します。
以下の例ではユーザーID3のユーザーが存在しないため false を返します。

console.log(userMap.has(3)); // false

最後にユーザー情報を削除するには delete を使って以下のように記述します。
ユーザーID2のユーザーを削除しているため false を返します。

userMap.delete(2);
console.log(userMap.has(2)); // false

このように、Mapを使うことで効率的にデータを管理できますね！

TypeScript で配列をループする簡単な3つの方法を紹介

初心者向けにTypeScriptの配列をループする方法を分かりやすく解説！for、for-of、forEachの3つを紹介。

gizanbeak.com

まとめ

この記事ではTypeScriptのMapについて初心者向けに解説しました。

Mapはキーと値のペアを保持するコレクションで、のオブジェクトとは異なる特徴を持っています。
具体的な利用例やメソッドを参考にしてMapを活用することでデータ管理が効率的になります。

ぜひMapを使いこなして、楽しくTypeScriptでの開発を進めてください！🚀

TypeScript入門ガイド2023｜ハンズオンで学ぶ基本技術

TypeScriptを初めて学ぶ方向けのハンズオン形式チュートリアル。基本からクラスまで楽しく学びましょう！

gizanbeak.com

Gizanbeak