JavaScript Mapクラスの使い方

  • JavaScript
  • クラス
最終更新日:

この記事のポイント

データの格納と取得をする際に、Mapクラスは役立つ機能です。この記事ではMapクラスの基本から実装まで詳しく解説します。

  • キーと値のペアをより直感的に管理できる新しいデータ構造
  • 従来のオブジェクトよりも柔軟で、あらゆる型をキーとして使用可能
  • 反復処理やサイズ取得が簡単で、大規模データの管理に最適

これらのポイントを押さえることで、効率的なJavaScriptプログラミングができるようになります。

目次

Mapクラスとは？

Mapクラスは、ECMAScript 2015（ES6）で導入された新しいデータ構造です。これはキーと値のペアを格納するためのコレクションで、キーを使って関連する値を取得できます。

従来のオブジェクト（{}）と似ていますが、いくつかの重要な違いがあります。Mapクラスでは任意の値（オブジェクトや関数を含む）をキーとして使用できますが、通常のオブジェクトでは文字列とシンボルしかキーにできません。また、Mapクラスはキーの挿入順序を記憶しているため、反復処理をする際に追加した順番通りに取得できます。

さらに、Mapクラスはサイズ（要素数）を簡単に取得できる.sizeプロパティを持っており、キーと値のペアを簡単に追加・削除できるメソッドも用意されています。これにより、データの管理がより直感的になり、特にキーと値のペアを頻繁に操作する場合に便利です。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

Mapクラスを使うには、まず新しいMapオブジェクトをインスタンス化する必要があります。以下に基本的な操作方法を示します。

以下の例では、Mapクラスの基本的な操作方法を示しています。setメソッドでキーと値のペアを追加し、getメソッドで値を取得します。hasメソッドはキーが存在するかを確認し、deleteメソッドは指定したキーとその値を削除します。

const animals = new Map(); animals.set('mammal', 'イヌ'); animals.set('bird', 'ワシ'); animals.set('fish', 'マグロ'); console.log(animals.get('mammal')); console.log(animals.size); console.log(animals.has('reptile')); animals.delete('fish'); console.log(animals.size);







出力結果
イヌ
3
false
2
Map クラスはキーと値のペアを管理できるオブジェクトです。初期化時にイテラブル（配列など）を渡すことで、最初から複数の要素を持つ Map を作成できます。例えば、forEachメソッドを使うと、すべてのキーと値に対して順番に処理を実行できます。

  
const pets = new Map([
  ['dog', 'シバイヌ'],
  ['cat', 'マンチカン'],
  ['bird', 'インコ']
]);

pets.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

  


  







出力結果
dog: シバイヌ
cat: マンチカン
bird: インコ
実用例
Mapクラスはさまざまな場面で活用できます。ここでは実際のユースケースに沿った実用的なコード例をいくつか紹介します。それぞれの例を通して、Mapクラスの特徴や利点を理解していきましょう。
動物データの管理
動物の種類ごとに異なる情報を管理する例です。Mapクラスを使うと複雑なデータ構造を整理して管理できます。キーは文字列だけでなく、オブジェクトや関数なども使用可能なので、柔軟なデータ管理ができます。

  
const animalData = new Map();
animalData.set('イヌ', {type: '哺乳類', legs: 4});
animalData.set('ワシ', {type: '鳥類', legs: 2});
animalData.set('ヘビ', {type: '爬虫類', legs: 0});

const eagle = animalData.get('ワシ');
console.log(`ワシは${eagle.type}で、足は${eagle.legs}本です`);

  


  







出力結果
ワシは鳥類で、足は2本です
頻出単語のカウント
テキスト内の単語出現回数をカウントする例です。Mapクラスはキーの存在確認と更新が簡単にできるため、カウンター実装に適しています。

  
const text = "イヌ ネコ イヌ ゾウ ネコ キリン イヌ";
const wordCount = new Map();

text.split(' ').forEach(animal => {
  const count = wordCount.get(animal) || 0;
  wordCount.set(animal, count + 1);
});

console.log(Array.from(wordCount.entries()));

  


  







出力結果
[['イヌ', 3], ['ネコ', 2], ['ゾウ', 1], ['キリン', 1]]
オブジェクトをキーとして使用
Mapクラスの大きな特徴として、オブジェクトをキーとして使用できる点があります。この例では、ペット（オブジェクト）とそのおもちゃ（配列）を関連付けています。通常のオブジェクトではオブジェクトをキーにできませんが、Mapでは可能です。

  
const dog = { name: 'ポチ' };
const cat = { name: 'タマ' };

