TypeScriptでのフィルタとマップのネストによるパフォーマンス問題と最適化
はじめに
TypeScriptでのデータ操作において、filterやmapを使用することは一般的ですが、これらをネストして使用するとパフォーマンスに影響を及ぼすことがあります。特に、大規模なデータセットを扱う場合は、不要なループが増えることで処理速度が低下することがあります。本記事では、ネストされたfilterとmapの使用を避ける方法について解説します。
フィルタとマップのネストが重たい理由
filterやmapをネストすると、それぞれの関数呼び出しごとに配列全体を再度走査するため、処理が重くなります。以下のようなコードは、その典型例です：
const data = [/* 大量のデータ */];
// 重たい処理の例
const result = data
.filter(item => item.condition)
.map(item => item.value)
.filter(value => value > threshold);
最適化の方法
ネストされたfilterやmapを避けるためには、1回のループで必要な処理を全て行う方法が有効です。以下はその例です：
const data = [/* 大量のデータ */];
const result = [];
for (const item of data) {
if (item.condition) {
const value = item.value;
if (value > threshold) {
result.push(value);
}
}
}
このようにすることで、データセットを1回走査するだけで済みます。これにより、パフォーマンスが大幅に向上することがあります。
サンプルコード
実際にTypeScriptでどのように実装するか、具体的なサンプルコードを見てみましょう。
Before: ネストされたfilterとmap
const data = [
{ id: 1, value: 10, condition: true },
{ id: 2, value: 20, condition: false },
{ id: 3, value: 30, condition: true },
// ...more items
];
const threshold = 15;
const result = data
.filter(item => item.condition)
.map(item => item.value)
.filter(value => value > threshold);
console.log(result); // [30]
After: 最適化されたコード
const data = [
{ id: 1, value: 10, condition: true },
{ id: 2, value: 20, condition: false },
{ id: 3, value: 30, condition: true },
// ...more items
];
const threshold = 15;
const result = [];
for (const item of data) {
if (item.condition) {
const value = item.value;
if (value > threshold) {
result.push(value);
}
}
}
console.log(result); // [30]
結論
TypeScriptでfilterやmapを使用する際、ネストして使用することは避け、1回のループで必要な処理を全て行うことでパフォーマンスを向上させることができます。特に大規模なデータセットを扱う場合は、この最適化手法が非常に効果的です。
少ないループで済むように、データを事前に結合しておいたり、memo化をして同じようなループ処理を何度も行わないようにする工夫も大切です。
Discussion