🐇

JavaScript の Map 型をちょっと理解する

2024/10/15に公開

map

JavaScript

tech

JavaScriptでデータを管理するとき、キーと値のペアを扱うことがよくあります。その際に便利なのがMap型です。Mapは、従来のObjectと似ていますが、より柔軟で強力な機能を持っています。

この記事では、Mapの基本的な使い方から、オブジェクトや配列をキーにする方法、そしてWebプログラミングでの実践的な活用例まで、具体的な例を使ってわかりやすく解説します。

1. Mapとは何か？

Mapは、キーと値のペアを管理するデータ構造です。Objectと似ていますが、次のような特徴があります。

あらゆる型のキーが使える：文字列、数値、オブジェクト、配列、関数など、どんな型でもキーにできます。
キーの順序を保持：追加した順番に要素が保存されます。
サイズの取得が簡単：sizeプロパティで要素数を簡単に取得できます。

2. Mapの基本的な使い方

Mapの作成

まずは、空のMapを作成します。

let myMap = new Map();

値の追加（setメソッド）

setメソッドで、キーと値のペアを追加します。

myMap.set('name', '太郎');
myMap.set(42, '答え');
myMap.set(true, '真実');

値の取得（getメソッド）

getメソッドで、キーに対応する値を取得します。

console.log(myMap.get('name'));  // 出力: '太郎'
console.log(myMap.get(42));      // 出力: '答え'
console.log(myMap.get(true));    // 出力: '真実'

3. オブジェクトや配列をキーにする

Mapの強力な特徴は、オブジェクトや配列をキーにできることです。これはObjectではできない機能で、特にWebプログラミングで役立つ場面があります。

オブジェクトをキーにする例

let user = { id: 1, name: '太郎' };
myMap.set(user, 'ユーザーデータ');

console.log(myMap.get(user));  // 出力: 'ユーザーデータ'

ポイント：同じオブジェクト参照をキーに使うことで、正しく値を取得できます。

配列をキーにする例

let arr = [1, 2, 3];
myMap.set(arr, '配列データ');

console.log(myMap.get(arr));  // 出力: '配列データ'

注意：新しいオブジェクトや配列は別の参照になるため、キーとしては一致しません。

console.log(myMap.get({ id: 1, name: '太郎' }));  // 出力: undefined（異なるオブジェクト）
console.log(myMap.get([1, 2, 3]));  // 出力: undefined（異なる配列）

4. Webプログラミングでの実践的な活用例

オブジェクトや配列をキーにするのは、どのような場面で役立つのでしょうか？ここでは、Webプログラミングでの具体的な活用例を紹介します。

例1：DOM要素をキーにしてイベントハンドラを管理

Webアプリケーションでは、DOM要素（HTML要素）に対してイベントハンドラを登録することがよくあります。複数の要素に対してイベントハンドラを設定し、その要素ごとに異なるデータを関連付けたい場合、Mapを使ってDOM要素をキーにデータを管理できます。

const elementDataMap = new Map();

const div = document.createElement('div');
const button = document.createElement('button');

// 各要素にデータを関連付け
elementDataMap.set(div, { clicked: false });
elementDataMap.set(button, { clicked: false });

// イベントハンドラの設定
div.addEventListener('click', () => {
    let data = elementDataMap.get(div);
    data.clicked = true;
    console.log('Div clicked:', data);
});

button.addEventListener('click', () => {
    let data = elementDataMap.get(button);
    data.clicked = true;
    console.log('Button clicked:', data);
});

この例では、DOM要素（divとbutton）をキーにして、クリックされたかどうかの状態を管理しています。Mapを使うことで、各要素に関連するデータを簡単に取り出すことができます。

例2：ユーザーオブジェクトをキーにしてセッション情報を管理

サーバーサイドのJavaScript（Node.js）でも、Mapは便利に使えます。例えば、複数のユーザーに対するセッション情報を管理する場合、ユーザーオブジェクトをキーにしてセッションデータを保持できます。

const userSessions = new Map();

function login(user) {
    // セッションデータを作成
    const sessionData = { token: generateToken(), loginTime: Date.now() };
    userSessions.set(user, sessionData);
}

function getSession(user) {
    return userSessions.get(user);
}

// ユーザーオブジェクト
const user1 = { id: 1, name: '太郎' };
const user2 = { id: 2, name: '花子' };

// ログイン処理
login(user1);
login(user2);

// セッション情報の取得
console.log(getSession(user1));  // ユーザー1のセッションデータ
console.log(getSession(user2));  // ユーザー2のセッションデータ

この例では、ユーザーごとのセッション情報をMapで管理しています。ユーザーオブジェクトをキーにすることで、ユーザー固有のデータに簡単にアクセスできます。

例3：複雑なキーを必要とするキャッシュ機構

Webアプリケーションでデータのキャッシュを行う場合、リクエストパラメータの組み合わせや、オブジェクトの状態をキーにしたいことがあります。

const cache = new Map();

function fetchData(params) {
    if (cache.has(params)) {
        return cache.get(params);
    } else {
        // データを取得（仮の関数）
        let data = getDataFromServer(params);
        cache.set(params, data);
        return data;
    }
}

const params = { userId: 1, type: 'info' };
fetchData(params);  // データを取得してキャッシュに保存
fetchData(params);  // キャッシュからデータを取得

この例では、paramsオブジェクトをキーにして、取得したデータをキャッシュしています。同じparamsを使ってfetchDataを呼び出すと、キャッシュされたデータが返されます。

5. その他の基本操作

キーの存在確認（hasメソッド）

console.log(myMap.has('name'));  // 出力: true
console.log(myMap.has('age'));   // 出力: false

値の削除（deleteメソッド）

myMap.delete(42);
console.log(myMap.has(42));      // 出力: false

全ての要素を削除（clearメソッド）

myMap.clear();
console.log(myMap.size);         // 出力: 0

6. Mapのループ処理

Mapは簡単にループ処理ができます。

for...ofループでの遍歴

myMap.set('name', '太郎');
myMap.set('age', 25);

for (let [key, value] of myMap) {
    console.log(`${key}: ${value}`);
}
// 出力:
// name: 太郎
// age: 25

keys()とvalues()メソッド

キーのみを取得

for (let key of myMap.keys()) {
    console.log(key);
}
// 出力:
// name
// age

値のみを取得

for (let value of myMap.values()) {
    console.log(value);
}
// 出力:
// 太郎
// 25

7. MapとObjectの違い

特徴	Map	Object
キーの型	あらゆる型が使える	文字列かシンボルのみ
要素の順序	保持される	保証されない
サイズの取得	`size`プロパティで簡単	手動でカウントが必要

8. Mapを使うべき場面

キーにあらゆる型を使いたい場合：オブジェクトや配列など、複雑なキーを使用できます。

Webプログラミングでは、DOM要素やユーザーオブジェクト、リクエストパラメータなど、オブジェクトをキーにしてデータを管理する場面が多くあります。
データの挿入順序が重要な場合：Mapは追加した順序を保持します。
サイズを簡単に取得したい場合：sizeプロパティで要素数をすぐに確認できます。

まとめ

Mapは、JavaScriptでデータを柔軟に管理するための強力なツールです。オブジェクトや配列をキーにできる点や、要素の順序を保持する点が大きな魅力で、Webプログラミングのさまざまな場面で役立ちます。DOM要素の管理やセッションデータの保持、キャッシュ機構の実装など、Mapを活用することでコードをよりシンプルかつ効率的に書くことができます。

ぜひこの記事を参考に、Mapを活用してみてください。