カテゴリー
お問い合わせ

【JavaScript】Objectとの違いは？Mapオブジェクトの便利な使い方とメリット

JavaScript
目次

JavaScriptで「キーと値（Key-Value）」のペアを管理する時、通常は {}（Object）を使いますよね。 しかし、現代のJavaScriptには Map という専用のオブジェクトが用意されています。

「Objectでも同じことができるのに、なぜMapを使うの？」と疑問に思う方も多いはず。 実は、データをループで取り出したい時や、データの数を数えたい時など、Mapを使うとコードが劇的にシンプルになるメリットがたくさんあるんです！ 今回は、Mapの基本的な使い方、Objectとの違いをデモと一緒に解説します。

デモ動作

See the Pen JSのMapオブジェクトの使い方とObjectとの違い by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コード紹介

【HTML】

<div class="l-wrap">
  <h2>Mapオブジェクト 活用デモ</h2>
  
  <div class="p-demo-box">
    <section class="p-section">
      <h3>現在のスキルセット（Mapで管理）</h3>
      <p class="c-text">ボタンを押すと、Mapからデータを取得して一覧表示します！</p>
      
      <button class="c-btn js-btn-show">スキル一覧を表示する</button>
      
      <!-- データを出力するエリア -->
      <div class="p-output">
        <p class="c-total js-total-text"></p>
        <ul class="c-skill-list js-skill-list"></ul>
      </div>
    </section>
  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap {
  padding: 40px 20px;
  max-width: 600px;
  margin: 0 auto;
  color: #3e3e3e;
  line-height: 1.6;
}

h2 {
  margin-bottom: 20px;
  font-size: 16px;
  color: #1bb4d4;
  text-align: center;
}

.p-demo-box {
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}

h3 {
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 20px;
  border-bottom: 2px solid #eee;
}

.c-text {
  font-size: 16px;
}

/* ボタンと出力エリア */
.c-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: #e83e8c;
  border-radius: 6px;
  transition: opacity 0.2s;
}

.c-btn:hover {
  opacity: 0.8;
}

.p-output {
  padding: 20px;
  margin-top: 20px;
  font-size: 16px;
  background: #f0f8ff;
  border-radius: 8px;
}

.c-total {
  margin-bottom: 10px;
  font-weight: bold;
  color: #1bb4d4;
}

.c-skill-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-skill-list li {
  padding: 8px 0;
  border-bottom: 1px dashed #ccc;
}

【JavaScript】

// 💡 1. Mapの作成とデータの追加（set）
const skillMap = new Map();
skillMap.set('HTML / CSS', '得意です！');
skillMap.set('JavaScript', '毎日勉強中！');
skillMap.set('React', 'これから挑戦します！');

// DOMの取得
const btnShow = document.querySelector('.js-btn-show');
const totalText = document.querySelector('.js-total-text');
const skillList = document.querySelector('.js-skill-list');

btnShow.addEventListener('click', () => {
  // リストを一旦リセット
  skillList.innerHTML = '';

  // 💡 2. データの数を取得する（size）
  // Object.keys(obj).length と書かなくていい！
  totalText.innerText = `登録されているスキルは ${skillMap.size} 個です。`;

  // 💡 3. データをループで取り出す（for...of）
  // Object.entries(obj) に変換しなくても、直接 [key, value] で取り出せる！
  for (const [skill, level] of skillMap) {
    const li = document.createElement('li');
    li.innerHTML = `${skill} : ${level}`;
    skillList.appendChild(li);
  }
});

コードの解説（Objectとの違い）

ループ処理が圧倒的にカンタン！

// 💡 3. データをループで取り出す（for...of）
// Object.entries(obj) に変換しなくても、直接 [key, value] で取り出せる！
for (const [skill, level] of skillMap) {
  const li = document.createElement('li');
  li.innerHTML = `${skill} : ${level}`;
  skillList.appendChild(li);
}

Objectの場合、for...of でループを回すには Object.entries() を使って一度配列に変換する手間が必要でした。 Map なら、デモのように for (const [key, value] of skillMap) と書くだけで直接ループを回すことができます！

データの数がすぐに分かる！

// 💡 2. データの数を取得する（size）
// Object.keys(obj).length と書かなくていい！
totalText.innerText = `登録されているスキルは ${skillMap.size} 個です。`;

Objectにいくつデータが入っているか数える時、Object.keys(obj).length のように少し遠回りな書き方をしますが、 Map なら skillMap.size というプロパティで要素の数を取得できます。

どんな型でも「キー（Key）」にできる！

Objectのキーは必ず「文字列（String）」か「Symbol」になりますが、Mapなら「数値」や「配列」、さらには「DOM要素そのもの」をキーに設定することも可能です！

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

Mapの作成（コンストラクタ）

空のMapを作る場合は new Map() と書きますが、初期値を持たせた状態で作成したい場合は、配列の中に「キーと値のペアの配列」を入れるという少し独特な書き方をします。

// 空のMapを作成
const emptyMap = new Map();

// 初期値を入れて作成（配列の中に、[キー, 値]の配列を入れる）
const userMap = new Map([
  ['name', 'みかん箱'],
  ['age', 35],
  ['role', 'フロントエンドエンジニア']
]);

データを操作する主要なメソッド

Mapオブジェクトには、データを直感的に扱うための便利なメソッドが用意されています。代表的なものを試してみましょう！

データの追加（.set）と 取得（.get）

const myMap = new Map();

// .set(キー, 値) でデータを追加・更新します
myMap.set('apple', 'りんご');
myMap.set('banana', 'ばなな');

// .get(キー) で、対応する値を取得します
console.log(myMap.get('apple')); // 出力: "りんご"

// 存在しないキーを指定すると undefined が返ります
console.log(myMap.get('grape')); // 出力: undefined

キーだけ、値だけを取得する（.keys, .values）

ループ処理の中で「キーの一覧だけが欲しい」「値の一覧だけが欲しい」という時に便利なメソッドです。

const fruitMap = new Map([
  ['apple', 'りんご'],
  ['orange', 'みかん']
]);

// .keys() でキーの一覧を取得
for (const key of fruitMap.keys()) {
  console.log(key); // 出力: "apple", "orange"
}

// .values() で値の一覧を取得
for (const value of fruitMap.values()) {
  console.log(value); // 出力: "りんご", "みかん"
}

補足：公式ドキュメント

・MDN: Map

まとめ

今回は、Mapの基本的な使い方、Objectとの違いを解説しました！

単純なデータの入れ物としては従来のObjectでも十分ですが、「追加や削除を頻繁に行うデータ」「ループで順番に取り出したいデータ」「要素の数を知りたいデータ」を扱う場合は、Map オブジェクトを使うとコードが劇的にスッキリします！

現代のJavaScript開発では非常によく使われる便利な機能なので、ぜひ皆さんも積極的に Map を活用してみてくださいね！

Prev
Next

関連記事