filter で条件抽出のイメージをつかむ
const r = arr.filter(x => x > 10)
filter は、「配列の中から条件に合うものだけを選び出して、新しい配列を作る」ためのメソッドです。 天才プログラマー視点で言うと、「絞り込みをしたいときはまず filter」と言っていいくらい、頻出の道具です。
「この配列の中から、○○なものだけ欲しい」 そのときに、ほぼ必ず登場します。
filter の基本構造と「条件に合うものだけ残す」仕組み
const arr = [5, 12, 8, 20];
const r = arr.filter(x => x > 10);
console.log(r); // [12, 20]
console.log(arr); // [5, 12, 8, 20]（元の配列はそのまま）
ここで起きていることを分解します。
arr.filter(...)を呼ぶと、arrの要素を先頭から順番にチェックする- 各要素をコールバック関数
x => x > 10に渡す - コールバックが
trueを返した要素だけ、新しい配列rに残す falseを返した要素は、捨てられる- 元の
arrは一切変更されない
つまり filter は、「条件に合うものだけを通す“ふるい”」だと考えると分かりやすいです。
例題：合格者だけを抽出する
const scores = [90, 55, 78, 30, 100];
const passed = scores.filter(score => score >= 60);
console.log(passed); // [90, 78, 100]
console.log(scores); // [90, 55, 78, 30, 100]
ここでのポイントはこうです。
score >= 60が「合格かどうか」の条件- 条件が
trueなら、そのscoreは新しい配列passedに残る - 条件が
falseなら、そのscoreは捨てられる
「条件を満たすものだけ欲しい」＝ filter の出番です。
コールバック関数の役割を深掘りする
filter のコールバックは、最大3つの引数を受け取れます。
arr.filter((value, index, array) => {
// value: 今の要素
// index: その要素のインデックス
// array: 元の配列そのもの
// 戻り値: true なら残す、false なら捨てる
});
よく使うのは value だけですが、インデックスを使うこともできます。
const names = ["Aki", "Mika", "Ken", "Aya"];
const longNames = names.filter(name => name.length >= 4);
console.log(longNames); // ["Mika", "Ken", "Aya"]
ここで重要なのは、
filterのコールバックは 「true/false を返す関数」であること- 「残すか捨てるか」を決めるのは、この戻り値だけ
- 条件式をどう書くかが、filter の設計の中心になる
という点です。
例題：オブジェクト配列から条件に合うものだけ選ぶ
const users = [
{ id: 1, name: "Aki", active: true },
{ id: 2, name: "Mika", active: false },
{ id: 3, name: "Ken", active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
/*
[
{ id: 1, name: "Aki", active: true },
{ id: 3, name: "Ken", active: true }
]
*/
ここでは、
- 元の配列：ユーザーオブジェクトの配列
- 新しい配列：
activeがtrueのユーザーだけ
という「条件付き抽出」を行っています。 filter は、「複雑な配列から、条件に合う要素だけを残す」場面で非常に強力です。
forEach や map との違いをはっきりさせる（重要）
forEach
「配列を一周して、何か“する”」ためのメソッド。 戻り値は使わない。絞り込みには向かない。
const arr = [1, 2, 3];
arr.forEach(x => {
console.log(x);
});
map
「配列を一周して、“変換結果を集めた新しい配列”を作る」ためのメソッド。 要素の形を変える。
const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2); // [2, 4, 6]
filter
「配列を一周して、“条件に合う要素だけを残した新しい配列”を作る」ためのメソッド。 要素の数を減らす。
const arr = [1, 2, 3, 4, 5];
const even = arr.filter(x => x % 2 === 0); // [2, 4]
一言でまとめるなら、 「形を変えるなら map、数を減らすなら filter、ただ処理したいだけなら forEach」 と覚えると、使い分けが一気に楽になります。
よくあるミスと注意点を深掘りする
true/false を返していない
const arr = [1, 2, 3];
const r = arr.filter(x => {
x > 1; // return がない！
});
console.log(r); // []（全部捨てられる）
{} を使ったときは、必ず return が必要です。
正しくはこうです。
const r = arr.filter(x => {
return x > 1;
});
または省略形でこう書けます。
const r = arr.filter(x => x > 1);
副作用だけのために filter を使わない
// これはアンチパターン
arr.filter(x => {
console.log(x);
return true;
});
「結果の配列が欲しいわけではないのに filter を使う」のは、プロの現場では嫌われます。 その場合は素直に forEach を使うべきです。
まとめ：filter は「条件抽出の主役」
filter を使いこなせると、配列処理の表現力が一気に上がります。
- 元の配列を壊さず、条件に合う要素だけを集めた新しい配列を作れる
- 条件式をきれいに書くことで、ロジックが読みやすくなる
- 数値・文字列・オブジェクト、どんな配列にも使える
- 「この中から○○なものだけ欲しい」と思ったら、まず filter を検討する価値がある
配列を見たときに、 「この中から、条件に合うものだけ抜き出したい」と感じたら、まず filter を思い出す。 その瞬間から、あなたの JavaScript は“プロの配列処理”に近づいていきます。
