【JavaScript】Mapオブジェクトとは?基本の使い方から応用の使い方まで解説!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年06月19日に投稿されました。)

JavaScriptで複数のデータを管理するにはMapオブジェクトがあります。

Mapオブジェクトとはキーと値のペアを保持するデータ構造になります。

キーと値のペアを保持するため、高速な要素の検索や操作を行うことができ、ソースコードの可読性を向上させることができます。

また、Mapオブジェクトはキーの重複を許さないため、データを管理に適したオブジェクトとなります。

このように、キーと値を紐づけて管理することができるオブジェクトであるため、複数のパラメータを一元で管理したいと思った場合はMapオブジェクトを使用するようにしましょう。

今回はJavaScriptのMapオブジェクトの使い方について詳しく紹介していきます。

この記事はこんな方におすすめ
・連想配列を扱いたい人
・キーと値をペアとして扱いたい人
・一意性のキーでデータを管理したい人

Mapオブジェクトとは

Mapオブジェクトとはキーと値のペアを保持するデータ構造となります。

キーと値は任意のデータ型を持つことができ、オブジェクトやプリミティブ型の値をキーとして使用できます。

そのため、Mapオブジェクトは「連想配列」とも呼ばれています。

Mapオブジェクトの書き方

Mapオブジェクトの書き方は下記のようになります。

定義をした後にnewとMap()を「イコール(=)」で繋ぐことでMapオブジェクトを作成することができます。

そして、作成したオブジェクトに対してキーと値のペアを追加していくようになります。

また、下記のようにキーや値を既に格納した状態でMapオブジェクトを作成することも可能です。

Mapオブジェクトのメリット

ここではMapオブジェクトのメリットについてご紹介します。

キーの重複を許さない特性がある

1つ目はキーの重複を許さない特性があるということです。

Map()オブジェクトは、キーの複を許さないため、重複するキーを作成した場合は値が更新されるようになります。

そのため、Map()オブジェクトでは一意性のキーを作成してデータを管理することができます。

キーの重複を許さないことを説明しているMapオブジェクトの画像

任意のデータ型をキーとして使用できる

2つ目は任意のデータ型をキーとして使用できるということです。

Mapオブジェクトはオブジェクトやプリミティブ型、関数をキーとして使用することができます。

そのため、Mapオブジェクトに柔軟性があり、任意のデータ型をキーとして使用できるため、さまざまなデータを効果的に管理できます。

任意のデータ型をキーとして使用できることを説明しているMapオブジェクトの画像

データを順序付けして保持する

3つ目はデータを順序付けして保持するということです。

Mapオブジェクトは、追加された値を順番通りに保持します。

そのため、データの順序が重要な場合に便利に使用することができます。

追加された値を順番通りに保持していることを説明しているMapオブジェクトの画像

イテレーションとしてサポートされる

4つ目はイテレーションとしてサポートされるということです。

Mapオブジェクトはイテレータであるため、反復処理を行うことで格納されているキーや値に対して処理を行うことができます。

また、イテレータオブジェクトに使用できるメソッドを使用することで、キーや値のみを取り出すことができたり、キーと値のペアを取り出すこともできます。

イテレーションとしてサポートされていることを説明しているMapオブジェクトの画像

Mapオブジェクトの基本的な使い方

ここでは、Mapオブジェクトの基本的な使い方についてご紹介します。

キーと値の追加

キーと値の追加するには、set()を使用します。

set()とは、Mapオブジェクトのキーと値のセットをマップに登録することができるメソッドになります。

そのため、キーと値を引数としてset()を呼び出すことで、作成したMapオブジェクトにキーと値のペアを追加することができます。

また、既に存在するキーに対してset()を使用すると、値が更新されます。

⚫︎ Main.js

実行結果

set()でMapオブジェクトのキーと値のペアを追加した結果

set()によってMapオブジェクトのキーと値のペアを追加しています。

そのため、「キー1」と「値1」のペアと「キー2」と「値2」のペアが表示されています。

また、「キー1」は存在するため、「値1」から「値3」に更新されています。

キーを使用した値の取得

キーを使用した値の取得するにはget()を使用します。

get()とは、Mapオブジェクトにあるキーの値を取り出すことができるメソッドになります。

そのため、キーを引数としてget()を呼び出すことで、作成したMapオブジェクトにあるキーの値を取得することができます。

⚫︎ Main.js

実行結果

get()でMapオブジェクトの指定したキーの値を取得した結果

get()によってMapオブジェクトの指定したキーの値を取得しています。

