この記事では、JavaScriptのmap()メソッドとfilter()メソッドを個別に、そして組み合わせて効果的に使用し、配列処理を効率化する方法を示します。実用的な例を通して、データ操作におけるこれらのメソッドの力と汎用性を説明します。
目次
JavaScript Map
map()メソッドは、配列内の各要素を繰り返し処理し、指定されたコールバック関数を適用する高階関数です。この関数は各要素を変換し、map()は変換された値を含む新しい配列を返します。元の配列は変更されません。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // 元の配列は変更されていません
JavaScript Filter
filter()メソッドも配列を繰り返し処理します。しかし、要素を変換する代わりに、コールバック関数によって定義された条件に基づいて要素を選択的に含めます。コールバック関数は、要素を含める場合はtrue、除外する場合はfalseを返す必要があります。filter()は、条件を満たす要素のみを含む新しい配列を返します。
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);
MapとFilterのチェーン化
map()とfilter()の真の力は、それらを連結して使用したときに明らかになります。これにより、複雑なデータ操作を簡潔かつ効率的に実行できます。通常、最初にfilter()を適用して配列を絞り込み、次にmap()を適用して残りの要素を変換します。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
.filter(number => number % 2 === 0)
.map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);
実例：ECサイトの商品フィルタリング
ECサイトのアプリケーションを考えてみましょう。商品オブジェクトの配列があります。
const products = [
{ name: "Shirt", price: 25, inStock: true, category: "clothing" },
{ name: "Pants", price: 40, inStock: false, category: "clothing" },
{ name: "Shoes", price: 75, inStock: true, category: "shoes" },
{ name: "Hat", price: 15, inStock: true, category: "accessories" },
{ name: "Jacket", price: 60, inStock: true, category: "clothing" }
];
在庫のある衣料品の名前だけを表示したいとします。filter()とmap()を使用して、エレガントに実現できます。
const inStockClothingNames = products
.filter(product => product.inStock && product.category === "clothing")
.map(product => product.name);
console.log(inStockClothingNames); // ['Shirt', 'Jacket']
結論
map()とfilter()を組み合わせることで、JavaScriptでの配列操作を強力かつ可読性の高い方法で実行できます。この関数型スタイルは、よりクリーンなコードを促進し、冗長なループの必要性を減らし、保守性を向上させます。両方のメソッドは新しい配列を返し、元のデータの不変性を維持することに注意してください。