はじめに
JavaScriptで配列を操作する時に便利な「filter関数」。特に「特定の条件に合うデータだけを抽出したい」という場面で大活躍します。
今回は、このfilter関数の基本から、よく使われるパターンまでを、サンプルコードと一緒に分かりやすく紹介します。
そもそもfilter関数とは？
filter関数は、配列から条件に合う要素だけを取り出して、新しい配列を作るためのメソッドです。
配列に対して、「この条件に合うものだけ残して！」と指示するイメージですね。
基本の構文
const 新しい配列 = 元の配列.filter(function(要素) {
return 条件式;
});ポイント
-
元の配列は変更されず、新しい配列が返ってくる
-
returnで「条件に合うものだけtrueを返す」のがポイント
サンプル① 数値配列から偶数だけを取り出す
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6]偶数（num % 2 === 0がtrue）のみを抽出できています。
サンプル② オブジェクト配列から条件に合うものを抽出
const students = [
{ name: "A", score: 85 },
{ name: "B", score: 40 },
{ name: "C", score: 72 }
];
const passedStudents = students.filter(function(student) {
return student.score >= 60;
});
console.log(passedStudents);
// [{ name: "A", score: 85 }, { name: "C", score: 72 }]点数60点以上の合格者だけを抽出できています。
サンプル③ アロー関数での簡潔な記述
最近のJavaScriptでは、filterとアロー関数をセットで使うことが多いです。
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]短く書けるので、シンプルな条件の場合はこちらがおすすめです。
よくある活用シーン
-
データの絞り込み
-
ユーザー一覧から「ログイン中のユーザーだけ」を抽出
-
商品一覧から「在庫ありの商品だけ」を抽出
-
-
検索フィルター
-
入力キーワードに合うものだけをリアルタイム表示する検索機能
-
【転換（転）】
実際に「検索フィルター」を作ってみる
例えば、次のような商品一覧から、「”a”を含む商品名」だけを表示したい場合にfilterが役立ちます。
const products = [
{ name: "Apple", price: 150 },
{ name: "Banana", price: 100 },
{ name: "Orange", price: 120 }
];
const keyword = "a";
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(keyword.toLowerCase())
);
console.log(filteredProducts);
// [{ name: "Apple", price: 150 }, { name: "Banana", price: 100 }, { name: "Orange", price: 120 }]このように、検索文字を含むデータだけをリアルタイムで表示するといった機能にも使えます。
まとめ
filter関数は「条件に合うものだけを取り出す」というシンプルなメソッドですが、データ処理の効率化に欠かせません。
配列からのデータ抽出は、for文などを使って自前で書くこともできますが、filterを使えば可読性も処理もスマートになります。
ぜひ試してみよう！
「データをフィルターする必要がある」と思ったら、まずはfilter関数を思い出してください。
実際にコードを書いて手を動かすことで、使いこなせるようになりますよ。