そのため、「キー1」とのペアである「値1」と、「キー2」とのペアである「値2」が表示されています。

キーの値を削除

キーの値を削除するにはdelete()を使用します。

delete()とは、Mapオブジェクトにあるキーの値を削除することができるメソッドになります。

そのため、キーを引数としてdelete()を呼び出すことで、作成したMapオブジェクトにあるキーの値を削除することができます。

また、削除されたかどうかはtrueかfalseの真偽値が返されるようになります。

⚫︎ Main.js

実行結果

delete()でMapオブジェクトの指定したキーの値を削除した結果

delete()によってMapオブジェクトの指定したキーの値を削除しています。

そのため、キー1の値が削除された後、キー2の値も削除されています。

キーと値を全て削除

キーと値を全て削除するにはclear()を使用します。

clear()とはMapオブジェクトにあるキーと値のペアを全て削除することができるメソッドになります。

そのため、引数を使用せずにclear()を呼び出すことで、作成したMapオブジェクトにあるキーと値のペアを全て削除することができます。

また、こちらのメソッドを使用すると返り値はありませんので注意してください。

⚫︎ Main.js

実行結果

clear()で作成したMapオブジェクトのキーや値を全て削除した結果

clear()によって作成したMapオブジェクトのキーや値を全て削除しています。

そのため、指定したMapオブジェクトの中身が空になっています。

キーのみを全て取得

キーのみを全て取得する場合は、keys()を使用します。

keys()とは、指定したオブジェクトのキーをすべて取得することができるメソッドになります。

そのため、取得したキーは配列で返されるようになります。

⚫︎ Main.js

実行結果

keys()でMapオブジェクトのキーのみを全て取得した結果

keys()によってMapオブジェクトのキーのみを全て取得しています。

そのため、「キー1」と「キー2」を格納した配列が表示されています。

値のみを全て取得

値のみを全て取得する場合はvalues()を使用します。

values()とは、したオブジェクトの値をすべて取得することができるメソッドになります。

そのため、取得した値は配列で返されるようになります。

⚫︎ Main.js

実行結果

value()でMapオブジェクトの値のみを全て取得した結果

value()によってMapオブジェクトの値のみを全て取得しています。

そのため、「値1」と「値2」を格納した配列が表示されています。

キーと値のペアを全て取得

キーと値のペアを全て取得するにはentries()を使用します。

entries()とは、指定したオブジェクトのキーと値のペアを全て取得するメソッドになります。

そのため、取得したペアは配列で返されるようになります。

⚫︎ Main.js

実行結果

entries()でMapオブジェクトでキーと値のペアを全て取得した結果

entries()によってMapオブジェクトのキーと値のペアを全て取得しています。

そのため、「キー1」と「値1」のペアと「キー2」と「値2」のペアを格納した配列が表示されています。

サイズを取得

サイズを取得するにはsizeを使用します。

size()とは、指定したMapオブジェクトの要素数を取得できるプロパティになります。

取得した要素数はNumber型で返すようになります。

⚫︎ Main.js

実行結果

sizeでMapオブジェクトのサイズを取得した結果

sizeによってMapオブジェクトのサイズを取得しています。

今回は、Mapオブジェクトに2つのペアが存在するため、「2」が表示されています。

データの存在確認

データの存在確認する場合はhas()を使用します。

has()とは、指定したキーがMapオブジェクト内に存在するかどうかを確認することができるメソッドとなります。

指定したキーが存在する場合はtrueを、そうでない場合はfalseを返すようになります。

⚫︎ Main.js

実行結果

has()でMapオブジェクトのデータの存在確認を行った結果

has()によってMapオブジェクト内にあるデータの存在を確認しています。

今回、「キー1」は存在するため「true」を、「キー3」は存在しないため「false」を表示しています。

Mapオブジェクトの応用的な使い方

先程までは基本的な使い方について紹介してきましたが、Mapオブジェクトはさまざまな応用が可能です。

そのため、ここではMapオブジェクトの応用的な使い方についてご紹介します。

オブジェクトのマッピング

Mapオブジェクトは、オブジェクトのマッピングを行う場合に使用できます。

例えば、データベースから取得したオブジェクトのリストを処理し、特定のキーに基づいてデータを検索する場合に使用することができます。

⚫︎ Main.js

実行結果

Mapオブジェクトを使用してオブジェクトのマッピングを行った結果

Mapオブジェクトによってオブジェクトのマッピングを行っています。

