JavaScript マップ

1. Map オブジェクトの概要

JavaScript の Map は、キーと値のペア（key-value pairs）のコレクションを格納できるオブジェクトであり、他のプログラミング言語における「ディクショナリ（辞書）」に近い役割を果たします。

標準的な Object との最大の違いは、キーとしてあらゆるデータ型を使用できるという柔軟性にあります。

2. Map の主な特徴

Map には、開発効率とパフォーマンスを向上させる以下の特徴があります。

• キーの型 (Key Types): 文字列、数値、さらにはオブジェクトや関数など、あらゆる型をキーに指定できます。
• 挿入順序 (Insertion Order): 要素が追加された順序が記憶されます。
• サイズ (Size): size プロパティを使用して、要素数を簡単に取得できます。
• パフォーマンス (Performance): キーと値のペアの頻繁な追加や削除を伴うケースにおいて、高いパフォーマンスを発揮します。
• 反復処理 (Iteration): イテラブル（反復可能）であるため、for...of ループや forEach() メソッドを直接利用可能です。
• 反復の順序: イテレーション（反復処理）を実行する際、挿入した順番がそのまま保持されます。

Map は Object（一意のキー/値のコレクション）と Array（順序付けられた値のコレクション）の両方の利点を併せ持っていますが、基本的には Object の強化版と考えるのが適切です。

3. Map の作成方法

JavaScript で Map を作成するには、主に以下の 2 つの方法があります。

• 新しい Map を作成し、set() メソッドで要素を追加する。
• 初期値として配列（Array）を new Map() コンストラクタに渡す。

3.1 set() メソッドによる作成

例

// 空の Map を作成する
const fruits = new Map();

// Map に値をセットする
fruits.set("リンゴ", 500);
fruits.set("バナナ", 300);
fruits.set("オレンジ", 200);

3.2 配列をコンストラクタに渡す作成

例

// 二次元配列を渡して Map を初期化する
const fruits = new Map([
  ["リンゴ", 500],
  ["バナナ", 300],
  ["オレンジ", 200]
]);

4. Map の操作：追加・更新・取得

4.1 値の追加 (Adding Map Values)

set() メソッドを使用して、Map に新しい要素を追加できます。

例

fruits.set("マンゴー", 100);

4.2 値の変更 (Changing Map Values)

同じキーに対して set() メソッドを再度呼び出すことで、既存の値を更新できます。

例

// リンゴの値を 200 に更新する
fruits.set("リンゴ", 200);

4.3 get() メソッドによる取得

get() メソッドを使用すると、指定したキーに対応する値を簡単に取得できます。

例

fruits.get("リンゴ"); // 200 を返します

5. Map もオブジェクトである

JavaScript において、Map はオブジェクト型（Object）として扱われます。

例

// "object" を返します
typeof fruits;

また、instanceof Map を実行すると true を返します。

例

// true を返します
fruits instanceof Map;

6. JavaScript Object と Map の比較

開発現場で Object と Map のどちらを使うべきか迷った際は、以下の違いを参考にしてください。