React初心者が学んだ.filter()の使い方と発想の転換

はじめに

Reactでフィルター機能を作っているとき、
複数条件のデータ絞り込みをどう反映すればいいのか分からず、
一度手が止まりました。
ここでは、改めて考え方を整理していきたいと思います。

詰まった点（問題）

Reactで地図アプリのフィルター機能を作っていたとき、
複数条件のデータ絞り込みをどう反映すればいいのか分からず、一度手が止まりました。

「WiFiあり」「電源あり」「声出しOK」などのボタンを押して条件を切り替えることはできても、
その条件に合うスポットだけ地図に残す方法 がイメージできませんでした。

どのタイミングで、どんなロジックを書けば「条件に合わないピンを非表示」にできるのか、苦労しました。

解決のきっかけ

調べていくうちに、配列を扱う .filter() メソッドを使えば
「条件に合わないデータを除外する」 という形で
シンプルに実現できるのではないかと気づきました。

const filtered = spots.filter((spot) => {
  if (filters.wifi && !spot.wifi) return false;
  if (filters.power && !spot.power) return false;
  return true;
});

学んだこと

• .filter() は「条件に合わないデータを除外する」だけのシンプルな考え方で十分。

• SupabaseやGoogle Mapsなど、データがどこから来ても同じ発想で応用できる。

• .filter() は一見地味だけど、Reactで「条件に応じて表示を変える」あらゆる場面に使える基本テクニック。

「条件を満たさないものを除く」という発想が理解の鍵でした。