TypeScriptのMapを基本から実例まで丁寧に解説

※本サイトにはプロモーション・広告が含まれています。

（最終更新月：2023年12月）

✔当記事は以下のような疑問を持つ方におすすめです

「Typescriptのmapメソッドとはどのような機能を持つのだろう？」

「mapメソッドをTypescriptでどのように使うのか学びたい」

「Typescriptでのmapメソッドの具体的な使用例を知りたい」

✔当記事でお伝えする内容

  • Typescriptにおけるmapメソッドの基礎
  • mapメソッドの正しい使い方とテクニック
  • 実践的なmapメソッドの使用例

当記事では、Typescriptにおけるmapメソッドの基礎的な概要から始めて、実用的な使い方、状況に応じた応用例に至るまでをわかりやすくご説明します。

使い手の技術向上に役立つ情報が満載ですので、最終行までぜひお読みいただき、Typescriptのmapメソッドをマスターしましょう。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker
¥2,640 (2024/10/05 14:02:47時点 Amazon調べ-詳細)

Mapオブジェクトの基本

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

Mapを理解し使いこなすことで、より効率的なデータ管理が可能になるでしょう。

  • TypeScriptとMapオブジェクト
  • Mapの初期設定と作成方法
  • Mapオブジェクトとは何か？その利用シナリオ

TypeScriptとMapオブジェクト

TypeScriptでは、JavaScriptにおけるMapオブジェクトの機能を型システムの効力で強化しています。

以下のコードは、Mapオブジェクトの宣言時にキーと値の型を明示する例です。

let map: Map<string, number> = new Map();

このコードで作成されたmapは、文字列のキーと数値の値をもつエントリのみを保持できます。

初心者の方でも、型注釈によってどのようなMapを作っているかがひと目でわかり、誤った型のデータの挿入を防げます。

Mapの初期設定と作成方法

Mapオブジェクトの作成は非常にシンプルです。

初期値として配列の配列（エントリーの配列）を渡し、Mapを初期化します。

以下は、Mapを初期設定で作成する一般的なコード例です。

let fruits = new Map([
  ["apple", "red"],
  ["banana", "yellow"],
  ["grape", "purple"]
]);

この例では、フルーツの名前をキーとし、その色を値に持つMapを作成しています。

これにより、複数のキーと値のペアを効率よく管理できます。

Mapオブジェクトとは何か？その利用シナリオ

Mapオブジェクトは、キーと値のペアを集めたコレクションであり、任意の型の値をキーとして使用できます。

Mapの利用シナリオとしては、以下のように一対一の関連付けが必要な場面で有効です。

  • ユーザーIDとユーザー情報を紐付ける
  • 商品コードと商品の詳細情報を管理する

Mapの型と構文

こちらでは、Mapに注釈を付ける方法から応用的な構文までを見ていきましょう。

TypeScriptの強力な型システムを活用して、Mapオブジェクトをより安全かつ効率的に使用できます。

  • TypeScriptにおけるMapの型注釈
  • 型安全性確保のためのタプルの利用
  • Mapの構文：基本から応用まで

TypeScriptにおけるMapの型注釈

TypeScriptでMapオブジェクトに型注釈を加えることで、キーと値の型を制限し、コードの安全性を向上させます。

以下の宣言例は、キーと値に型注釈をつけたMapの作成方法を示すものです。

let scores: Map<string, number> = new Map();

scores変数は文字列型のキーと数値型の値を持つMapとして注釈されています。

数値以外の値をscoresに割り当てようとすると、TypeScriptコンパイラがエラーを発生させます。

型安全性確保のためのタプルの利用

タプルを使用してMapオブジェクトへの型安全な初期データの提供をおこなえます。

以下は、タプルを利用している初期値の例です。

let userRoles: Map<string, [string, string]> = new Map([
  ["u123", ["John Smith", "Admin"]],
  ["u456", ["Jane Doe", "Moderator"]]
]);

