JavaScriptのMapの使い方をマスターしよう！

「Mapを使ってみたいけど、どうやって使えばいいかわからない。」

「Mapって、今までの配列やオブジェクトと何が違っていて、Mapでどんな利点があるの？」

今回は、ES6で追加された「Map」について解説していきます。

JavaScriptで開発をする際、配列やオブジェクトを扱うことが多いですが、Mapを使うことでより高度な処理を実現することができます。

この記事では、初心者向けにJavaScriptのMapの基本的な使い方から、実践的な応用例までを詳しく解説していきます。Mapを使いこなすことで、配列やオブジェクトでは実現できなかった処理が可能になります。本記事を読むことで、JavaScriptでの開発においてMapを有効活用し、よりスマートなコードを書くことができるようになります。

Mapの初期化

Mapの初期化は次のように行います。

//空のオブジェクトを作成
const emptyMap = new Map();
console.log( emptyMap );
//>空のMapオブジェクトが定義される


//二次元配列からMapオブジェクトを作成
const convertedMap = new Map([
    ["キー1","値1"],
    ["キー2","値2"],
]);

console.log(convertedMap)
//> Map{"キー1" => "値1", "キー2" => "値2"}

Mapの場合、オブジェクトのように、ドット記法（変数.キー）を使って直接、値を取り出すことはできません。Mapオブジェクト内の値の取得・変更・削除は、専用のメソッドを使います。

Mapのメソッド

Mapには次のようなメソッドがあります。

値の追加~set~

setメソッドを使うと、Mapオブジェクトに対して値を追加できます。

Mapオブジェクトのキーには文字列以外にも数値、真偽値、オブジェクト等、全ての型の値を使うことができます。

オブジェクトと似ているなと思ったけど、キーに全ての型を使うことができるのが、オブジェクトと違うところだね！

//空のオブジェクトを作成
const fruits = new Map();

//数値をキーとして値を登録する。
fruits.set(1,"apple");


const emptyObj = {};

//オブジェクトをキーとして値を登録する。
fruits.set( emptyObj , "orange" )

//真偽値をキーとして値を登録する
fruits.set( true, "grape" )

console.log( fruits )
//> Map{1 => 'apple', {…} => 'orange', true => 'grape'}

値の取得~get~

値の取得には、getメソッドを使います。

//空のオブジェクトを作成
const fruits = new Map();

const emptyObj = {};

//空のオブジェクトをキーに値を登録する。
fruits.set( emptyObj, "orange");

//emptyObjをキーに値を取得
console.log( fruits.get(emptyObj) );
//> orange

const fruits = new Map();
const emptyObj = {};

//emptyObjのアドレスで値を登録
fruits.set ( emptyObj, "orange" );

//emptyObjと構造が同じ別のオブジェクトで値を取得
console.log( fruits.get( {} ));
//> undefined
//値は取得できない！

コレクション内の値を削除~delete~

deleteメソッドを使うと、Mapオブジェクト内から値を削除できます。

const fruits = new Map ([
    [1, "apple"],
    [false, "orange"],
]);

//falseがキーの値を削除
fruits.delete( false );

console.log( fruits );

コレクション内の値を全て削除~clear~

clearメソッドは、Mapオブジェクト内に保持したキーと値のペアを全て削除します。

const fruits = new Map ([
    [1, "apple"],
    [false, "orange"],
]);

//全てのキーと値のペアを削除
fruits.clear();
console.log( fruits )
//> Map { }

コレクション内に値が存在するか確認~has~

hasメソッドは、Mapオブジェクト内にキーが存在するかを確認します。

const fruits = new Map ([
    [1, "apple"],
    [false, "orange"],
]);

//Mapに含まれるキー（false）の場合
console.log( fruits.has( false ) );
//> true

//Mapに含まれないキー（２）の場合
console.log( fruits.has( 2 ) );
//> false

Mapオブジェクトの要素をループ処理~forEach~

MapのオブジェクトはforEachをコールバック関数で使ってループ処理することができます。

Mapオブジェクト.forEach( function( value, key, map ) {
     /*Mapの各要素を使った処理 */
} [, _this] );

const map = new Map( [
    [ "キー1","値1"],
    [ "キー2","値2"],
]);

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

↓実行結果

コレクションの長さを取得~size~

Mapのオブジェクトでは、sizeプロパティにMapの長さの情報を保持しています。

const fruits = new Map();
fruits.set( 1, "apple" );
const emptyObj = {};
fruits.set( emptyObj, "orange" );

//Mapの要素数を取得
console.log( fruits.size );
//> 2

Mapからオブジェクトへ変換

Mapからオブジェクト｛　｝に変換するには、次のように記載します。

const オブジェクト = Object.fromEntries ( Mapオブジェクト );

const map = new Map( [
    [ "キー1","値1"],
    [ "キー2","値2"],
]);

const obj = Object.fromEntries( map );
console.log( obj[ "キー1" ] );
// > 値1

Mapとオブジェクトの４つの違い

Map　オブジェクトのいずれも同じようにキーと値をセットにして、値を管理します。

そのため、一見どちらで値を管理しても同じに思えるかもしれません。しかし、Mapとオブジェクトには、次のような違いいがあります。

Mapの場合、キーに文字列以外も使用可能

例で何度も出てきているかと思いますが、Mapでは任意の型の値をキーとして利用可能です。一方、オブジェクトの場合は、文字列とシンボル（Symbol）のみがプロパティとして利用可能です。

Mapの場合、for...of文を使った繰り返し処理を記述可能

Mapは反復処理が可能なオブジェクトです。そのため、for...of文が使用可能です。一方オブジェクトの場合は、for ... of文を使うことはできません。

Mapの場合、sizeを通して長さを取得可能

Mapのsizeプロパティは、保持する要素数が変わると、自動的に値が変更されます。一方オブジェクトには、長さを管理するプロパティはありません。

Mapの場合、メソッドを保持できない

Mapは関数を値として保持できますが、関数内でthisを使うようなメソッドとしての機能を実装するのには向いていません。そのため、メソッドを必要とする場合には、オブジェクトを使う方がよいでしょう。

このように、単純なコレクション（データの格納領域）として使いたい場合にはMap、メソッドなどで保持している値を操作する必要がある場合には、オブジェクトを使うようにしましょう。

まとめ

今回は、Mapの使い方について紹介しました。

JavaScriptの他のメソッドについても紹介しています。検索、追加、正規表現、、、etc

ぜひ併せてご覧ください。

JavaScript アーカイブ - プロラブ (abyblog.online)