JSON データのフィルタリング

API から取得した JSON データを、必要な条件でフィルタリングする方法を解説します。配列メソッドの filter() を中心に、様々なフィルタリングパターンを見ていきます。

基本的なフィルタリング

filter() メソッドを使うと、条件に合う要素だけを抽出した新しい配列を作成できます。

const users = [
  { id: 1, name: "田中", age: 25, active: true },
  { id: 2, name: "山田", age: 30, active: false },
  { id: 3, name: "佐藤", age: 22, active: true },
  { id: 4, name: "鈴木", age: 35, active: true }
];

// アクティブなユーザーのみ
const activeUsers = users.filter(user => user.active);

// 25歳以上のユーザー
const adults = users.filter(user => user.age >= 25);

filter() は元の配列を変更せず、新しい配列を返します。

複数条件でのフィルタリング

論理演算子を使って、複数の条件を組み合わせることができます。

// アクティブかつ30歳未満
const youngActive = users.filter(user => user.active && user.age < 30);

// 25歳以上または非アクティブ
const filtered = users.filter(user => user.age >= 25 || !user.active);

条件が複雑な場合は、関数として切り出すと読みやすくなります。

function isTargetUser(user) {
  return user.active && user.age >= 20 && user.age < 30;
}

const targetUsers = users.filter(isTargetUser);

文字列を含むかでフィルタリング

includes() と組み合わせて、文字列の部分一致でフィルタリングできます。

const products = [
  { name: "赤りんご", price: 150 },
  { name: "青りんご", price: 120 },
  { name: "バナナ", price: 100 },
  { name: "りんごジュース", price: 200 }
];

// 「りんご」を含む商品
const appleProducts = products.filter(p => p.name.includes("りんご"));
// [{ name: "赤りんご", ... }, { name: "青りんご", ... }, { name: "りんごジュース", ... }]

大文字小文字を無視する場合は、toLowerCase() を使います。

const searchTerm = "Apple";
const results = products.filter(p => 
  p.name.toLowerCase().includes(searchTerm.toLowerCase())
);

ネストした配列のフィルタリング

配列の中に配列がある場合、some() や every() と組み合わせます。

const orders = [
  { id: 1, items: ["りんご", "バナナ"] },
  { id: 2, items: ["みかん", "ぶどう"] },
  { id: 3, items: ["りんご", "みかん"] }
];

// りんごを含む注文
const withApple = orders.filter(order => order.items.includes("りんご"));

// りんごまたはバナナを含む注文
const fruits = ["りんご", "バナナ"];
const hasFruit = orders.filter(order => 
  order.items.some(item => fruits.includes(item))
);

some()

配列の要素のうち、1つでも条件を満たせば true

every()

配列のすべての要素が条件を満たせば true

オブジェクトのフィルタリング

Object.entries() と filter() を組み合わせて、オブジェクトのプロパティをフィルタリングできます。

const scores = {
  math: 80,
  english: 45,
  science: 90,
  history: 55,
  art: 72
};

// 60点以上の科目だけを抽出
const passed = Object.fromEntries(
  Object.entries(scores).filter(([subject, score]) => score >= 60)
);

console.log(passed);
// { math: 80, science: 90, art: 72 }

find() との違い

filter() は条件に合うすべての要素を返しますが、find() は最初の1つだけを返します。

const users = [
  { id: 1, name: "田中" },
  { id: 2, name: "山田" },
  { id: 3, name: "佐藤" }
];

// filter: 条件に合う全要素（配列）
const allResults = users.filter(u => u.id >= 2);
// [{ id: 2, name: "山田" }, { id: 3, name: "佐藤" }]

// find: 最初の1要素（オブジェクト）
const firstResult = users.find(u => u.id >= 2);
// { id: 2, name: "山田" }

1件だけ取得したい場合は find() の方が効率的です。