const petToys = new Map();
petToys.set(dog, ['ボール', 'フリスビー']);
petToys.set(cat, ['ねずみのおもちゃ', 'キャットタワー']);

console.log(petToys.get(dog));

  


  







出力結果
['ボール', 'フリスビー']
WeakMapとの違い
WeakMapクラスはMapクラスに似ていますが、ガベージコレクションの動作が異なります。キーとして使用するオブジェクトへの参照が弱参照になります。WeakMapクラスはキーへの参照がなくなると、そのエントリーがガベージコレクションの対象になります。メモリリークを防ぐのに役立ちますが、キーとしてプリミティブ値を使用できず、sizeプロパティや反復処理メソッドがないなどの制限もあります。

  
// WeakMapクラスの例
let weakMap = new WeakMap();
let key = { id: 1 };

weakMap.set(key, 'ネコ');
console.log(weakMap.get(key));

// キーへの参照をなくす
key = null;

  


  







出力結果
ネコ
ユーザー認証システム
ユーザーIDと権限レベルを管理するシステムの例です。この例ではユーザーIDと権限レベルをマッピングしています。特定のユーザーが必要な権限を持っているかを簡単に確認できます。

  
const userRoles = new Map();
userRoles.set('user123', 'admin');
userRoles.set('user456', 'editor');
userRoles.set('user789', 'viewer');

function checkAccess(userId, requiredRole) {
  return userRoles.get(userId) === requiredRole;
}

console.log(checkAccess('user123', 'admin'));

  


  







出力結果
true
チェーン処理
Mapクラスのメソッドは連鎖（チェーン）させて呼び出すことができます。この例では、setメソッドを連鎖させて複数の要素をMapクラスに追加しています。各set呼び出しがMapオブジェクト自体を返すため、このような記述が可能です。

  
const zoo = new Map()
  .set('哺乳類', ['ライオン', 'ゾウ', 'キリン'])
  .set('鳥類', ['フラミンゴ', 'ペンギン'])
  .set('爬虫類', ['ワニ', 'イグアナ']);

console.log(zoo.get('鳥類'));

  


  







出力結果
['フラミンゴ', 'ペンギン']
データ変換とフィルタリング
Mapクラスのデータを配列に変換したり、特定の条件でフィルタリングしたりする例です。
スプレッド演算子（...）を使ってMapクラスをエントリーの配列に変換し、filterメソッドで条件に合う要素だけを抽出しています。その後、フィルタリングされた配列から新しいMapクラスを作成しています。

  
const weights = new Map([
  ['ゾウ', 5000],
  ['キリン', 1200],
  ['ライオン', 190],
  ['コアラ', 12],
  ['ネズミ', 0.02]
]);

const largeAnimals = new Map(
  [...weights].filter(([_, weight]) => weight >= 100)
);

console.log([...largeAnimals.keys()]);

  


  







出力結果
['ゾウ', 'キリン', 'ライオン']
まとめ
Mapクラスは、キーと値のペアを効率的に管理するための強力なデータ構造です。従来のオブジェクトよりも柔軟で機能が豊富なため、さまざまなシチュエーションで活用できます。
Mapクラスの活躍する場面
    

  • 頻繁にデータの追加・削除が行われる動的なコレクション
    • 

  • キーの順序が重要なデータ管理
    • 

  • キーとしてオブジェクトや関数を使用したい場合
    • 

重要なポイント
    

  • 任意の値（オブジェクトも含む）をキーとして使用可能
    • 

  • キーの挿入順序が保持される
    • 

  • サイズ（要素数）を簡単に取得できる
    • 

Mapクラスは開発において非常に重要なデータ構造です。特に複雑なデータ関係を管理する場合や、パフォーマンスが重要な大規模アプリケーションでは、Mapの特性を活かした実装が効果的です。
また、ES6で導入されたこの機能は、ほとんどの現代ブラウザでサポートされているため、安心して使用できます。ただし、非常に古いブラウザをサポートする必要がある場合は、ポリフィルの使用やトランスパイルを検討するとよいでしょう。
今回紹介した基本的な使い方と実用例を参考に、ぜひあなたのプロジェクトでMapクラスを活用してみてください。適切に使いこなせば、コードの可読性と保守性が向上し、より効率的な開発が可能になるでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript Mapクラスの使い方