そのため、「user1」にあるidの「yamada1120」と、nameの「山田太郎」が表示されています。

データの集計やカウント

Mapオブジェクトは、データの集計やカウントを行う場合に使用できます。

例えば、文字列の配列から各文字の出現回数をカウントする場合に使用することができます。

⚫︎ Main.js

実行結果

Mapオブジェクトを使用してデータの集計やカウントを行った結果

Mapオブジェクトによってデータの集計とカウントを行っています。

そのため、「ナマムギナマゴメマナタマゴ」に「ナ」は3回出現するため「3」を、「マ」は4回出現するため「4」が表示されています。

キャッシュの管理

Mapオブジェクトは、キャッシュの管理を行う場合に使用することができます。

例えば、関数の引数をキーとし、結果を値としてマップに保存することで、関数の結果をキャッシュします。

これにより、同じ引数で関数を再度呼び出す際に、結果を再計算せずにキャッシュから取得することができます。

⚫︎ Main.js

実行結果

Mapオブジェクトを使用してキャッシュの管理を行った結果

Mapオブジェクトによって、関数の結果をキャッシュしています。

そのため、Mapオブジェクトにない数値を指定して関数を呼び出した場合は関数処理が行われますが、2回以降はMapオブジェクトで格納された値が表示されています。

Mapオブジェクトの反復処理

そのため、ここではMapオブジェクトの反復処理についてご紹介します。

forEach()を使用する場合

forEach()とは、イテレータに対して順番に処理を行うことができるメソッドになります。

そのため、Mapオブジェクトに使用することで、Mapオブジェクトの反復処理を行うことができるようになります。

⚫︎ Main.js

実行結果

forEach()を使用してMapオブジェクトの反復処理を行った結果

forEach()によってMapオブジェクトの反復処理を行っています。

そのため、Mapオブジェクト内にあるキーと値が順番に表示されています。

for-of文を使用する場合

for-of文とは、オブジェクトのキーや値を取得することができる文法となります。

そのため、Mapオブジェクトにfor-of文にインデックスを指定して使用することで、こちらでも反復処理を行うことができるようになります。

⚫︎ Main.js

実行結果

for-of文を使用してMapオブジェクトの反復処理を行った結果

for-of文によってMapオブジェクトの反復処理を行っています。

そのため、こちらもMapオブジェクト内にあるキーと値が順番に表示されています。

Sossy

for-of文を使用する場合、オブジェクトのキーと値を配列として取り出すようになります。
そのため、1番目(0)がキーで2番目(1)が値となります。

Mapオブジェクトと他のデータ構造との違い

JavaScriptにはMapオブジェクトの他にもよく似たデータ構造が存在します。

そのため、ここではMapオブジェクトと他のデータ構造との違いを下記ご紹介します。

Mapオブジェクトと配列の違い

Mapオブジェクトと配列の大きな違いは、格納できるキーの種類になります。

Mapオブジェクトでは文字列、数値、オブジェクトなど異なるデータ型をキーとして格納できます。

しかし、配列で格納できるキーの型は数値型のインデックスのみとなります。

Mapオブジェクト配列
キーの種類文字列型、数値型、オブジェクトなど数値型
一意性なし一意性なし
アクセス方法キーを指定インデックスを指定

⚫︎ Main.js

実行結果

Mapオブジェクトと配列を使用してイテレータを作成した結果

Mapオブジェクトと配列を使用してイテレータを作成しています。

Mapオブジェクトではキーとペアで値をセットして格納していますが、配列の場合はそのまま値を格納しています。

また、Mapオブジェクトの場合はキーを指定して取り出しますが、配列の場合はインデックスを指定して取り出しています。

Sossy

キーによる高速な要素の検索や操作が必要な場合に有効なMapオブジェクトに比べて、配列は順序を重視する場合や連続したデータの管理に適しています。

MapオブジェクトとSetオブジェクトの違い

JavaScriptにはMapオブジェクトとよく似たSetオブジェクトというものがあります。

この2つのオブジェクトの大きな違いはキーが一意性か値が一意性かどうかになります。

キーが一意性であるMapオブジェクトに対して、Setオブジェクトは、値が一意性となるデータ構造になります。

そのため、重複する値を持つことができず、値が重複する場合は2つ目以上の値は無視されるようになります。

MapオブジェクトSetオブジェクト
キーの種類文字列型、数値型、オブジェクトなどなし
一意性なし一意性あり
アクセス方法キーを指定不可能(反復処理なら可)

⚫︎ Main.js

