🐸

JavaScript Map Set について

に公開2件
JavaScript
TypeScript
ES6
tech

はじめに

JavaScriptのES6で追加された「Map」と「Set」の使い方や違いについて、
初心者にもわかりやすく整理します。

Mapとは

「キーと値のペア」を管理するオブジェクトで、辞書や連想配列のように使えます。

const map = new Map()
map.set('apple', 100) // りんごの値段
map.set('banana', 150) // バナナの値段

console.log(map.get('apple'))  // 100
console.log(map.has('apple'))  // true

特徴

  • キーにオブジェクトや関数なども使える（{}など）
  • キーの順番が保持される（追加した順に取り出せる）
  • .set(key, value) で追加、.get(key) で取得、.has(key) で存在確認ができる
    .delete(key) で削除ができる

Setとは

「重複しない値の集まり」を管理する構造で、ユニークな要素だけを扱いたい場面に使われます。

const set = new Set()
set.add('apple')
set.add('banana')
set.add('apple') // これは無視される（重複するため）

console.log(set.has('banana'))  // true
console.log(set.size)           // 2

特徴

  • 同じ値は一度しか入らない（重複なし）
  • 値の順番が保持される
  • .add(value) で追加、.has(value) で存在確認、.delete(value) で削除ができる

比較

比較ポイント Map Set
何を扱うか キーと値のペア 値のみ（ユニーク）
重複の扱い キーはユニーク 値がユニーク
キーにできるもの 文字列・数値・オブジェクトなど ー
順番は保持されるか 保持される 保持される

イテレーション（繰り返し）

// Mapの繰り返し
for (const [key, value] of map) {
  console.log(key, value)
}

// Setの繰り返し
for (const value of set) {
  console.log(value)
}

まとめ

  • Map は「キーと値」のペアを扱いたいときに使う。
    • 例：ユーザーIDに対応する名前、商品の名前と価格など。
  • Set は「重複を許さない値の集まり」を扱いたいときに使う。
    • 例：タグ一覧、ユニークなID一覧など。

どちらも配列やオブジェクトと違い、データの重複管理や順序の保持に強いという特徴があります。
用途に合わせて使い分けてみると良いかもしれません。

この記事では Map と Set の基本的な使い方を紹介しました。
他にも .clear() や .forEach()、 .entries() など便利なメソッドがたくさんあります。

詳しくは公式ドキュメントを参考にしてみてください

Map
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
Set
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

Discussion