JavaScriptのfilterメソッドで条件に合う要素を抽出する方法

1. filterメソッドとは？ 条件に合う要素だけを選ぶ仕組み

1. filterメソッドとは？ 条件に合う要素だけを選ぶ仕組み

filterメソッドは、配列の中の要素を一つずつ調べて、「条件に合っているかどうか」を判断します。そして条件に合った要素だけを集めて、新しい配列として返してくれます。

例えば、フルーツの配列から「バナナだけを集める」といった使い方ができます。

let fruits = ["りんご", "バナナ", "みかん", "バナナ"];
let bananas = fruits.filter(function(item) {
  return item === "バナナ";
});
console.log(bananas);  // ["バナナ", "バナナ"]

["バナナ", "バナナ"]

このようにfilterは、新しい配列を作るので元の配列は変わりません。

2. filterの仕組み：関数を使って条件をチェック

2. filterの仕組み：関数を使って条件をチェック

filterに渡す関数（「コールバック関数」と呼びます）は、配列の要素を一つずつ受け取って「この要素は条件を満たしているか？」をtrueかfalseで返します。

trueの場合は新しい配列に入れて、falseなら入れません。

例えば「5より大きい数字だけを集める」場合はこう書きます。

let numbers = [1, 3, 7, 10, 5];
let bigNumbers = numbers.filter(function(num) {
  return num > 5;
});
console.log(bigNumbers);  // [7, 10]

[7, 10]

この場合、num > 5が条件です。

3. 短く書く方法：アロー関数でさらにスッキリ

3. 短く書く方法：アロー関数でさらにスッキリ

JavaScriptでは、条件を書く関数をもっと短く書ける「アロー関数」という書き方があります。

let numbers = [1, 3, 7, 10, 5];
let bigNumbers = numbers.filter(num => num > 5);
console.log(bigNumbers);  // [7, 10]

コードが短くて見やすくなるので、慣れたらぜひ使いましょう。

4. filterでよくある使い方の例

4. filterでよくある使い方の例

以下は、filterを使った他の例です。

• 文字列の長さが5文字以上のものだけ集める
• 配列の中の偶数だけ抽出する
• オブジェクトの配列から特定の条件を満たすものだけ選ぶ

// 文字列の長さが5文字以上
let words = ["りんご", "バナナ", "みかん", "メロン"];
let longWords = words.filter(word => word.length >= 5);
console.log(longWords);  // ["バナナ", "メロン"]

// 偶数だけ抽出
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4, 6]

// オブジェクト配列で年齢が20以上の人だけ
let people = [
  {name: "太郎", age: 18},
  {name: "花子", age: 22},
  {name: "次郎", age: 20}
];
let adults = people.filter(person => person.age >= 20);
console.log(adults);  
// [{name: "花子", age: 22}, {name: "次郎", age: 20}]

5. filterメソッドのポイントと注意

5. filterメソッドのポイントと注意

filterは元の配列を変更しません。新しい配列を返すので、元のデータは安心です。

また、条件を考える関数を書くのが少し難しく感じるかもしれませんが、慣れるととても便利でパワフルな方法です。

使うときは「どんな条件で選びたいか？」をまず考え、その条件をfilterに渡す関数として書くことが大切です。

まとめ

まとめ

ここまでJavaScriptのfilterメソッドについて詳しく解説してきましたが、いかがでしたでしょうか。プログラミングにおいて、膨大なデータの中から必要な情報だけを抽出する作業は日常茶飯事です。例えば、ショッピングサイトで「在庫がある商品だけを表示する」機能や、SNSで「特定のキーワードを含む投稿を非表示にする」といった処理も、内部的にはこのfilterのような仕組みが動いています。

filterメソッドを使いこなすための重要ポイント

filterメソッドをマスターするために、覚えておきたい特徴を改めて整理しましょう。まず最も重要なのは、このメソッドが「破壊的ではない」という点です。元の配列を書き換えることなく、条件に合致した要素だけで構成される「新しい配列」を生成します。これにより、元のデータを保持したまま、用途に応じたデータの加工が可能になります。

また、実務レベルでは単なる数値や文字列の配列だけでなく、「オブジェクトの配列」を扱う場面が非常に多いです。ユーザー情報、商品データ、投稿記事といった複雑なデータ構造から、特定のステータスを持つものだけを取り出す際にfilterは真価を発揮します。

さらに応用的な実例：複数条件でのフィルタリング

実際の開発現場では、一つの条件だけでなく「かつ（AND）」や「または（OR）」といった複数の条件を組み合わせて抽出することもあります。JavaScriptの論理演算子（&&や||）を使うことで、より高度なデータ抽出が可能になります。

// 商品リストから「カテゴリが家電」かつ「価格が50000円以下」のものを抽出
const products = [
    { name: "冷蔵庫", category: "家電", price: 80000 },
    { name: "炊飯器", category: "家電", price: 15000 },
    { name: "掃除機", category: "家電", price: 30000 },
    { name: "ノート", category: "文具", price: 200 }
];

const affordableAppliances = products.filter(item => {
    return item.category === "家電" && item.price <= 50000;
});

console.log(affordableAppliances);

[
  { "name": "炊飯器", "category": "家電", "price": 15000 },
  { "name": "掃除機", "category": "家電", "price": 30000 }
]

TypeScriptでの型安全なfilter利用

モダンなWeb開発ではTypeScriptが主流となっています。TypeScriptでfilterを使う場合、型定義をしっかり行うことで、抽出後の配列に含まれる要素の型を保証することができます。

interface User {
    id: number;
    name: string;
    isActive: boolean;
}

const users: User[] = [
    { id: 1, name: "田中", isActive: true },
    { id: 2, name: "佐藤", isActive: false },
    { id: 3, name: "鈴木", isActive: true }
];

// アクティブなユーザーのみを抽出
const activeUsers: User[] = users.filter((user: User) => user.isActive);

HTML要素のフィルタリングへの応用

JavaScriptはブラウザ上で動く言語ですから、DOM操作（HTMLの操作）とも非常に相性が良いです。例えば、特定のクラス名を持つ要素のテキスト内容を判定して処理を分けるといった使い方も考えられます。

<ul id="itemList">
    <li class="item" data-status="sale">セール品A</li>
    <li class="item" data-status="normal">通常品B</li>
    <li class="item" data-status="sale">セール品C</li>
</ul>

上記のようなHTML構造がある場合、JavaScript側で要素を取得し、Array.from()などで配列に変換してからfilterを適用することで、特定のステータスを持つ要素だけを抽出して操作することができます。

よくある間違いとデバッグのコツ

初心者が陥りやすいミスとして、「returnを書き忘れる」ことがあります。アロー関数の省略形（波括弧なし）であれば問題ありませんが、波括弧 {} を使った場合は、明示的に return を書かないと、結果がすべて undefined（false扱い）になり、空の配列が返ってきてしまいます。

// 間違った例：returnがないため空配列になる
const numbers = [10, 20, 30];
const filtered = numbers.filter(n => {
    n > 15; // ここで return が必要！
});
console.log(filtered); // []

もし思い通りの結果が得られない場合は、コールバック関数の中で console.log() を使い、各要素がどのような判定を受けているかを確認するのが近道です。