JavaScript の配列 filter の基本
わかりやすく言うと、filter は「配列の中から、条件に合うものだけを選び出して、新しい配列を作る」道具です。元の配列はそのまま残ります。
使い方の骨格
const 新しい配列 = 元の配列.filter(function(要素, インデックス, 配列全体) {
return 条件; // trueなら残す、falseなら捨てる
});
- 要素: 1つずつ取り出される値（例: 数字、文字列、オブジェクト）
- インデックス: その要素が何番目か（0から開始）
- 配列全体: もとの配列そのもの
- 戻り値: 条件が true の要素だけを集めた新しい配列
まずはシンプルな例
const numbers = [48, 75, 92, 61, 54, 83, 76];
const result = numbers.filter(function(num) {
return num >= 70; // 70以上だけ残す
});
console.log(result); // [75, 92, 83, 76]
console.log(numbers); // [48, 75, 92, 61, 54, 83, 76]（元は変わらない）
- ポイント: 条件に合うかどうかを「true/false」で返すだけ。trueなら採用、falseなら不採用。
アロー関数で短く書く
const result = numbers.filter(num => num >= 70);
- ポイント: 同じ意味。初心者は最初は function で慣れて、慣れたらアロー関数にすると読みやすいです。
よくある用途別の例題
偶数だけ取り出す
const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]
- ラベル: 偶数判定は「2で割って余りが0」
文字列の長さで絞る
const words = ["cat", "elephant", "sun", "notebook"];
const longWords = words.filter(w => w.length >= 5);
console.log(longWords); // ["elephant", "notebook"]
- ラベル:
lengthで文字数をチェック
部分一致で絞る（「a」を含む単語）
const words = ["apple", "berry", "grape", "melon"];
const containsA = words.filter(w => w.includes("a"));
console.log(containsA); // ["apple", "grape"]
- ラベル:
includesは「含むかどうか」を判定
オブジェクト配列を条件で絞る（テストで70点以上）
const students = [
{ name: "Aki", score: 68 },
{ name: "Ken", score: 85 },
{ name: "Mao", score: 92 },
];
const passed = students.filter(s => s.score >= 70);
console.log(passed); // [{ name: "Ken", score: 85 }, { name: "Mao", score: 92 }]
- ラベル: オブジェクトのプロパティ（
score）で判定
インデックスを使う（偶数番目だけ）
const items = ["a", "b", "c", "d", "e"];
const evenIndexItems = items.filter((item, index) => index % 2 === 0);
console.log(evenIndexItems); // ["a", "c", "e"]
- ラベル:
filterは第2引数でインデックスを取得できる
ありがちなつまずきポイント
- true/false を返す必要がある:
returnを忘れると全部捨てられて空配列になります。
// NG例（return忘れ）
numbers.filter(n => { n >= 70 }); // いつも空配列
// OK例
numbers.filter(n => n >= 70);
- 元の配列は変わらない:
filterは新しい配列を返すので、結果を変数に入れるのを忘れない。 - 条件を複数組み合わせる:
&&と||を使う。
// 50以上80以下
numbers.filter(n => n >= 50 && n <= 80);
ひとつ上の応用
空文字や null を取り除く（「真偽値」でふるいにかける）
const mixed = ["", "hello", null, "world", undefined, 0, "ok"];
const cleaned = mixed.filter(Boolean);
console.log(cleaned); // ["hello", "world", "ok"]
- ラベル:
Booleanは「真（truthy）だけ残す」お手軽テク
連鎖（filter → map の順で使う）
const users = [
{ name: "Aki", active: true },
{ name: "Ken", active: false },
{ name: "Mao", active: true },
];
const activeNames = users
.filter(u => u.active) // アクティブだけ
.map(u => u.name); // 名前だけ取り出す
console.log(activeNames); // ["Aki", "Mao"]
- ラベル: 「絞る」→「変換する」の流れが定番
手を動かす練習問題
- 70点以上かつ偶数点のスコアだけ取り出す
const scores = [65, 70, 73, 82, 90, 57, 88];
// ここに filter を書いてみよう
const result = scores.filter(s => s >= 70 && s % 2 === 0);
console.log(result); // [70, 82, 90, 88]
- 「.js」で終わるファイル名だけを取り出す
const files = ["app.js", "style.css", "index.html", "utils.js"];
const jsFiles = files.filter(f => f.endsWith(".js"));
console.log(jsFiles); // ["app.js", "utils.js"]
- 在庫ありの商品だけの名前リストを作る（filter → map）
const products = [
{ name: "Pen", stock: 0 },
{ name: "Notebook", stock: 12 },
{ name: "Marker", stock: 5 },
];
const availableNames = products
.filter(p => p.stock > 0)
.map(p => p.name);
console.log(availableNames); // ["Notebook", "Marker"]
- 3文字以上で、かつ「o」を含む単語だけ
const words = ["go", "good", "on", "door", "cat"];
const picked = words.filter(w => w.length >= 3 && w.includes("o"));
console.log(picked); // ["good", "door"]
まとめと次の一歩
- filter は「条件に合う要素だけを取り出す」メソッド。戻り値は新しい配列。
- よく使う組み合わせ: filter（絞る）→ map（変換）→ reduce（集計）。
- 次の練習: 自分の配列を作り、「数値」「文字列」「オブジェクト」の3パターンでフィルタを試してみよう。