このコード例では、各ユーザーID（キー）に対して、ユーザー名と役割がタプル形式で紐付けられています。

これにより、各キーに対する値の構造を厳密に管理することが可能です。

Mapの構文：基本から応用まで

Mapオブジェクトの基本的な構文は、キーと値を.set()メソッドで追加し、.get()メソッドで値を取得することです。

さらに、.has()でキーの存在をチェックし、.delete()で特定のキーをもつエントリの削除も可能。

そして、.clear()でMap内のすべてのエントリをクリアできます。

let map = new Map();
map.set("key1", "value1");
map.set("key2", "value2");

if (map.has("key1")) {
  console.log(map.get("key1")); // "value1"
}

map.delete("key1");
console.log(map.has("key1")); // false
map.clear();
console.log(map.size); // 0

上記は、Mapの基本操作を示すコード例であり、よく使われる構文を網羅的に押さえています。

初心者でもこれらのメソッドを使って簡単にMapの操作がおこなえるでしょう。

Mapキーの特性

Mapオブジェクトのキーは、特有の特性を持っています。

それを理解することで、より正確にデータを管理することが可能です。

  • ユニークなキー：厳密等価性の理解
  • キー値の複雑さ：動的データ管理
  • キーの比較：基本データ型 vs オブジェクト参照

ユニークなキー：厳密等価性の理解

Mapオブジェクトでは、同一のキーを二重に持つことはできません。

つまり、キーは厳密に等しいと判断される場合に限り等しいものとみなされます。

以下は、異なるオブジェクトでもキーとして機能することを示すコード例です。

let map = new Map();
let keyObj1 = {};
let keyObj2 = {};

map.set(keyObj1, "value1");
map.set(keyObj2, "value2");

console.log(map.get(keyObj1)); // "value1"
console.log(map.get(keyObj2)); // "value2"

このコードでは、keyObj1とkeyObj2は異なるオブジェクト参照として扱われ、各々が異なる値を持つ独立したキーとなっています。

キー値の複雑さ：動的データ管理

Mapのキーは、文字列や数値だけでなく、関数、オブジェクト、任意のオブジェクトを含めることが可能。

動的なデータ構造を柔軟に管理できます。

例として、関数をキーとして使用するケースを考えましょう。

let map = new Map();
let myFunc = function() { /*...*/ };

map.set(myFunc, "functionAsKey");

console.log(map.get(myFunc)); // "functionAsKey"

ここでは、関数myFuncがキーとして使われており、Mapは関数をキーとして認識しています。

これは、コールバック関数とそれに関連するデータを結びつけたい場合などに役立つでしょう。

キーの比較：基本データ型 vs オブジェクト参照

基本データ型（プリミティブ型）をキーとして使用した場合、その値によって厳密等価性が評価されます。

しかし、オブジェクトや配列などの参照型をキーとして使用すると、参照の等価性が問われることに注意が必要です。

以下は、基本データ型と参照型のキーを比較している例です。

let map = new Map();
map.set("key", "value1"); // 文字列キー
map.set(1, "value2"); // 数値キー

let objKey = {};
map.set(objKey, "value3");

console.log(map.get("key")); // "value1"
console.log(map.get(1));     // "value2"
console.log(map.get({}));    // undefined（新しいオブジェクト参照は`objKey`とは異なる）

文字列や数値のキーではその値で判断されるが、オブジェクトでは参照が異なれば異なるキーとみなされることを示しています。

Mapの活用方法

Mapオブジェクトは、さまざまな方法でデータを操作するメソッドを提供します。

これらを利用することで、データの管理が容易です。

  • データの追加：setメソッドを使う
  • データの取り出し：getメソッドの活用
  • アイテムの削除：deleteメソッドの概要
  • キー存在の確認：hasメソッドの特徴
  • 要素数の把握：sizeプロパティの活用
  • 全データのクリア：clearメソッドでリセット

データの追加：setメソッドを使う

.set()メソッドを使って、Mapに新しいエントリー（キーと値のペア）を追加できます。

