JavaScriptのMapオブジェクトにデータを追加するには`set()`メソッドを使用します。この記事では、`set()`メソッドの基本的な使い方から実践的な例まで、わかりやすく解説します。

Mapとset()メソッドの基本

`set()`メソッドは、Mapオブジェクトに新しいキーと値のペアを追加するためのメソッドです。

基本的な構文は以下の通りです：

map.set(key, value)

基本的な使用例

// 新しいMapオブジェクトを作成
const userMap = new Map();

// キーと値を追加
userMap.set('name', 'John');
userMap.set('age', 25);
userMap.set('email', 'john@example.com');

console.log(userMap);
// Map(3) { 'name' => 'John', 'age' => 25, 'email' => 'john@example.com' }

複数の値を連続して追加する方法

`set()`メソッドはチェーン可能です。複数の値を一度に追加する場合は以下のように記述できます：

const productMap = new Map()
  .set('id', 1001)
  .set('name', 'Coffee')
  .set('price', 500);

console.log(productMap);

さまざまなデータ型をキーとして使用

Mapの特徴として、オブジェクトを含むあらゆるデータ型をキーとして使用できます：

const mixedMap = new Map();

// 数値をキーとして使用
mixedMap.set(1, 'Number One');

// オブジェクトをキーとして使用
const objKey = {id: 1};
mixedMap.set(objKey, 'Object Value');

// 配列をキーとして使用
mixedMap.set([1, 2, 3], 'Array Value');

既存のキーの値を更新

同じキーで`set()`を使用すると、値が上書きされます：

const scoreMap = new Map();

scoreMap.set('player1', 100);
console.log(scoreMap.get('player1')); // 100

// 値を更新
scoreMap.set('player1', 150);
console.log(scoreMap.get('player1')); // 150

エラー処理とよくある間違い

// よくある間違い1: オブジェクトとして扱おうとする
const map = new Map();
map['key'] = 'value'; // ❌ 正しいMapの使用方法ではありません

// 正しい使用方法
map.set('key', 'value'); // ✅

まとめ

  • `set()`メソッドを使用してMapにキーと値のペアを追加できます
  • メソッドチェーンで複数の値を連続して追加できます
  • あらゆるデータ型をキーとして使用可能です
  • 同じキーで`set()`を使用すると値が上書きされます

これらの基本を押さえておけば、JavaScriptのMapオブジェクトを効果的に活用できるでしょう。