TypeScript Map

TypeScriptで利用できるデータ構造の1つに、Mapがあります。キーと値のペアを簡単に保存・取得できるオブジェクトです。JavaのHashMapのような他のプログラミング言語のMapに似た特徴を持ちます。

TypeScript Mapの生成方法

TypeScriptのMapは、キーと値のペアのコレクションを保存するためのオブジェクトで、任意のデータ型にすることができます。Mapを作成するには、Mapコンストラクタを呼び出して、キーと値のペアの配列を渡します。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

この例では、2つのキーと値のペアを持つ新しいMapオブジェクトを作成します。角括弧を使ってキーと値のペアの配列を作成し、最初の要素をキー、2番目の要素を値としています。

型を指定してMapオブジェクトを作成する例を見てみましょう。次の例ではキーが文字列型、値が数値型に指定されています。

const map = new Map<string, number>();

Note: 型を指定しないで空のMapオブジェクトを作成した場合キーと値の型はどちらもany型に推論されます。

TypeScript Mapの操作

TypeScriptでは、Mapに対していくつかの操作を行うことができます。よく使われる操作としては、以下のようなものがあります。

setメソッド

Mapを作成したら、setメソッドを使って新しいキーと値のペアを追加することができます。

const myMap = new Map<string, string>();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

getメソッド

与えられたキーに対応する値を取り出すには、getメソッドを使用します。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

console.log(myMap.get('key1')); // 'value1'

has()メソッド

has()メソッドは、特定のキーがMapオブジェクトに存在するかどうかを確認するために使用されます。このメソッドは、キーが存在すればtrue、そうでなければfalseを返します。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

console.log(myMap.has('key1')); // true
console.log(myMap.has('key3')); // false

delete()メソッド

delete()メソッドは、Mapオブジェクトから特定のキー、値のペアを削除するために使用されます。このメソッドは、キーと値のペアが正常に削除された場合はtrue、そうでない場合はfalseを返します。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

console.log(myMap.delete('key1')); // true
console.log(myMap); // Map(1) { 'key2' => 'value2' }

sizeプロパティ

sizeプロパティは、Mapオブジェクト内のキー、値のペア数を取得するために使用されます。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

console.log(myMap.size); // 2

clear()メソッド

clear()メソッドは、Mapオブジェクトからすべてのキーと値のペアを削除するために使用されます。このメソッドは何も返しません。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

myMap.clear();

console.log(myMap.size); // 0

TypeScript Mapに対する反復処理

forEachメソッドを使えば、Mapを繰り返し処理することもできます。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

myMap.forEach((value, key) => {
    console.log(`${key} = ${value}`);
});

for...ofを使用しても繰り返し処理を行うことができます。

const myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
};

TypeScript メソッドチェーン

TypeScriptのメソッドは連結して使用することができ、Mapに対しても使用することができます。

const myMap = new Map();
myMap.set('key1', 'value1').set('key2', 'value2').set('key3', 'value3');
console.log(myMap); // Map (3) {"key1" => "value1", "key2" => "value2", "key3" => "value3"}

TypeScript Mapの例

eコマースサイトにショッピングカートを導入する場合を考えてみましょう。ユーザーによって選択されたアイテムを、数量と価格とともに保存する必要があります。この情報を保存する一つの方法として、Mapオブジェクトを活用してみましょう。

interface itemInformation {
    quantity: number;
    price: number;
};

let cart = new Map<string, itemInformation>();

cart.set('item1', { quantity: 2, price: 10 });
cart.set('item2', { quantity: 1, price: 5 });

let totalPrice = 0;
for (const [key, value] of cart) {
    totalPrice += value.quantity * value.price;
};

console.log(`Total price: $${totalPrice}`); // "Total price: $25"

上記のコードでは、新しいMapオブジェクトcartを作成しています。2つのアイテムを数量と価格とともにカートに追加しています。次に、Mapを繰り返し処理し、各アイテムの価格と数量を掛け合わせることで、カートの合計価格を計算します。

この記事を書いた人

著者の画像

Jeffry Alvarado

Ex-Facebook Engineer 大学ではコンピュータサイエンスを専攻し、在学中に複数のインターンシップを経験。コンピュータサイエンスが学習できるプラットフォームRecursionを創業し、CTOとしてカリキュラム作成、ソフトウェア開発を担当。

Twitter YouTube GitHub
前の記事
「Set」

ツイート