【JavaScript】filter – 特定の条件に合致する要素だけを抽出

JavaScriptの配列操作メソッドの中で、filter()は特定の条件に合致する要素だけを抽出するために非常に便利です。今回は、filter()の基本的な使い方から注意点までをまとめていきたいと思います。

目次非表示

filter()メソッドとは？
基本的な使い方
サンプルコード
使用時の注意点
さいごに

filter()メソッドとは？

filter()メソッドは、配列の各要素に対して指定した条件をチェックし、その条件を満たす要素だけを新しい配列として返します。元の配列は変更されません。

基本的な使い方

JavaScript

// 数値の配列を定義
let numbers = [1, 2, 3, 4, 5, 6];

// 偶数のみを抽出
let evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

サンプルコード

条件に合うオブジェクトを取得する

オブジェクトの配列から特定の条件に合う要素を取得できます。

JavaScript

// ユーザー情報の配列
let users = [
    { id: 1, name: 'Alex', age: 25 },
    { id: 2, name: 'Jordan', age: 17 },
    { id: 3, name: 'Taylor', age: 35 }
];

// 18歳以上のユーザーのみ取得
let adultUsers = users.filter(user => user.age >= 18);

console.log(adultUsers);
// [object Object] 
{
  "id": 1,
  "name": "Alex",
  "age": 25
},// [object Object] 
{
  "id": 3,
  "name": "Taylor",
  "age": 35
}]

配列から特定の値を除外する

特定の値を含まない新しい配列を作成できます。

JavaScript

let words = ['cake', 'cookie', 'donut', 'chocolate'];

// 'cookie' を除外する
let filteredWords = words.filter(word => word !== 'cookie');

console.log(filteredWords); // cake, donut, chocolate

HTML要素のフィルタリング

filter()を使って、特定の条件を満たすHTML要素を取得できます。

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

JavaScript

// ボタン要素のリストを取得
let buttons = Array.from(document.querySelectorAll('button'));

// data-active 属性が true のボタンのみ取得
let activeButtons = buttons.filter(button => button.dataset.active === 'true');

console.log(activeButtons); // 条件を満たすボタン要素のみ取得

使用時の注意点

必ず新しい配列を返す

filter()は元の配列を変更せず、新しい配列を返します。元の配列を直接変更したい場合は、他のメソッドを使用する必要があります。

空の配列が返る可能性がある

条件に合致する要素がない場合、空の配列が返ります。

JavaScript

let numbers = [1, 3, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [] （空の配列）

undefinedやnullの取り扱いに注意

配列にundefinedやnullが含まれている場合、それらの値をフィルタリングする処理を追加すると安全です。

JavaScript

let data = [10, null, 20, undefined, 30];
let validData = data.filter(value => value !== null && value !== undefined);

console.log(validData); // [10, 20, 30]

アクセシビリティ

filter()を使ってHTML要素を動的に変更する場合、アクセシビリティを考慮することが重要です。

ボタンやリンクをフィルタリングするときは、aria-hiddenを適切に設定しましょう。
スクリーンリーダーに影響が出ないように、非表示にする要素はdisplay: none;ではなくaria-hidden="true" を設定しましょう。

JavaScript

// 非表示にする要素に aria-hidden を設定
let listItems = document.querySelectorAll('li');
listItems.forEach(item => {
  if (!item.textContent.includes('重要')) {
    item.setAttribute('aria-hidden', 'true');
  }
});