もし既に同じキーが存在する場合、そのキーの値が新しい値で上書きも可能。

以下がsetメソッドの使用例です。

let map = new Map();
map.set("key1", "value1");
map.set("key2", "value2");
console.log(map.get("key1")); // "value1"

このコードでは、二つのエントリーをMapに追加し、それをコンソールで確認しています。

データの取り出し：getメソッドの活用

.get()メソッドは、特定のキーに関連づけられた値を取り出すもの。

キーがMap内に存在しない場合はundefinedが返されます。

getメソッドの使用法は以下のとおりです。

let map = new Map();
map.set("key3", "value3");
console.log(map.get("key3")); // "value3"
console.log(map.get("key4")); // undefined

この例では、存在するキーkey3の値は取得できていますが、key4は存在しないためundefinedとなっています。

アイテムの削除：deleteメソッドの概要

.delete()メソッドは、Mapから特定のエントリーを削除するものです。

この操作は、キーがMap内に存在する場合にtrueを、存在しない場合にfalseを返します。

以下はdeleteメソッドの例です。

let map = new Map();
map.set("key5", "value5");
console.log(map.delete("key5")); // true
console.log(map.delete("key6")); // false

key5は成功して削除されたためtrueですが、key6は存在しないため削除できずfalseとなっています。

キー存在の確認：hasメソッドの特徴

.has()メソッドは、特定のキーがMap内に存在するかどうかを確認するために使用されます。

以下はその使用例です。

let map = new Map();
map.set("key7", "value7");
console.log(map.has("key7")); // true
console.log(map.has("key8")); // false

この例では、key7はMap内にあるためtrueを、key8はないためfalseを返しています。

要素数の把握：sizeプロパティの活用

.sizeプロパティは、Map内にあるエントリーの数を返します。

これにより、データの量を把握できます。

以下はたった一行のコードですが、エントリーの数を出力するには十分です。

console.log(new Map([["key9", "value9"], ["key10", "value10"]]).size); // 2

この例では、2つのエントリーがMapに追加されているので、サイズは2と表示されます。

全データのクリア：clearメソッドでリセット

.clear()メソッドによって、Mapからすべてのエントリーを削除できます。

これは、Mapをリセットする際に便利です。

次のように使用します。

let map = new Map([["key11", "value11"], ["key12", "value12"]]);
console.log(map.size); // 2
map.clear();
console.log(map.size); // 0

クリアメソッドを使ってMap内のエントリーをすべて削除しているため、サイズが0になっています。

Mapの便利な反復メソッド

Mapオブジェクトでは、データを反復処理するための便利なメソッドが多数用意されています。

これらを使うと、データの一覧を取得したり、順番に処理をおこなったりが可能です。

  • キーの一覧：keysメソッド
  • 値の一覧：valuesメソッド
  • エントリーの列挙：entriesメソッド
  • 順序通りの反復処理
  • forEachメソッドを利用した反復
  • 反復処理の最適化

キーの一覧：keysメソッド

.keys()メソッドは、Mapオブジェクトのすべてのキーを新しいIteratorオブジェクトとして返します。

これはキーの一覧を列挙したい場合に有効です。

以下がその使い方です。

let map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);
for (let key of map.keys()) {
  console.log(key);
}
// "key1"
// "key2"
// "key3"

このコードでは、Map内の全キーをログに出力しています。

値の一## 値の一覧：valuesメソッド

.values()メソッドを使うと、Mapオブジェクト内のすべての値に対して反復処理をおこなえます。

これにより、Map内のすべての値を順に取得可能です。

例えば以下のように利用できます。

let map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);
for (let value of map.values()) {
  console.log(value);
}
// "value1"
// "value2"
// "value3"

このコードでは、Map内の各キーに紐付いた値を順番に出力しています。

エントリーの列挙：entriesメソッド

Mapオブジェクトの.entries()メソッドは、各エントリーを[key, value]の形式の配列で返します。

これにより、キーと値のペアを一度に取得し処理することが可能です。

