TypeScriptでのfor…ofとMapの活用

for…ofとMapの基本的な使い方

TypeScriptでは、for...ofとMapを使ってデータの操作を行うことができます。以下に基本的な使い方を示します。

for…of

for...ofは、配列や文字列などの反復可能なオブジェクトをループするための構文です。

let array = [1, 2, 3, 4, 5];
for (let value of array) {
    console.log(value); // 1, 2, 3, 4, 5が順に出力されます
}

Map

Mapは、キーと値のペアを保存するためのデータ構造です。オブジェクトとは異なり、Mapはキーの順序を保持します。

let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // 'value1'が出力されます
console.log(map.get('key2')); // 'value2'が出力されます

これらの基本的な使い方を理解した上で、次のセクションではfor...ofとMapを組み合わせたループ処理について見ていきましょう。

for…ofとMapを組み合わせたループ処理

for...ofとMapを組み合わせることで、Mapの各エントリーを効率的にループ処理することができます。以下にその基本的な使い方を示します。

let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

for (let [key, value] of map) {
    console.log(`Key: ${key}, Value: ${value}`);
    // 'Key: key1, Value: value1'と'Key: key2, Value: value2'が順に出力されます
}

このコードでは、for...ofを使ってMapの各エントリー（キーと値のペア）をループしています。ループの各イテレーションで、Mapのエントリーは配列として返され、これを[key, value]の形で分割代入しています。

このように、for...ofとMapを組み合わせることで、Mapの各エントリーを効率的にループ処理することができます。次のセクションでは、これらのパフォーマンス比較について見ていきましょう。

for…ofとMapのパフォーマンス比較

for...ofとMapのパフォーマンスを比較するために、大量のデータを扱うシナリオを考えてみましょう。

let largeMap = new Map();
for (let i = 0; i < 1000000; i++) {
    largeMap.set(`key${i}`, `value${i}`);
}

console.time('for...of loop');
for (let [key, value] of largeMap) {
    // 何もしない
}
console.timeEnd('for...of loop');

このコードでは、1,000,000のエントリーを持つ大きなMapを作成し、そのすべてのエントリーをfor...ofでループしています。console.timeとconsole.timeEndを使用して、この操作にかかる時間を計測しています。

しかし、実際のパフォーマンスは、実行環境（ハードウェア、JavaScriptエンジンなど）に大きく依存します。したがって、このコードはあくまで一例であり、具体的なパフォーマンス指標を提供するものではありません。

また、for...ofとMapのパフォーマンスを比較する際には、単に実行時間を比較するだけでなく、メモリ使用量やCPU使用率など、他のリソースに対する影響も考慮する必要があります。

最後に、パフォーマンスは重要ですが、コードの可読性や保守性も同様に重要です。for...ofとMapはそれぞれが独自の利点を持っており、適切な場面で使い分けることが最良のパフォーマンスを得るための鍵となります。

実用的な例と応用

for...ofとMapを組み合わせた実用的な例として、オブジェクトの配列から特定のプロパティを抽出し、その出現回数をカウントするというシナリオを考えてみましょう。

interface Item {
    id: string;
    name: string;
}

let items: Item[] = [
    {id: '1', name: 'item1'},
    {id: '2', name: 'item2'},
    {id: '1', name: 'item1'},
    {id: '3', name: 'item3'},
    {id: '2', name: 'item2'},
    {id: '1', name: 'item1'},
];

let countMap = new Map<string, number>();

for (let item of items) {
    if (countMap.has(item.id)) {
        countMap.set(item.id, countMap.get(item.id)! + 1);
    } else {
        countMap.set(item.id, 1);
    }
}

for (let [id, count] of countMap) {
    console.log(`ID: ${id}, Count: ${count}`);
}

このコードでは、まずItemというインターフェースとその配列itemsを定義しています。次に、for...ofを使ってitemsの各要素をループし、そのidの出現回数をcountMapに保存しています。最後に、再度for...ofを使ってcountMapの各エントリーをループし、各idの出現回数を出力しています。

このように、for...ofとMapを組み合わせることで、複雑なデータ操作を行う際にもコードをシンプルに保つことができます。これらの概念を理解し、適切に使い分けることで、TypeScriptでのプログラミングがより効率的かつ効果的になります。