【JavaScript入門】Map

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

Map

　JavaScript には、Object と同様に「キーと値のペア」でデータを管理できる構造として Map があります。オブジェクトと似た使い方ができますが、いくつかの特徴によって処理効率や利便性が大きく向上するケースがあり、必要に応じて利用すると便利です。ここでは、Map の基本的な使い方や特性を見ていきます。

１．Map が `Object` と異なる点

キーにあらゆる値を使える。
オブジェクトのプロパティ名は文字列が主体ですが、Map のキーには数値やオブジェクトなど多様な型を使うことができます。
キーと値の順序が保持される。
データを追加した順番を記憶しているため、取り出すときにも同じ順序で列挙できます。
サイズ（要素数）を簡単に取得できる。
.size プロパティで現在の要素数をすぐにわかります。
反復処理が直接可能
myMap.forEach() や for...of などを使って要素を順序どおりに処理でき、キーや値を簡単に列挙できます。
性能面で有利な場合がある。
特に多くの要素を追加・削除・検索するケースでは、Map がより効率的に動作することがあります。

２．基本的な使い方

2.1. Map を作成

new Map() を呼び出すと、空の Map インスタンス（オブジェクト）を作成します。

const myMap = new Map();

2.2. 要素の追加・取得

set() メソッドでデータを追加（キーと値を設定）し、get() メソッドで取得します。

myMap.set('coffee', 'コーヒー');
myMap.set('tea', '紅茶');

console.log(myMap.get('coffee')); // "コーヒー"

2.3. 要素のチェック・削除

has() でキーの存在を確認し、delete() で削除できます。

console.log(myMap.has('tea')); // true
myMap.delete('tea');
console.log(myMap.has('tea')); // false

2.4. 要素の個数

size プロパティで要素数を返します。

console.log(myMap.size); // 1

３．繰り返し処理

　Map は直接繰り返し処理に対応しているため、forEach() や for...of で要素を簡単に列挙できます。

// forEach(): 第1引数は値, 第2引数はキー
myMap.forEach((value, key) => {
  console.log(key, '=>', value);
});

// for...of: entries() で [キー, 値] ペアを順番に取得
for (const [key, value] of myMap.entries()) {
  console.log(key, '=>', value);
}

４．マップの初期化

　new Map() の引数に [キー, 値] の配列を要素とする配列を渡すことで、最初から複数のデータをまとめて登録することも可能です。

const anotherMap = new Map([
  ['apple', 'りんご'],
  ['banana', 'バナナ'],
  ['grape', 'ぶどう']
]);

５．サンプルコード（HTML + JavaScript）

　次の例を「myMapSample.html」というファイル名で保存し、ブラウザで開いて開発者ツール（コンソール）を確認してください。

【myMapSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myMapSample.html</title>
</head>
<body>
  <h1>Map のサンプル</h1>
  <p>ブラウザのコンソールを開いて出力結果を確認してください。</p>

  <script>
    // 1. Map の作成と初期化
    const myMap = new Map();
    myMap.set('coffee', 'コーヒー');
    myMap.set('tea', '紅茶');
    myMap.set('cookie', 'クッキー');

    console.log('サイズ:', myMap.size); // 3

    // 2. 値の取得
    console.log('coffee:', myMap.get('coffee')); // "コーヒー"

    // 3. すべてのキーと値を出力
    myMap.forEach(function(value, key) {
      console.log('forEach ->', key, ':', value);
    });

    // 4. 要素を削除
    console.log('delete("tea"):', myMap.delete('tea'));
    console.log('has("tea"):', myMap.has('tea')); // false

    // 5. 配列でマップを初期化
    const fruitMap = new Map([
      ['orange', 'オレンジ'],
      ['grape', 'ブドウ'],
      ['melon', 'メロン']
    ]);
    console.log('fruitMap size:', fruitMap.size); // 3
    console.log('fruitMap entries:');
    for (const [key, value] of fruitMap) {
      console.log(key, '->', value);
    }
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

サイズ: 3
coffee: コーヒー
forEach -> coffee : コーヒー
forEach -> tea : 紅茶
forEach -> cookie : クッキー
delete("tea"): true
has("tea"): false
fruitMap size: 3
fruitMap entries:
orange -> オレンジ
grape -> ブドウ
melon -> メロン

まとめ

Map は Object と同様にキーと値を管理するが、キーとしてあらゆる型が使えたり、データの挿入順を保持したり、size で簡単に要素数が得られるなどの特徴がある。
大量のデータを頻繁に追加・削除・検索するシーンでは Map が便利な場合が多い。
forEach() や for...of などを使って、簡単に全要素を列挙できる。

　必要に応じて Map を使うことで、オブジェクトよりもスッキリしたコードを書ける場面があるので、状況に応じて使い分けを覚えておくと便利です。

【JavaScript入門】Map