以下はその使用例です。

let map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);
for (let [key, value] of map.entries()) {
  console.log(`${key}: ${value}`);
}
// "key1: value1"
// "key2: value2"
// "key3: value3"

各エントリーがキーと値の組み合わせとして反復処理されていることがわかります。

順序通りの反復処理

Mapオブジェクトにおいては、エントリーの挿入順序が保持されます。

つまり、エントリーは常に追加された順番で反復処理されるのです。

これにより、次のような順序付きの操作が可能になります。

let map = new Map([
  ["c", "C"],
  ["a", "A"],
  ["b", "B"]
]);
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// "c: C"
// "a: A"
// "b: B"

挿入された順序通りにエントリーがログに出力されていることが確認できます。

forEachメソッドを利用した反復

Mapオブジェクトの.forEach()メソッドは、Map内の各エントリーに対して指定されたコールバック関数を実行します。

次の例は、各エントリーに対して動作するコールバック関数を示すものです。

let map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);
map.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});
// Key: key1, Value: value1
// Key: key2, Value: value2
// Key: key3, Value: value3

この方法では、キーと値のペアを一つずつ見ていくことができ、反復処理の中で何かしらの操作を加えたい時に便利です。

反復処理の最適化

反復処理をおこなう際は、パフォーマンス面を考慮すべき場合があります。

とくに大量のデータを扱う時は、不要なクロージャの生成を避けたり、中断可能な反復器を使用するなどの工夫が求められます。

また、for...ofループを利用すれば、イテレータブルプロトコルに従った最適な反復が可能です。

let map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);

for (let [key, value] of map) {
  if (key === "key2") {
    break; // ここでループを抜けることができる
  }
  console.log(`Key: ${key}, Value: ${value}`);
}
// Key: key1, Value: value1

このコードでは、特定の条件で反復処理を中断しています。

これにより、必要な操作だけに焦点を当てたプログラムの作成が可能です。

Mapからの変換と相互運用

Mapはほかのデータ構造と相互運用が可能です。

ここではMapから配列への変換方法や、オブジェクトとの変換、他のコレクションとの変換方法について見ていきましょう。

  • Mapを配列へ変換する方法
  • オブジェクトとMapの変換
  • 他のコレクションとの変換方法

Mapを配列へ変換する方法

Mapオブジェクトから配列への変換は、スプレッド構文を用いることで簡単におこなえます。

これにより、Map内のエントリーを配列の要素として取り出せます。

let map = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);
let arr = [...map];
console.log(arr); // [["key1", "value1"], ["key2", "value2"]]

この方法を利用すれば、Mapのデータを配列としてほかの関数に渡したり、配列固有のメソッドを使って操作したりが可能です。

オブジェクトとMapの変換

JavaScriptにおいては、オブジェクトとMapは類似した構造を持っていますが、相互に変換するためにはいくつかの手順が必要です。

次のコードはオブジェクトからMapへ、そしてその逆への変換方法を示しています。

let obj = {
  key1: "value1",
  key2: "value2"
};
let map = new Map(Object.entries(obj)); // オブジェクトからMapへ
console.log(map.get("key1")); // "value1"

let objFromMap = Object.fromEntries(map); // Mapからオブジェクトへ
console.log(objFromMap.key2); // "value2"

上記ではObject.entriesを使ってオブジェクトからMapを作り、反対にObject.fromEntriesを使ってMapからオブジェクトを生成しています。

ほかのコレクションとの変換方法

Mapは、ほかのコレクションタイプとも変換が可能です。

例えば、SetオブジェクトとMapオブジェクトは非常に似た動作をするため、変換が相互におこないやすくなっています。

以下はSetからMapへの変換例です。

let set = new Set([
  ["key1", "value1"],
  ["key2", "value2"]
]);
let mapFromSet = new Map(set);
console.log(mapFromSet.get("key1")); // "value1"

キーと値がペアになっている要素を持つSetは、その構造がMapに適しているためスムーズに変換できます。

