JavaScript開発でよく使用される配列操作の一つ、`filter()`メソッドについて解説します。このメソッドを使うことで、配列から条件に合う要素だけを抽出し、新しい配列を作成することができます。

filter()メソッドの基本的な使い方

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element > 3);
console.log(filteredArray); // [4, 5]

`filter()`メソッドは、コールバック関数を引数として受け取ります。このコールバック関数は、各要素に対して実行され、trueを返した要素のみが新しい配列に含まれます。

filter()メソッドの構文

array.filter(callback(element[, index[, array]])[, thisArg])
  • `callback`: 各要素に対して実行される関数
  • `element`: 現在処理している要素
  • `index`: 現在処理している要素のインデックス（省略可能）
  • `array`: filter()が呼び出された配列（省略可能）
  • `thisArg`: コールバック内でthisとして使用される値（省略可能）

実践的な使用例

1. オブジェクト配列のフィルタリング

const users = [
  { name: "田中", age: 25 },
  { name: "鈴木", age: 30 },
  { name: "佐藤", age: 20 }
];

const adults = users.filter(user => user.age >= 25);
console.log(adults); // [{ name: "田中", age: 25 }, { name: "鈴木", age: 30 }]

2. 文字列配列の検索

const fruits = ["りんご", "バナナ", "オレンジ", "いちご"];
const searchResult = fruits.filter(fruit => fruit.includes("ん"));
console.log(searchResult); // ["りんご", "オレンジ"]

3. 数値配列から偶数のみを抽出

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

filter()メソッドの特徴

1. 非破壊的メソッド：元の配列は変更されず、新しい配列を返します。

2. チェーン可能：他のArray メソッドと組み合わせて使用できます。

3. 空の配列も処理可能：条件に合う要素がない場合は空の配列を返します。

よくある間違いと注意点

// ❌ 間違った使い方
const numbers = [1, 2, 3];
numbers.filter(num => {
  if (num > 2) {
    return num;
  }
});

// ✅ 正しい使い方
const numbers = [1, 2, 3];
const filtered = numbers.filter(num => num > 2);

コールバック関数は必ずブール値を返す必要があります。要素自体を返そうとするのは一般的な間違いです。

まとめ

`filter()`メソッドは、配列から特定の条件に合う要素を抽出する際に非常に便利なメソッドです。シンプルな構文で複雑なフィルタリング処理を実現できる上、元の配列を変更しないため安全に使用できます。

配列操作でよく使用されるメソッドの一つとして、JavaScriptプログラミングにおいて重要なスキルとなりますので、ぜひマスターしておきましょう。