JavaScriptでfilterメソッドを使いこなそう｜コード例付

（最終更新月：2023年11月）

✔以下のような疑問をお持ちの方に向けて書かれています

✔当記事を通じてお伝えすること

• JavaScriptでの”filter”メソッドの基本概念
• “filter”メソッドの記述法とその応用例
• “filter”メソッドを実際に用いた実例

当記事を通じて、”filter”メソッドの基本的な使い方から応用的な活用方法まで、詳しくお伝えします。

具体的なサンプルとともに解説していきますので、ぜひ最後までお読みください。

filterメソッドの基本構造

こちらでは、filterメソッドの基本的な構造と使用方法について詳しく解説します。

filterメソッドの基本を理解することで、より高度な配列操作が手軽におこなえるでしょう。

• filterメソッドの必要性
• filterメソッドの構文と仕様
• 引数と返値の理解

filterメソッドの必要性

filterメソッドは、配列から特定の条件に合致する要素だけを取り出せるメソッドです。

このメソッドを使うことで、簡潔にかつ効率的にデータのフィルタリングが可能となります。

例えば、数字の配列から偶数のみ取り出す方法は以下のとおりです。

// 数字の配列を定義
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 偶数のみを取り出す関数
const evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

filterメソッドの構文と仕様

filterメソッドは、配列の各要素に対してテスト関数を実行し、そのテストをパスしたすべての要素で新しい配列を生成します。

基本的な構文は以下のとおりです。

const newArray = oldArray.filter(callback(element[, index[, array]])[, thisArg]);

callbackは各要素に対して実行される関数で、真偽値を返す必要があります。

引数と返値の理解

filterメソッドのコールバック関数は、最大3つの引数を取れます。

• 現在の要素
• 現在の要素のインデックス
• 配列自体

このコールバック関数がtrueを返すと、その要素は新しい配列に含まれます。

falseを返すと、その要素は除外される仕組みです。

filterメソッドの詳細な分析

filterメソッドの主な役割は、配列の要素をフィルタリングすることです。

具体的な使用例を以下に示します。

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

この例では、偶数だけを新しい配列にフィルタリングしています。

続きは、実用例や応用ガイド、ブラウザー互換性など、さまざまな観点からfilterメソッドの使用方法や注意点を詳しく解説していきます。

実用例：filterメソッドを使った実際のプログラミング

こちらでは、filterメソッドを使用した具体的なプログラミング例をいくつか紹介します。

filterメソッドを実際のコードでどのように活用できるのかを理解することで、日常の開発作業がよりスムーズになるでしょう。

• 配列から特定の値を除外する
• 素数の抽出
• 不要なJSONデータの除去
• 特定の要素の検索
• 初期配列に対する影響の理解

配列から特定の値を除外する

配列から特定の値を除外したいときに、filterメソッドは使えます。

以下は、配列からnullやundefinedを除外する例です。

const array = [1, null, 2, undefined, 3];
const filteredArray = array.filter(item => item != null);
console.log(filteredArray); // [1, 2, 3]

素数の抽出

filterメソッドを使用して、配列から素数だけを抽出できます。

const numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10];
const isPrime = num => {
  for(let i = 2; i < num; i++)
    if(num % i === 0) return false;
  return num !== 1;
};
const primes = numbers.filter(isPrime);
console.log(primes); // [2, 3, 5, 7]

不要なJSONデータの除去

JSONデータから特定の条件に合致しないデータを除外する場面も考えられます。

const users = [
  { id: 1, name: "John", active: true },
  { id: 2, name: "Jane", active: false },
  { id: 3, name: "Doe", active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); // [{ id: 1, name: "John", active: true }, { id: 3, name: "Doe", active: true }]

特定の要素の検索

配列内の特定の要素を検索する際にもfilterメソッドが役立ちます。

const fruits = ["apple", "banana", "cherry", "date"];
const search = "a";
const results = fruits.filter(fruit => fruit.includes(search));
console.log(results); // ["apple", "banana", "date"]

初期配列に対する影響の理解

filterメソッドは元の配列を変更せず、新しい配列を返すことを理解することが重要です。

元のデータを安全に保持しつつ、新しいデータを操作できます。

応用ガイド：filterメソッドのより高度な使用法

こちらでは、filterメソッドの基本的な使用法を超えて、さらに高度な使用法をいくつか紹介します。

filterメソッドの応用例を学ぶことで、より複雑なデータ処理にも対応できるでしょう。

• 文字列から条件に適合する値の抽出
• 配列の中から奇数の抽出
• 5未満の数字の排除

文字列から条件に適合する値の抽出

文字列の配列から、特定の条件に合致する文字列だけの抽出も可能です。

const words = ["apple", "banana", "cherry", "date", "eggfruit"];
const filteredWords = words.filter(word => word.length > 5);
console.log(filteredWords); // ["banana", "cherry", "eggfruit"]

配列の中から奇数の抽出

数値の配列から奇数だけを抽出する例を考えてみましょう。

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

5未満の数字の排除

配列から特定の条件に合致しない数値を排除することもできます。

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

ブラウザー互換性と注意点

filterメソッドはECMAScript 5で導入されたため、古いブラウザではサポートされていない場合があります。

しかし、多くの現代のブラウザやNode.jsではサポートされています。

古いブラウザのサポートが必要な場合は、ポリフィルを使用することで対応可能です。

まとめ

当記事では、JavaScriptのfilterメソッドについて学習してきました。

この知識を活用して、日常のコーディング作業をより効率的におこなえるでしょう。

次のステップとして、他の配列メソッドや関数型プログラミングの概念にも触れてみると、さらに幅広い知識を身につけられます。