1. filterメソッドとは？条件に合う要素だけを選ぶ仕組み

filterメソッドは、配列の中の要素を一つずつ調べて、「条件に合っているかどうか」を判断します。そして条件に合った要素だけを集めて、新しい配列として返してくれます。

例えば、フルーツの配列から「バナナだけを集める」といった使い方ができます。


let fruits = ["りんご", "バナナ", "みかん", "バナナ"];
let bananas = fruits.filter(function(item) {
  return item === "バナナ";
});
console.log(bananas);  // ["バナナ", "バナナ"]


["バナナ", "バナナ"]

このようにfilterは、新しい配列を作るので元の配列は変わりません。

2. filterの仕組み：関数を使って条件をチェック

filterに渡す関数（「コールバック関数」と呼びます）は、配列の要素を一つずつ受け取って「この要素は条件を満たしているか？」をtrueかfalseで返します。

trueの場合は新しい配列に入れて、falseなら入れません。

例えば「5より大きい数字だけを集める」場合はこう書きます。


let numbers = [1, 3, 7, 10, 5];
let bigNumbers = numbers.filter(function(num) {
  return num > 5;
});
console.log(bigNumbers);  // [7, 10]


[7, 10]

この場合、num > 5が条件です。

3. 短く書く方法：アロー関数でさらにスッキリ

JavaScriptでは、条件を書く関数をもっと短く書ける「アロー関数」という書き方があります。


let numbers = [1, 3, 7, 10, 5];
let bigNumbers = numbers.filter(num => num > 5);
console.log(bigNumbers);  // [7, 10]

コードが短くて見やすくなるので、慣れたらぜひ使いましょう。

4. filterでよくある使い方の例

以下は、filterを使った他の例です。

文字列の長さが5文字以上のものだけ集める
配列の中の偶数だけ抽出する
オブジェクトの配列から特定の条件を満たすものだけ選ぶ


// 文字列の長さが5文字以上
let words = ["りんご", "バナナ", "みかん", "メロン"];
let longWords = words.filter(word => word.length >= 5);
console.log(longWords);  // ["バナナ", "メロン"]

// 偶数だけ抽出
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4, 6]

// オブジェクト配列で年齢が20以上の人だけ
let people = [
  {name: "太郎", age: 18},
  {name: "花子", age: 22},
  {name: "次郎", age: 20}
];
let adults = people.filter(person => person.age >= 20);
console.log(adults);  
// [{name: "花子", age: 22}, {name: "次郎", age: 20}]