JavaScript filterを極める！7つの使い方とサンプルコード

はじめに
●JavaScriptのfilter関数とは
- ○filter関数の基本
●JavaScript filterの使い方
●JavaScript filterの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのfilter関数を使いこなすことができるようになります。

JavaScript filterは配列内の要素を条件に従って絞り込むのに役立ちますが、初心者には少し難しく感じるかもしれません。

この記事では、filter関数の使い方や注意点、カスタマイズ方法を詳しく解説し、7つのサンプルコードを通じて理解を深めていきます。

●JavaScriptのfilter関数とは

○filter関数の基本

JavaScriptのfilter関数は、配列内の要素を特定の条件に従ってフィルタリングするための関数です。

filter関数は配列に対して実行され、条件に合った要素のみが新しい配列に追加されます。

この関数は、元の配列を変更せず、新しい配列を返すため、非破壊的な操作とされています。

●JavaScript filterの使い方

○サンプルコード1：偶数のみを抽出する

このコードでは、配列内の偶数だけを抽出するコードを紹介しています。

この例では、配列内の要素を一つずつチェックし、偶数であれば新しい配列に追加しています。

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

○サンプルコード2：特定の条件を満たす要素を抽出する

このコードでは、配列内の要素が特定の条件を満たすものだけを抽出する方法を紹介しています。

この例では、文字列の配列から、指定した文字数以上のものだけを新しい配列に追加しています。

const words = ['apple', 'banana', 'cherry', 'date', 'fig'];
const longWords = words.filter((word) => word.length >= 5);
console.log(longWords); // ['apple', 'banana', 'cherry']

○サンプルコード3：オブジェクト配列から特定のプロパティを持つ要素を抽出する

このコードでは、オブジェクトの配列から特定のプロパティを持つ要素を抽出する方法を説明しています。

この例では、オブジェクト配列内の要素を一つずつチェックし、年齢が20歳以上のオブジェクトだけを新しい配列に追加しています。

const users = [
  { name: 'Alice', age: 24 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 18 },
];

const adults = users.filter((user) => user.age >= 20);
console.log(adults); // [{ name: 'Alice', age: 24 }, { name: 'Bob', age: 30 }]

○サンプルコード4：複数の条件を満たす要素を抽出する

このコードでは、配列から複数の条件を満たす要素を抽出する方法を紹介しています。

この例では、文字列の配列内の要素を一つずつチェックし、指定した文字数以上でかつ指定した文字を含むものだけを新しい配列に追加しています。

const words = ['apple', 'banana', 'cherry', 'date', 'fig'];
const filteredWords = words.filter(
  (word) => word.length >= 5 && word.includes('a')
);
console.log(filteredWords); // ['banana']

●JavaScript filterの応用例

○サンプルコード5：検索機能を実装する

このコードでは、検索機能を実装する方法を説明しています。

この例では、ユーザーが入力した検索ワードを含む要素だけを新しい配列に追加しています。

const products = ['apple', 'banana', 'cherry', 'date', 'fig'];
const searchKeyword = 'ap';

const searchResults = products.filter((product) =>
  product.toLowerCase().includes(searchKeyword.toLowerCase())
);
console.log(searchResults); // ['apple']

○サンプルコード6：特定の範囲内の数値を抽出する

このコードでは、特定の範囲内の数値を抽出する方法を紹介しています。

この例では、配列内の数値要素を一つずつチェックし、指定した範囲内のものだけを新しい配列に追加しています。

const numbers = [5, 12, 8, 130, 44];
const min = 10;
const max = 50;

const rangeNumbers = numbers.filter(
  (number) => number >= min && number <= max
);
console.log(rangeNumbers); // [12, 44]

○サンプルコード7：ユーザー入力によって抽出条件を変更する

このコードでは、ユーザー入力に基づいて抽出条件を変更する方法を紹介しています。

この例では、ユーザーが入力した最小値と最大値の範囲内にある数値を、配列から抽出して新しい配列に追加しています。

const numbers = [5, 12, 8, 130, 44];
const minInput = 10;
const maxInput = 50;

const filteredNumbers = numbers.filter(
  (number) => number >= minInput && number <= maxInput
);
console.log(filteredNumbers); // [12, 44]