【JavaScript】オブジェクトより便利かも!? Map を使ってみよう!

  • 2019/6/24
  • 【JavaScript】オブジェクトより便利かも!? Map を使ってみよう! はコメントを受け付けていません。

今回は JS ではあまり使われていない、Map のご紹介

JavaScript で連想配列のような、キーと値のペアを覚えさえるとき、
基本的には皆さんオブジェクトを使いますよね?

例えば、以下のような感じで。

const obj = {
  hoge: ’fuga’
};

console.log(obj.hoge); // => fuga と出力される

delete obj.hoge // => obj.hoge が削除される

JavaScript ではよく見る形なのですが、
キーと値のペアを作りたいときにはこの方法しか無いと思ってませんか?

実は、あまり知られていませんが、こういったことをするための手段として、
Map というものも存在しているのです!

今日は、そんな Map のご紹介

※ いつもの、とても参考になる MDN のページは先に貼っておきますね。

Map

Map オブジェクトは単純なキー/値写像(マップ)です。

Map ってどうやって使うの?

例えば、先ほどのオブジェクトの例を Map でやると、こんな感じ

const map = new Map();
map.set(’hoge’, ’fuga’);

console.log(map.get(’hoge’)); // => fuga と出力される

map.delete(’hoge’); // => hoge キーと値のペアが削除される

最初に Map を生成しているところがポイントですね!

map への値の追加は map.set(キー, 値) で、
値を取り出すのは map.get(キー) と、わかりやすい感じです。
delete も、オブジェクトの場合は delete 演算子というあまり見慣れないものを使っていましたが、
こちらでは map に delete メソッドがあるので、それを呼んであげれば良いというわかりやすさです。

Map だと、オブジェクトより何がいいの?

正直オブジェクトで事足りるなら、Map なんて使わなくても良くない?と思ってませんか?
確かにそうなのですが、Map の方が色々な面で「ちょっと便利」なんですよね。
そこを見ていきましょう。

キーの存在確認が簡単

const obj = {
  hoge: false
};

if(obj.hoge) {
  // 格納されている値が false なので、obj.hoge に値はあるがここは実行されない
  console.log(’obj.hoge は値があるよ!’)
}


const map = new Map();
map.set(’hoge’, false);

if(map.has(’hoge’)) {
  // どんな値が格納されていてもキーの存在確認には影響しないので、ここは実行される
  console.log(’map には hoge があるよ!’)
}

オブジェクトでキーの存在確認をする場合は、格納されている値によって条件式が意図しない挙動をすることがあります。
きちんと書けばこういった問題は回避できますが、よくやる条件判定なので、いちいち考えるのめんどくさいですよね…

一方 Map であれば、has メソッドを使えば格納されている値によらず、キーが存在するかどうかが判定できます。

forEach が簡単に使える

const map = new Map();
map.set(’hoge’, ’hogehoge’);
map.set(’fuga’, ’fugafuga’);
map.set(’piyo’, ’piyopiyo’);

map.forEach(function(v){
  console.log(v);
  // hogehoge
  // fugafuga
  // piyopiyo
});

全てのキーを拾っていきたいときに、オブジェクトでは for…in などを使って書くことになります。
書けなくはないのですが、object.keys からキーだけのリストを作って…みたいなことをする必要があるのですね。
またこれも、ぱっと使いたい機能なだけに、毎回考えるのはちょっとメンドウ。

一方、Map を使っておけば、Map に対して forEach をそのまま使えるので、
ストレスフリーで要素を取り出していくことができます。

キーにどんな値でも設定することができる

const key1 = {};

const map = new Map();
map.set(key1, ’hogehoge’);

console.log(map.get(key1)) // => hogehoge

オブジェクトでキーに設定できるのは、文字列か、または Symbol と呼ばれるものだけなのですが、
Map ではどんなものでもキーとして設定できます。

例えば上の例のように、オブジェクトをキーにしてしまうことだってできるのです!
(それがどんなことの役に立つのかは分かりませんが)

機会があれば Map も使ってみてね

ちなみに、Map そのものは、2019/06/17 現在は IE と Edge では使用できないそうです。

Can I use… Support tables for HTML5, CSS3, etc

“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

ブラウザ側で使うときは注意が必要ですね。

今までオブジェクトで作っていた連想配列が、割と簡単に操作できる形で作れる Map。
是非とも使ってみてくださいね。

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-9-17

    2019年8月度社員総会&懇親会@Nagoya

    気づけば夏の暑さも去ろうとしています。そんな9月うまれのおみです。 さて!少しお時間空いてしまいま…
  2. 2019-9-16

    [JavaScript] オブジェクト & 配列のイマドキなコピー方法 (スプレッド構文)

    オブジェクトや配列のコピーってどうやって書きますか? 皆さん JavaScript 書いてますか?…
  3. 2019-9-9

    Web で物理アニメーション・その5(最終回) 「ライブラリを使おう」

    前回の回答 前回の宿題は、バウンド時の跳ね返り方を制御するんでしたね。 では回答。 [code…
  4. 2019-9-6

    第3回 倶楽部ぽじてぃぶ ~釣り~

    2019年7月13日に、第3回となる倶楽部ぽじてぃぶの活動が開催されました! 今回は、その様子をお…
  5. 2019-9-2

    2019年8月度社員総会&懇親会@Osaka

    2019年8月6日(火)、大阪社員総会&懇親会が開催されました! その様子をお届けします! 社員総…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。