Mapとオブジェクトの違い

MapオブジェクトとJavaScriptのオブジェクトは似ていますが、いくつかの重要な違いを持ちます。

これらの違いを理解することで、適切なデータ構造を選択するのに役立つでしょう。

  • プロトタイプキー問題の回避
  • 多様なキータイプの使用
  • 定序性：反復動作の予測可能性
  • パフォーマンスの比較
  • セキュリティの観点から見た違い
  • 使用状況に応じた選択の優位性

プロトタイプキー問題の回避

JavaScriptのオブジェクトはプロトタイプチェーンを持ちますが、Mapは持ちません。

これにより、.hasOwnProperty()メソッドのようなチェックをせずとも、Mapのキーが意図したとおりのものであることを確実にできます。

let obj = {
  key: "value",
  hasOwnProperty: "Oops!"
};
console.log(obj.hasOwnProperty("key")); // TypeError: obj.hasOwnProperty is not a function

let map = new Map([["key", "value"]]);
console.log(map.has("key")); // true

上記のように、オブジェクトではキーの衝突が問題になりますが、Mapでは発生しません。

多様なキータイプの使用

JavaScriptのオブジェクトでは、キーとして使えるのは文字列またはシンボルのみですが、Mapではさまざまな型の値（数値、オブジェクト、関数など）をキーとして使えます。

let map = new Map();
map.set(1, "numberKey");
map.set({}, "objectKey");
map.set(() => {}, "functionKey");

この柔軟性は、特定の使用例において非常に便利です。

定序性：反復動作の予測可能性

Mapは挿入された順番を保持し、それに応じてエントリが反復されます。

これは、オブジェクトのプロパティでは保証されないため、順序が重要な場合にMapを使うのが良いでしょう。

パフォーマンスの比較

特に頻繁な追加、削除が行われる場合、Mapのパフォーマンスは通常オブジェクトよりも優れています。

let map = new Map();
let obj = {};
console.time("Map performance");
for (let i = 0; i < 100000; i++) {
  map.set(i, i);
}
console.timeEnd("Map performance");

console.time("Object performance");
for (let i = 0; i < 100000; i++) {
  obj[i] = i;
}
console.timeEnd("Object performance");

このコードでは、Mapとオブジェクトの性能を比較していますが、結果は環境によって異なります。

セキュリティの観点から見た違い

Mapはプロトタイプ汚染のリスクがないため、セキュリティ面でオブジェクトよりも安全といえます。

let obj = {};
obj.__proto__.isPolluted = true;
console.log({}.isPolluted); // true

let map = new Map();
map.set('__proto__', {isPolluted: true});
console.log(map.get('__proto__').isPolluted); // true

オブジェクトではプロトタイプチェーンを介して不正なコードが注入される可能性がありますが、Mapではその心配はありません。

使用状況に応じた選択の優位性

最終的に、どのデータ構造を使用するかは、そのアプリケーションの具体的なニーズに依存します。

オブジェクトはより一般的でシンプルなケースに適していますが、以下を優先する場合はMapの使用がおすすめです。

  • 定序
  • セキュリティ
  • パフォーマンス

まとめ

当記事では、Typescriptのmapメソッドについて学習してきました。

  • MapオブジェクトはTypeScriptの豊富な型システムの恩恵を受けて、JavaScriptの世界でデータを管理するための強力なツール
  • セキュリティやパフォーマンスを意識したコーディングを行う場合には、Mapが持つ特性を生かせる
  • また、エラー処理やトラブルシューティングにも、この知識は役立つはず

最後に、Mapは直接JSONに変換されないため、JSONとの違いを理解し、変換が必要な場合は適切なメソッド（JSON.stringify(Object.fromEntries(map))など）を利用することも覚えておいてください。

エラーへの対応はコードを堅牢にするために必要であり、TypeScriptのRecord型などを利用して型安全なオブジェクトを構築することも重要なテクニックのひとつです。

タイトルとURLをコピーしました