- Day 7：filter・findで「欲しいデータだけ」を取り出す力を身につける
- filter()とは：条件に合う要素だけを集めて「新しい配列」を作る
- データの絞り込み：条件で「欲しいものだけ」を残す
- 削除処理：filterで「いらないものを除く」発想
- 検索処理：filterで「条件に合うものを全部」探す
- find()とは：条件に合う「最初の1件」を返すメソッド
- ID検索：findで「特定の1件」を取り出す
- filterとfindの違いを整理する
- ミニテンプレート：filter・findをまとめて試すコード
- Day 7のまとめ
- Day 7：filter・findで「商品検索プログラム」を作ってみる
- 商品データをオブジェクト配列で用意する
- filter()で「キーワード検索」を作る
- filter()で「価格帯検索」を作る
- filter()で「在庫ありだけ」を絞り込む
- find()で「ID検索」を作る
- filter()とfind()を組み合わせた「商品検索プログラム」テンプレート
- Day 7ミニ課題のまとめ
Day 7：filter・findで「欲しいデータだけ」を取り出す力を身につける
Day 7では、Reactでもよく使われる filter() と find() を扱います。 どちらも「配列から条件に合うものだけを取り出す」ためのメソッドで、 リスト表示・削除処理・検索処理など、実用的な場面で頻出します。
filter()とは：条件に合う要素だけを集めて「新しい配列」を作る
filter()のざっくりイメージ
filter() は、
「配列の各要素に対して条件をチェックして、 trueになったものだけ を集めた 新しい配列 を返す」
ためのメソッドです。
const numbers = [1, 2, 3, 4, 5];
// 偶数だけを取り出した新しい配列を作ります
const evenNumbers = numbers.filter((n) => {
// n が偶数なら true、奇数なら false を返します
return n % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5]（元の配列はそのまま）
filter()に渡す関数は「true/falseを返す関数」trueになった要素だけが、新しい配列に残る- 元の配列は変更されない
データの絞り込み：条件で「欲しいものだけ」を残す
例1：価格が2000円以上の商品だけを絞り込む
const products = [
{ name: "Tシャツ", price: 1000 },
{ name: "パーカー", price: 2500 },
{ name: "キャップ", price: 1500 },
];
// 価格が2000円以上の商品だけを絞り込みます
const expensiveProducts = products.filter((product) => {
return product.price >= 2000;
});
console.log(expensiveProducts);
/*
[
{ name: "パーカー", price: 2500 }
]
*/
console.log(products); // 元の配列はそのまま
ここでやっていることは、
- 各商品に対して
product.price >= 2000をチェック - 条件が
trueの商品だけを新しい配列に残す - 結果として、「高価格帯の商品一覧」ができる
Reactでは、「条件に合うデータだけを表示する」「フィルタリング機能を作る」といった場面で、このパターンがよく登場します。
例2：在庫ありの商品だけを絞り込む
const items = [
{ name: "Tシャツ", inStock: true },
{ name: "パーカー", inStock: false },
{ name: "キャップ", inStock: true },
];
// 在庫ありの商品だけを絞り込みます
const availableItems = items.filter((item) => item.inStock === true);
console.log(availableItems);
/*
[
{ name: "Tシャツ", inStock: true },
{ name: "キャップ", inStock: true },
]
*/
item.inStock === trueが条件- 在庫ありの商品だけを新しい配列として取り出せます
削除処理：filterで「いらないものを除く」発想
「残したいもの」を条件で表現する
filter() は、「削除したいもの」を直接指定するのではなく、 「残したいものの条件」を書くことで、結果的に削除を実現するという発想がポイントです。
たとえば、「IDが2の商品を削除したい」とします。
const products = [
{ id: 1, name: "Tシャツ" },
{ id: 2, name: "パーカー" },
{ id: 3, name: "キャップ" },
];
// id が 2 の商品を削除したい
const filteredProducts = products.filter((product) => {
// 「id が 2 ではないもの」を残す条件にします
return product.id !== 2;
});
console.log(filteredProducts);
/*
[
{ id: 1, name: "Tシャツ" },
{ id: 3, name: "キャップ" },
]
*/
product.id !== 2という条件で「残したいもの」を表現- 結果として、IDが2の商品だけが配列から消える
Reactのstate更新では、
「削除したいIDを受け取って、
filter()でそのID以外の要素だけを残した新しい配列を作り、 それをsetStateに渡す」
というパターンが定番です。
検索処理：filterで「条件に合うものを全部」探す
部分一致で商品名を検索する
filter() は、「条件に合うものを全部取り出す」検索処理にも使えます。
const products = [
{ name: "Tシャツ" },
{ name: "パーカー" },
{ name: "キャップ" },
{ name: "ロングTシャツ" },
];
// 「Tシャツ」を含む商品名だけを検索します
const keyword = "Tシャツ";
const matchedProducts = products.filter((product) => {
// includes は「文字列が含まれているか」を調べるメソッドです
return product.name.includes(keyword);
});
console.log(matchedProducts);
/*
[
{ name: "Tシャツ" },
{ name: "ロングTシャツ" },
]
*/
product.name.includes(keyword)が条件- キーワードを含む商品だけを新しい配列として取り出せます
検索フォームと組み合わせると、「入力されたキーワードで商品一覧を絞り込む」といった機能を簡単に作れます。
find()とは：条件に合う「最初の1件」を返すメソッド
find()のざっくりイメージ
find() は、
「配列の中から、条件に合う 最初の1件だけ を返す」
ためのメソッドです。
const numbers = [1, 2, 3, 4, 5];
// 最初に偶数になった要素を探します
const firstEven = numbers.find((n) => {
return n % 2 === 0;
});
console.log(firstEven); // 2
- 条件に合う要素が複数あっても、「最初の1件」だけが返される
- 見つからなかった場合は
undefinedが返る
ID検索：findで「特定の1件」を取り出す
例：IDで商品を検索する
find() が特に力を発揮するのが、ID検索です。 「IDが3の商品を1件だけ取り出したい」といった場面で使います。
const products = [
{ id: 1, name: "Tシャツ", price: 1000 },
{ id: 2, name: "パーカー", price: 2500 },
{ id: 3, name: "キャップ", price: 1500 },
];
// id が 3 の商品を探します
const targetId = 3;
const foundProduct = products.find((product) => {
return product.id === targetId;
});
console.log(foundProduct);
/*
{ id: 3, name: "キャップ", price: 1500 }
*/
product.id === targetIdが条件- 条件に合う最初の1件だけが返される
もし見つからなかった場合は undefined になるので、その場合の処理も考えておくと安心です。
if (foundProduct) {
console.log("見つかった商品:", foundProduct.name);
} else {
console.log("該当する商品が見つかりませんでした");
}
Reactでは、「詳細画面で特定IDの商品を表示する」「クリックされたアイテムの情報を取り出す」といった場面で、find() がよく使われます。
filterとfindの違いを整理する
ざっくり比較
filter()- 条件に合うものを 全部 集めて、新しい配列として返す
- 結果は「配列」
- 見つからなかった場合は
[]（空配列）
find()- 条件に合うもののうち、最初の1件だけ を返す
- 結果は「1つの値（オブジェクトなど）」
- 見つからなかった場合は
undefined
使い分けのイメージ
- 「条件に合う商品一覧を表示したい」 →
filter() - 「IDが3の商品を1件だけ取り出したい」 →
find()
この使い分けが自然にできるようになると、配列操作の幅がぐっと広がります。
ミニテンプレート：filter・findをまとめて試すコード
最後に、Day 7の内容をまとめて試せるテンプレートコードを用意しました。
// --- Day 7 filter・findミニテンプレート ---
// 商品一覧（オブジェクト配列）
const products = [
{ id: 1, name: "Tシャツ", price: 1000, inStock: true },
{ id: 2, name: "パーカー", price: 2500, inStock: false },
{ id: 3, name: "キャップ", price: 1500, inStock: true },
{ id: 4, name: "ロングTシャツ", price: 3000, inStock: true },
];
console.log("元の商品一覧:", products);
// 1. filter()で「価格が2000円以上の商品」を絞り込む
const expensiveProducts = products.filter((product) => product.price >= 2000);
console.log("高価格帯の商品一覧:", expensiveProducts);
// 2. filter()で「在庫ありの商品だけ」を絞り込む
const availableProducts = products.filter((product) => product.inStock === true);
console.log("在庫ありの商品一覧:", availableProducts);
// 3. filter()で「削除処理」を表現する（idが2の商品を削除）
const withoutId2 = products.filter((product) => product.id !== 2);
console.log("id=2 を削除した商品一覧:", withoutId2);
// 4. filter()で「キーワード検索」（名前に「Tシャツ」を含む商品）
const keyword = "Tシャツ";
const matchedProducts = products.filter((product) =>
product.name.includes(keyword)
);
console.log("「Tシャツ」を含む商品一覧:", matchedProducts);
// 5. find()で「ID検索」（idが3の商品を1件だけ取り出す）
const targetId = 3;
const foundProduct = products.find((product) => product.id === targetId);
console.log("id=3 の商品:", foundProduct);
// 見つからなかった場合のチェック例
const notFound = products.find((product) => product.id === 999);
if (!notFound) {
console.log("id=999 の商品は見つかりませんでした");
}
このテンプレートを少しずつ書き換えながら、
- 条件を変えてみる（価格、在庫、名前など）
filter()とfind()の結果がどう違うかを確認する- 自分の好きなデータ（映画、ゲーム、本など）で同じことを試してみる
といった練習をしていくと、配列の絞り込み・検索の感覚が自然と身についていきます。
Day 7のまとめ
- filter() 条件に合う要素を「全部」集めて、新しい配列として返します。絞り込み・削除・検索などに使えます。
- データの絞り込み 価格・在庫・名前などの条件で「欲しいものだけ」を残す処理を、
filter()でシンプルに書けます。 - 削除処理 「残したいものの条件」を
filter()で表現することで、結果的に特定の要素を削除した配列を作れます。 - 検索処理 部分一致検索などで、条件に合うものを全部取り出したいときは
filter()が便利です。 - find() 条件に合う「最初の1件だけ」を返すメソッドで、ID検索など「特定の1件」を取り出したい場面に向いています。
このDay 7の内容は、Reactで「リスト表示＋検索＋削除」といった機能を作るときの土台になります。
Day 7：filter・findで「商品検索プログラム」を作ってみる
Day 7のミニ課題は、「商品検索プログラムを作る」ことです。 ここでは、filter() と find() を使って、
- キーワードで商品名を検索する
- 価格帯で商品を絞り込む
- IDで特定の商品を1件だけ探す
といった、実用的な検索処理をステップバイステップで組み立てていきます。
商品データをオブジェクト配列で用意する
まずは、検索対象となる商品データを オブジェクト配列 で用意します。 1つ1つの商品をオブジェクトとして表現し、それらを配列に並べて「商品一覧」として扱います。
// 商品一覧（オブジェクト配列）
// それぞれのオブジェクトが「1つの商品」を表します
const products = [
{ id: 1, name: "Tシャツ", price: 1000, inStock: true },
{ id: 2, name: "パーカー", price: 2500, inStock: false },
{ id: 3, name: "キャップ", price: 1500, inStock: true },
{ id: 4, name: "ロングTシャツ", price: 3000, inStock: true },
];
console.log("元の商品一覧:", products);
id：商品を一意に識別するための番号name：商品名price：価格inStock：在庫があるかどうか（true/false）
この products をもとに、filter() と find() を使った検索処理を作っていきます。
filter()で「キーワード検索」を作る
キーワードを含む商品名だけを絞り込む
まずは、商品名にキーワードが含まれているかどうかで絞り込む キーワード検索 を作ります。 ここでは、文字列の includes() メソッドを使って、「部分一致検索」を行います。
// キーワードで商品名を検索する関数
const searchByKeyword = (keyword) => {
// filter()で「名前にキーワードを含む商品だけ」を絞り込みます
const matchedProducts = products.filter((product) => {
// product.name.includes(keyword) が true なら、その商品は残ります
return product.name.includes(keyword);
});
return matchedProducts;
};
// 実行例
const result1 = searchByKeyword("Tシャツ");
console.log("「Tシャツ」を含む商品:", result1);
const result2 = searchByKeyword("パー");
console.log("「パー」を含む商品:", result2);
searchByKeyword関数は、キーワードを受け取ってfilter()を使い、 「名前にキーワードを含む商品だけ」を集めた新しい配列を返します。- 見つからなかった場合は、空配列
[]が返ります。
Reactで検索フォームを作るときも、このような「キーワード → filter()」の流れがそのまま使えます。
filter()で「価格帯検索」を作る
最低価格・最高価格で絞り込む
次に、「価格がこの範囲のものだけ欲しい」という 価格帯検索 を作ります。 最低価格と最高価格を受け取って、その範囲に入っている商品だけを filter() で絞り込みます。
// 価格帯で商品を検索する関数
const searchByPriceRange = (minPrice, maxPrice) => {
const matchedProducts = products.filter((product) => {
// price が minPrice 以上、かつ maxPrice 以下なら残します
return product.price >= minPrice && product.price <= maxPrice;
});
return matchedProducts;
};
// 実行例
const result3 = searchByPriceRange(1000, 2000);
console.log("1000〜2000円の商品:", result3);
const result4 = searchByPriceRange(2000, 9999);
console.log("2000円以上の商品:", result4);
product.price >= minPrice && product.price <= maxPriceが条件- 条件に合う商品だけが新しい配列に残ります。
このような「数値条件での絞り込み」は、価格だけでなく、 「評価」「在庫数」「ポイント」などにも応用できます。
filter()で「在庫ありだけ」を絞り込む
在庫フラグで絞り込み
在庫がある商品だけを表示したい、という場面もよくあります。 その場合は、inStock プロパティを条件にして filter() を使います。
// 在庫ありの商品だけを絞り込む関数
const searchAvailableProducts = () => {
const matchedProducts = products.filter((product) => {
return product.inStock === true;
});
return matchedProducts;
};
// 実行例
const result5 = searchAvailableProducts();
console.log("在庫ありの商品:", result5);
inStock === trueが条件- 在庫ありの商品だけが新しい配列として返されます。
Reactで「在庫ありのみ表示」「売り切れをグレーアウト」といったUIを作るときの土台になります。
find()で「ID検索」を作る
特定IDの商品を1件だけ取り出す
次は、find() を使って ID検索 を作ります。 「IDが3の商品を1件だけ取り出したい」といった場面で使う関数です。
// IDで商品を検索する関数
const findById = (id) => {
const foundProduct = products.find((product) => {
return product.id === id;
});
return foundProduct; // 見つからなければ undefined が返ります
};
// 実行例
const result6 = findById(3);
console.log("id=3 の商品:", result6);
const result7 = findById(999); // 存在しないID
console.log("id=999 の商品:", result7); // undefined
product.id === idが条件- 条件に合う最初の1件だけが返されます。
- 見つからなかった場合は
undefinedになるので、その場合の処理も考えておくと安心です。
const target = findById(999);
if (target) {
console.log("見つかった商品:", target.name);
} else {
console.log("該当する商品が見つかりませんでした");
}
Reactでは、「詳細ページで特定IDの商品を表示する」「クリックされた商品を特定する」といった場面で、このパターンがよく使われます。
filter()とfind()を組み合わせた「商品検索プログラム」テンプレート
ここまでの内容をまとめて、 キーワード検索・価格帯検索・在庫検索・ID検索 をひとつにまとめた「商品検索プログラム」のテンプレートを用意しました。
// --- Day 7 ミニ課題：商品検索プログラム ---
// 商品一覧（オブジェクト配列）
const products = [
{ id: 1, name: "Tシャツ", price: 1000, inStock: true },
{ id: 2, name: "パーカー", price: 2500, inStock: false },
{ id: 3, name: "キャップ", price: 1500, inStock: true },
{ id: 4, name: "ロングTシャツ", price: 3000, inStock: true },
];
console.log("元の商品一覧:", products);
// 1. キーワード検索（商品名にキーワードを含むもの）
const searchByKeyword = (keyword) => {
const matchedProducts = products.filter((product) => {
// includes は「文字列が含まれているか」を調べるメソッドです
return product.name.includes(keyword);
});
return matchedProducts;
};
// 2. 価格帯検索（min〜maxの範囲に入る商品）
const searchByPriceRange = (minPrice, maxPrice) => {
const matchedProducts = products.filter((product) => {
return product.price >= minPrice && product.price <= maxPrice;
});
return matchedProducts;
};
// 3. 在庫あり検索
const searchAvailableProducts = () => {
const matchedProducts = products.filter((product) => product.inStock === true);
return matchedProducts;
};
// 4. ID検索（findで1件だけ取り出す）
const findById = (id) => {
const foundProduct = products.find((product) => product.id === id);
return foundProduct; // 見つからなければ undefined
};
// --- 実行例いろいろ ---
// キーワード検索
console.log("キーワード「Tシャツ」:", searchByKeyword("Tシャツ"));
console.log("キーワード「パー」:", searchByKeyword("パー"));
// 価格帯検索
console.log("1000〜2000円:", searchByPriceRange(1000, 2000));
console.log("2000〜9999円:", searchByPriceRange(2000, 9999));
// 在庫あり検索
console.log("在庫あり:", searchAvailableProducts());
// ID検索
console.log("id=3:", findById(3));
console.log("id=999:", findById(999)); // undefined
このテンプレートをベースにして、
- 商品データを自分の好きなものに変えてみる（本、ゲーム、映画など）
- 条件を変えて、どんな結果になるか試してみる
- 「在庫あり＋価格帯」など、複数条件を組み合わせてみる
といった小さなアレンジを重ねていくと、filter() と find() の使い方が自然と身についていきます。
Day 7ミニ課題のまとめ
- filter() 条件に合う要素を「全部」集めて、新しい配列として返します。 キーワード検索・価格帯検索・在庫検索・削除処理などに向いています。
- データの絞り込み 「残したいものの条件」を書くことで、結果的に欲しいデータだけを残すことができます。
- 検索処理 部分一致検索や複数条件の検索など、「条件に合うものを全部取り出す」場面で
filter()が活躍します。 - find() 条件に合う「最初の1件だけ」を返すメソッドで、ID検索など「特定の1件」を取り出したい場面に向いています。
この「商品検索プログラム」は、Reactで「検索フォーム＋結果一覧」を作るときの考え方とほぼ同じです。