実行結果

MapオブジェクトとSetオブジェクトを使用してイテレータを作成した結果

MapオブジェクトとSetオブジェクトを使用してイテレータを作成しています。

Mapオブジェクトではキーが一意性だと値は重複しても表示されますが、Setオブジェクトの場合は重複した「値1」は表示されず、読み捨てられています。

また、Mapオブジェクトの場合はキーを指定すると値を取り出せますが、Setオブジェクトの場合は反復処理を使用して値を取り出しています。

もし、Setオブジェクトについて詳しく知りたい場合は下記の記事をご参考ください。

Sossy

Mapオブジェクトはキーと値のペアの関係を保持し、Setオブジェクトは一意の値の集合を保持するため、それぞれ異なる用途に応じて使用されます。

Mapオブジェクトを使用した実際のケース

Mapオブジェクトを使用した実際のケースについてご紹介します。

例えば、Mapオブジェクトを使用して配列で送られてきたパラメータに対して、桁数のチェックをそれぞれ行うようなコードを作成します。

⚫︎ Main.js

実行結果(成功時)

Mapオブジェクトを使用してパラメータの桁数チェックを行った結果(桁数OK)

実行結果(失敗時)

Mapオブジェクトを使用してパラメータの桁数チェックを行った結果(桁数NG)

Mapオブジェクトによって受け取ったパラメータをlengthによって桁数チェックを行っています。

そのため、全てのパラメータの桁数が適切であるため、「処理が正常に終了しました。」というメッセージが表示されています。

また、「birthday」の桁数がオーバーしているため、「birthdayの桁数が適切でありません。」というメッセージが表示されています。

もし、lengthについて詳しく知りたい場合は下記の記事をご参考ください。

配列からMapオブジェクトを作成する場合

配列からMapオブジェクトを作成する場合は、作成した2次元配列をMapオブジェクトとしてインスタンス化します。

1次元配列の1番目の値がMapオブジェクトのキーとなり2番目の値がMapオブジェクトの値となって作成されます。

しかし、1次元配列の3番目以降に格納されている値はMapオブジェクトとして作成されませんので注意が必要です。

⚫︎ Main.js

実行結果

配列からMapオブジェクトを作成した結果

配列の値を元にMapオブジェクトを作成しています。

そのため、「配列の値N-1」の値がMapオブジェクトのキーとなり、「配列の値N-2」の値がMapオブジェクトの値となって作成されています。

まとめ

⚫︎ Mapオブジェクトとはキーと値のペアを保持するデータ構造である

⚫︎ Mapオブジェクトには下記のようなメリットがある
・キーの重複を許さない特性
・任意のデータ型をキーとして使用できる
・データを順序付けして保持する
・イテレーションとしてサポートされる

⚫︎ Mapオブジェクトでキーと値の追加するには、set()を使用する

⚫︎ Mapオブジェクトで指定したキーの値を取得するには、get()を使用する

⚫︎ Mapオブジェクトで指定したキーの値を削除するには、delete()を使用する

⚫︎ Mapオブジェクトでペアをすべて削除するには、clear()を使用する

⚫︎ Mapオブジェクトで指定したキーの値を削除するには、delete()を使用する

⚫︎ Mapオブジェクトでキーのみをすべて取得するには、keys()を使用する

⚫︎ Mapオブジェクトでのみを価すべて取得するには、values()を使用する

⚫︎ Mapオブジェクトでキーと値のペアをすべて取得するには、entries()を使用する

⚫︎ Mapオブジェクトでキーの存在を確認するには、has()を使用する

⚫︎ Mapオブジェクトのサイズを取得するには、sizeを使用する

⚫︎ Mapオブジェクトの応用的な使い方として下記のような使い方がある
・オブジェクトのマッピング
・データの集計とカウント
・キャッシュの管理

⚫︎ Mapオブジェクトは下記のメソッドや文法を使用することで反復処理を行うことができる
・forEach()
・for-of文

⚫︎ Mapオブジェクトと配列の違いは格納できるキーの種類である
(Mapオブジェクトは様々な型をキーとして設定できるが、配列はインデックス(数値型)がキーとなる)

⚫︎ MapオブジェクトとSetオブジェクトの違いはキーが一意性か値が一意性かどうかである
(Mapオブジェクトはキーが一意性であるが、Setオブジェクトは値が一意性となる)

⚫︎ 配列からMapオブジェクトを作成するには、作成した2次元配列をMapオブジェクトとしてインスタンス化する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA