JavaScriptの配列高階関数map、filter、reduceの使い方

先生

JavaScriptの配列操作、もう迷わない！map、filter、reduceをマスターして、コードを劇的に改善しよう🚀

JavaScript配列操作の強力な味方：map、filter、reduceとは？

JavaScriptにおける配列操作は、Web開発において非常に重要な要素です。特に、map、filter、reduceといった高階関数は、配列を効率的に処理するための強力なツールとなります。これらの関数を理解し使いこなすことで、コードの可読性と保守性を向上させ、より複雑なデータ操作も簡潔に記述できるようになります。

この記事では、map、filter、reduceそれぞれの基本的な使い方から、具体的なコーディング例を通して、実践的な活用方法までを解説します。JavaScriptの配列操作をレベルアップさせたい方は、ぜひ最後までお読みください。

map関数：配列の要素を変換する

map関数は、配列の各要素に対して指定された関数を適用し、その結果を新しい配列として返します。元の配列を変更せずに、要素を変換したい場合に非常に便利です。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);

console.log(squaredNumbers); // 出力: [1, 4, 9, 16, 25]

上記の例では、numbers配列の各要素を2乗した新しい配列squaredNumbersが作成されます。map関数の引数には、各要素に対して実行される関数（コールバック関数）を渡します。コールバック関数は、要素の値、インデックス、および配列自体を引数として受け取ることができます。

const names = ['Alice', 'Bob', 'Charlie'];
const greetings = names.map((name, index) => Hello, ${name}! (Index: ${index}));

console.log(greetings); // 出力: ['Hello, Alice! (Index: 0)', 'Hello, Bob! (Index: 1)', 'Hello, Charlie! (Index: 2)']

filter関数：配列の要素を抽出する

filter関数は、配列の各要素に対して指定された関数を実行し、その結果がtrueとなる要素のみを含む新しい配列を返します。特定の条件を満たす要素だけを抽出したい場合に役立ちます。

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // 出力: [2, 4, 6]

上記の例では、numbers配列から偶数のみを抽出した新しい配列evenNumbersが作成されます。filter関数のコールバック関数は、要素の値、インデックス、および配列自体を引数として受け取ることができ、trueまたはfalseを返す必要があります。

const products = [
  { name: 'Apple', price: 100 },
  { name: 'Banana', price: 50 },
  { name: 'Orange', price: 120 }
];

const affordableProducts = products.filter(product => product.price <= 100);

console.log(affordableProducts); // 出力: [{ name: 'Apple', price: 100 }, { name: 'Banana', price: 50 }]

reduce関数：配列の要素を単一の値にまとめる

reduce関数は、配列の各要素に対して指定された関数を累積的に適用し、最終的に単一の値を返します。配列の合計、平均、最大値などを計算する際に非常に有効です。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 出力: 15

上記の例では、numbers配列の要素の合計を計算しています。reduce関数の最初の引数はコールバック関数で、少なくとも2つの引数（アキュムレーターと現在の値）を受け取ります。アキュムレーターは、累積された結果を保持する変数です。2番目の引数は初期値です。初期値を指定しない場合、配列の最初の要素が初期値として使用されます。

const words = ['Hello', ' ', 'World', '!'];
const sentence = words.reduce((accumulator, currentValue) => accumulator + currentValue, '');

console.log(sentence); // 出力: Hello World!

参考リンク

まとめ

map、filter、reduceは、JavaScriptの配列操作を効率化するための強力な高階関数です。これらの関数を使いこなすことで、コードの可読性と保守性を向上させ、より複雑なデータ操作も簡潔に記述できるようになります。ぜひ、これらの関数を積極的に活用して、JavaScriptのスキルアップを目指してください。