作成日:2025/3/13,最終更新日:2025/4/18

JavaScript / TypeScriptの配列操作について

配列の変換/抽出/集約/判定メソッドの詳しい解説

この記事では、配列の各要素に対し反復処理や変換を行うためのメソッドについて詳しく解説します。
具体的には、forEach,map,filter,reduce,reduceRight,some,everyの7つのメソッドについて、サンプルコードとともにその動作や使い方を説明しています。


1. forEach()

解説: forEach() は、配列の各要素に対して指定されたコールバック関数を実行するメソッドです。
戻り値は返さず、単に各要素に対して副作用のある処理を行う際に使用します。
コールバック関数には、要素、インデックス、元の配列が引数として渡されます。

// forEach() サンプル
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, index) => {
  console.log(`Index ${index}: Number ${num}`);
});
// 出力例:
// Index 0: Number 1
// Index 1: Number 2
// ...

2. map()

解説: map() は、配列の各要素に対して指定した関数を実行し、その結果から新しい配列を作成して返します。
元の配列は変更されず、各要素を変換して別の形式や値にする場合に非常に便利です。

// map() サンプル
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 出力: [2, 4, 6, 8, 10]

3. filter()

解説: filter() は、配列の各要素に対して条件判定(コールバック関数)を行い、その条件を満たす要素だけからなる新しい配列を返します。
条件に一致しない要素は結果に含まれません。

// filter() サンプル
const numbers = [10, 15, 20, 25, 30];
const filtered = numbers.filter(num => num > 20);
console.log(filtered); // 出力: [25, 30]

4. reduce()

解説: reduce() は、配列の各要素を累積して、最終的に単一の値にまとめるためのメソッドです。
コールバック関数は、累積値、現在の要素、インデックス、元の配列を引数に取り、2つ目の引数(初期値)から処理をスタートします。
数値の合計、平均、または任意の集計処理などに利用できます。

// reduce() サンプル
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 出力: 15

5. reduceRight()

解説: reduceRight() は、reduce() と非常に似ていますが、配列の末尾から先頭に向かって累積処理を行います。
右から左への処理が必要な場合(例えば文字列の逆順連結など)に有用です。

// reduceRight() サンプル
const letters = ['a', 'b', 'c', 'd'];
const combined = letters.reduceRight((acc, char) => acc + char, '');
console.log(combined); // 出力: "dcba"

6. some()

解説: some() は、配列内の少なくとも1つの要素が指定した条件を満たすか検証し、条件を満たす要素があれば true、なければ false を返します。
早期終了が行われるため、条件にマッチする最初の要素が見つかれば、それ以降のチェックは省略されます。

// some() サンプル
const numbers = [10, 20, 30, 40, 50];
const hasOver30 = numbers.some(num => num > 30);
console.log(hasOver30); // 出力: true

7. every()

解説: every() は、配列内の全ての要素が指定した条件を満たすかどうか検証し、全体が条件に一致すれば true、1つでも外れると false を返します。
配列が空の場合は、仕様上 true を返す点にも注意してください。

// every() サンプル
const numbers = [12, 14, 16, 18];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // 出力: true