JavaScriptのfilter()メソッド徹底解説：初心者向けステップバイステップガイド

JavaScriptのfilter()メソッドは、既存の配列から条件に合う要素だけを取り出し、新しい配列を作成するためのメソッドです。filter()メソッドは引数としてコールバック関数を受け取り、この関数が各要素を評価して、新しい配列に追加すべきかどうかを判定します。

JavaScriptを学び始めたばかりの方なら、filter()やreduce()といった配列メソッドに馴染みがないかもしれません。しかし、オブジェクトのリスト（いわゆる配列）を扱う際には、これらのメソッドが非常に役立ちます。

配列から特定の値だけを抽出したいと思ったことはありませんか？そんなときに活躍するのが、JavaScriptのfilter()関数です。このチュートリアルでは、具体的なコード例とともに、filter()関数の使い方を詳しく解説していきます。

配列のおさらい

JavaScriptの配列は、0個以上の項目を格納できるデータ構造です。格納できるのは数値、文字列、他の配列など、さまざまなデータ型です。個々の項目には「0」から始まる番号付きインデックスを使ってアクセスします。

配列を使えば、複数の値を1つの変数にまとめて格納できます。そのため、値ごとに別々の変数を用意する必要がなくなり、より簡潔で読みやすいコードを書けるようになります。

以下はJavaScriptにおける配列の基本的な例です：

let names = ["Alex", "Bill", "Connor", "Daniel", "Edna"];

JavaScriptでの配列フィルタリング

JavaScriptの配列filter()メソッドは、既存の配列の内容をもとに新しい配列を作成します。filter()メソッドは、既存の配列の各要素に対してコールバック関数を実行し、その条件を満たした要素だけを新しい配列に追加します。

filterメソッドを使えば、特定の基準を満たす値を効率的に取得し、それらを新しい配列にまとめることができます。

filter()メソッドの構文

filterメソッドは、次のような構文で使用します：

var newArr = oldArr.filter(function(item) {
	return yourCondition;
});

このコードでは、「oldArr」配列の内容をもとに「newArr」という新しい配列を作成しています。コールバック関数は各要素に対して条件を評価し、条件を満たす場合にtrueを返すことで、その要素が新しい配列に追加されます。条件の例としては、次のようなものが挙げられます：

• item > 5
• item == "Jessie"
• item < 3

条件の構築には、JavaScriptの比較演算子を使用できます。また、if文を使うことも可能です。if文を使えば、複数の値の中からどれを新しいリストに追加するかを、より細かく制御できます。

filter()の実践例

数値のリストをフィルタリングする

まずはシンプルな例から見ていきましょう。カフェの購入履歴のリストがあり、10ドルを超える購入額だけを表示する新しいリストを作成したいとします。

購入履歴のリストは次のとおりです：

var purchases = [2.50, 2.70, 10.50, 12.30, 9.60, 2.30, 3.40];

filter()メソッドを使えば、10ドルを超える購入額だけを簡単に取得できます：

var big_purchases = purchases.filter(function(purchase) {
	return purchase > 10;
});

このプログラムは、各購入額が10ドルより大きいかどうかを順番にチェックします。10ドルを超える購入だけがbig_purchasesリストに追加され、それ以外の購入は除外されます。

変数big_purchasesの値は、次のようになります：

[10.5, 12.3]

filter()メソッドは、定義したテスト条件（ここでは「item > 10」）に合格したすべての要素を返します。すべての購入データが必要になった場合は、元の「purchases」リストを参照すれば問題ありません。

オブジェクトの配列をフィルタリングする

次に、学校の全生徒の情報を含む配列の例を見てみましょう：

var students = [
	{
		id: 1,
		name: "Alex",
		class: "First Grade",
		age: 5
	},
	{
		id: 2,
		name: "Bill",
		class: "First Grade",
		age: 5
	},
	{
		id: 3,
		name: "Connor",
		class: "Second Grade",
		age: 6
	}
];

ここで、1年生の生徒だけを取得したい場合はどうすればよいでしょうか？filter()を使えば、このような操作も簡単に行えます。「students」配列から1年生全員を抽出する関数を書いてみましょう：

var firstGradeStudents = students.filter(function (student) {
	return student.class === "First Grade";
});

filter()は引数を1つ受け取ります。これは、データに対して実行する処理内容を決める関数です。

filter()関数は「students」配列内のすべてのオブジェクトを順番に調べ、classプロパティが「First Grade」と等しい生徒だけを返します。「===」演算子は厳密な等価性（データ型まで含めて一致すること）を意味します。

filter関数は、条件に合致した値だけで構成される新しい配列を作成し、その結果は「firstGradeStudents」変数からアクセスできます。

まとめ

filter()配列メソッドを使えば、既存の配列の内容をもとに新しい配列を簡単に作成できます。その名の通り、filter()は既存の配列から要素を「ふるいにかけて」必要なものだけを抽出するメソッドです。

以上で解説は終わりです！これでJavaScriptのfilter()メソッドを自信を持って活用できるようになったはずです。JavaScriptのプログラミングについてさらに学びたい方は、初心者向けのチュートリアル記事もぜひ参考にしてみてください。