Array.prototype.filter() を超かんたんに — 初心者向けやさしい解説 & 例題つき
filter は「配列の中から条件を満たす要素だけ を取り出して新しい配列にする」メソッドです。元の配列は変わりません。まずはイメージをつかみ、次にコード例、最後に練習問題と解説を載せます。
1. 基本のイメージ（非コード）
配列 [10, 25, 40, 55] があったとき、「値が30より大きいものだけ欲しい」と思ったら、filter に「> 30 なら true」を渡します。結果は [40, 55]。元の配列はそのまま。
2. 使い方（書き方の基本）
const 新しい配列 = 元の配列.filter(function(要素, インデックス, 配列自体) {
// 条件に当てはまるなら true、そうでなければ false を返す
return 条件;
});
よく使うのは要素だけを受け取る形：
配列.filter(element => element > 10);
引数の意味
要素：配列の現在見ている値（必須）インデックス：その要素の位置（0,1,2,…）配列自体：元の配列全体（必要なときだけ使う）
3. 具体例：数値配列（基本）
const numbers = [48, 75, 92, 61, 54, 83, 76];
// 70より大きい要素だけ取り出す
const over70 = numbers.filter(n => n > 70);
console.log(over70); // [75, 92, 83, 76]
// 元配列は変わらない
console.log(numbers); // [48, 75, 92, 61, 54, 83, 76]
ポイント：コールバックは「true/false を返す」関数です。true の要素だけ新配列に含まれます。
4. インデックスを使う例
インデックスが偶数（0,2,4,…）にある要素だけ取り出す：
const arr = ['a','b','c','d','e'];
const evenIndex = arr.filter((value, index) => index % 2 === 0);
console.log(evenIndex); // ['a', 'c', 'e']
5. オブジェクト配列の実用例（よく使うパターン）
例えばユーザー一覧のうち、年齢が20以上の人だけ取り出す：
const users = [
{id:1, name:'Sato', age:18},
{id:2, name:'Tanaka', age:21},
{id:3, name:'Suzuki', age:30},
];
const adults = users.filter(user => user.age >= 20);
console.log(adults);
// [{id:2, name:'Tanaka', age:21}, {id:3, name:'Suzuki', age:30}]
UI に表示するデータだけ取り出す、といったときに便利です。
6. filter と他メソッドの組み合わせ（実践）
たとえば「年齢が20以上の名前だけを配列で取得」する場合：
const adultNames = users
.filter(u => u.age >= 20) // 年齢フィルタ
.map(u => u.name); // 名前だけ取り出す
console.log(adultNames); // ['Tanaka', 'Suzuki']
7. 実務っぽい例：APIで来たデータをUI向けに整形
APIレスポンスから「公開済みの記事だけ」「評価が高いものだけ」などを選ぶときに filter は必須です。
// 受け取った記事データ（例）
const posts = [
{id:1, title:'X', published:true, likes:5},
{id:2, title:'Y', published:false, likes:120},
{id:3, title:'Z', published:true, likes:300},
];
// 公開済みかつ likes >= 100 のものだけ
const hotPublished = posts.filter(p => p.published && p.likes >= 100);
8. よくある間違い・注意点
- ✅ 元配列は変わらない（filter は新しい配列を返す）
- ❌ コールバックで
console.log()のみしてreturnを忘れると、undefinedが返りfalse扱いになって何も残りません。必ずtrue/falseを返す。// NG例：return を忘れている arr.filter(x => { console.log(x); }); // 何も返さない => [] になる - ✅ 「truthy / falsy」も使える（例えば
obj => objのように存在チェックすると、null/undefinedを除外できる） - パフォーマンス：大きい配列を何度も filter するとコストがかかる。必要最小限にする、チェーンは必要な順に（filter→map など）するのが良い。
9. 練習問題（解答・解説付き）
問題1：配列 [1,2,3,4,5,6] から偶数だけを取り出してください。
解答：
[1,2,3,4,5,6].filter(n => n % 2 === 0); // [2,4,6]
解説：n % 2 === 0 で偶数判定。
問題2：オブジェクト配列 [{name:'A',score:40},{name:'B',score:75}] から score >= 50 の人だけ取り出す。
解答：
const arr = [{name:'A',score:40},{name:'B',score:75}];
arr.filter(x => x.score >= 50); // [{name:'B',score:75}]
問題3：配列 ['a','','b', null, 'c'] から「空・null・undefined を除外」する。
解答：
['a','','b', null, 'c'].filter(x => x); // ['a','b','c']
解説：空文字 '' や null は JavaScript で falsy（偽）なので、単にそのまま返すと除外できます。
まとめ（覚えておくポイント）
- filter は「条件を満たす要素だけを集めた新しい配列」を返す。
- コールバックは
要素, インデックス, 元配列の順で引数を受け取れる。 - 元データは変更しない（イミュータブルな処理）。
- オブジェクト配列や API データの絞り込みで頻繁に使う。