【JavaScript】filter()実践ガイド: 条件に合った要素だけを取り出す方法

JavaScriptのfilter()は、配列内の要素を条件に従って絞り込む時に使うメソッドです。この記事ではfilter()の基本的な使い方や具体的な使用例、類似するメソッドとの比較、使用する際の注意点をわかりやすく説明します。

「filter()」の基本的な使い方

「filter()」とは？

filter()はJavaScriptの配列に適用するメソッドで、特定の条件を満たす要素だけを取り出して新しい配列を作成します。以下のコードは、偶数だけを取り出すシンプルな例です。

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

コールバック関数とは？

filter()メソッドでは、コールバック関数を引数として取ることが必要です。このコールバック関数は、配列の各要素に対して実行されます。ここで、numは、numbers配列の要素を前から順番に取り出して参照するための変数です。つまり、コールバック関数が実行されるたびに、numにはnumbers配列の次の要素が代入されます。

このコールバック関数は、各要素に対してtrueまたはfalseの値を返す必要があります。trueを返した要素は新しい配列に含まれ、falseを返した要素は含まれません。以下の例では、10より大きい数値だけを返すコールバック関数を使用しています。

const numbers = [5, 10, 15, 20];
const largerThan10 = numbers.filter(num => num > 10);
console.log(largerThan10); // [15, 20]

「filter()」の使用例4パターン

数値の配列から特定の範囲の数字を取り出す

const ages = [10, 25, 30, 15, 40, 50];
const adults = ages.filter(age => age >= 20);
console.log(adults); // [25, 30, 40, 50]

20歳以上の人を取り出します。

文字列の配列から特定の文字を含むものを取り出す

const names = ['John', 'Jane', 'Jack', 'Bob'];
const jNames = names.filter(name => name.startsWith('J'));
console.log(jNames); // ['John', 'Jane', 'Jack']

"J"で始まる名前を取り出します。

オブジェクトの配列から特定のプロパティ値を持つものを取り出す

const users = [
    {name: 'Alice', isActive: true},
    {name: 'Bob', isActive: false},
    {name: 'Charlie', isActive: true},
];
const activeUsers = users.filter(user => user.isActive);
console.log(activeUsers);
// [{name: 'Alice', isActive: true}, {name: 'Charlie', isActive: true}]

アクティブなユーザーを取り出します。

ネストされた配列から特定の条件を満たす要素を取り出す

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

偶数だけを平坦化した後に取り出します。

「filter()」と「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]

「filter()」と「map()」の違い

filter()とmap()はどちらも配列に対して処理を行うメソッドですが、それぞれの目的や振る舞いは異なります。

• filter(): このメソッドは配列の要素のうち、特定の条件を満たす要素だけを新しい配列として返します。

  例:

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

• map(): このメソッドは配列のすべての要素に対して関数を適用し、その結果を新しい配列として返します。元の配列の要素数と、新しい配列の要素数は常に同じです。

  例:

  const numbers = [1, 2, 3, 4, 5];
  const doubledNumbers = numbers.map(num => num * 2);
  console.log(doubledNumbers); // [2, 4, 6, 8, 10]
  

これを見れば、filter()は条件に合致する要素を"選ぶ"ためのものであり、map()は全ての要素を"変換"するためのものであると理解できます。

「filter()」を使用する際の注意点

コールバック関数の返り値

filter()メソッドのコールバック関数は必ずtrueまたはfalseを返す必要があります。もし何も返さない場合、その要素は新しい配列に含まれません。

const numbers = [1, 2, 3];
const result = numbers.filter(num => {
    if (num > 2) {
        return true;
    }
    // falseを明示的に返さない場合、この要素は新しい配列に含まれない
});
console.log(result); // [3]

元の配列は変更されない

filter()メソッドは元の配列を変更しません。新しい配列を返します。

const fruits = ['apple', 'banana', 'cherry'];
const result = fruits.filter(fruit => fruit !== 'banana');
console.log(fruits); // ['apple', 'banana', 'cherry']
console.log(result); // ['apple', 'cherry']

空の配列を返す可能性

条件に合致する要素が1つもない場合、filter()は空の配列を返します。

const numbers = [1, 2, 3];
const result = numbers.filter(num => num > 5);
console.log(result); // []

これらの点を注意して、filter()メソッドを適切に使用してください。

「filter()」の使い方まとめ

JavaScriptのfilter()メソッドは、配列の要素を条件に基づいて絞り込む強力なツールです。このガイドを参照して、filter()の様々な使い方や注意点を学び、日常のコーディングに活用してください。