自主的20%るぅる

各々が自主的に好き勝手書くゆるふわ会社ブログ

【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。
是非とも使ってみてくださいね。

Let’s share this article!

{ 関連記事 }

{ この記事を書いた人 }

Takato Ezaki
takato_ezaki
記事一覧