モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 7：filter・find

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 7：filter・find 前半 ― 「必要なものだけを取り出す」感覚を身につける
  2. filter()とは何か ― 「条件に合うものだけを残す」メソッド
    1. 配列を“間引く”ための道具
  3. filter()の基本構文とテンプレート
    1. 基本構文
    2. 1行Arrow Functionとの組み合わせ
  4. データの絞り込み：具体例で感覚をつかむ
    1. 例1：特定の値以上のものだけを残す
    2. 例2：文字列の絞り込み（特定の文字を含む）
  5. 削除処理としてのfilter ― 「残したいものだけを残す」
    1. 「削除する」のではなく「残したいものを選ぶ」
  6. 検索処理としてのfilter ― 「条件に合うものだけを一覧にする」
    1. 部分一致検索の例
  7. find()への橋渡し ― 「1件だけ欲しいとき」はどうするか
    1. filter()は「複数件」、find()は「1件」
  8. DAY 7：filter・find 前半のまとめ
  9. DAY 7：filter・find 中盤 ― 「filterで一覧」「findで1件」をはっきり区別する
  10. filter()の復習と「削除処理・検索処理」の整理
    1. filterで「残したいものだけを残す」削除処理
    2. filterで「一覧を絞り込む」検索処理
  11. find()とは何か ― 「条件に合う最初の1件」を取り出す
    1. filterとfindの違いを一言で言うと
    2. findの基本構文
  12. ID検索としてのfind ― オブジェクト配列との組み合わせ
    1. 典型パターン：IDで1件だけ探す
    2. filterでID検索をした場合との違い
  13. 検索処理の設計：filterで一覧、findで詳細
    1. 一覧表示用の検索（filter）
    2. 詳細表示用の検索（find）
  14. セキュリティ・安全性の視点から見たfilter・find
    1. 「見つからない場合」を必ず意識する
    2. filter・findは「元の配列を壊さない」
  15. DAY 7：filter・find 中盤のまとめ
  16. DAY 7：filter・find 後半 ― Reactの「削除・検索・詳細表示」を支える実践パターン
  17. filterで「削除処理」をReactの状態管理と結びつける
    1. 削除処理の基本発想 ― 「残したいものだけを残す」
  18. filterで「検索処理」をUIと結びつける
    1. 検索ボックスとfilterの組み合わせ
  19. findで「ID検索」を詳細表示と結びつける
    1. ID検索で1件だけの詳細を表示する
  20. セキュリティ・安全性の視点から見たfilter・find＋React
    1. 「見つからない場合」を必ずハンドリングする
    2. 元の配列を壊さないことの意味
  21. DAY 7：filter・find 後半のまとめ
  22. DAY 7：filter・find ミニ課題 ― 商品検索プログラムを作る
  23. 商品データをオブジェクト配列で用意する
    1. 商品一覧の基本形
  24. キーワード検索：filter()で「一覧を絞り込む」
    1. ステップ1：検索キーワードを決める
    2. ステップ2：filter()で商品名にキーワードを含むものだけを残す
    3. 1行Arrow Functionで書くテンプレート
  25. ID検索：find()で「1件だけ取り出す」
    1. ステップ1：探したい商品のIDを決める
    2. ステップ2：find()でIDが一致する商品を1件だけ探す
    3. filterとの違いを意識する
  26. ミニ課題の完成形：キーワード検索＋ID検索をまとめる
    1. コンソールベースの商品検索プログラム
  27. React版のイメージ：検索UIとfilter・findの組み合わせ
    1. キーワード検索UIのイメージ
  28. セキュリティ・安全性の視点から見る商品検索プログラム
    1. 外部入力に依存する処理では「見つからない場合」を必ず考える
    2. 元の配列を壊さないことの意味
  29. ミニ課題のまとめ ― filter・findで「検索の感覚」を身につける

DAY 7：filter・find 前半 ― 「必要なものだけを取り出す」感覚を身につける

DAY 7では、Reactでも必須級の filter() と find() を扱います。 前半では、特に filter()を使った「データの絞り込み」 と、 それが「削除処理」や「検索処理」とどうつながるかを、初心者向けにかみ砕いて説明していきます。

DAY 7全体は次の3回構成を想定しています。

  • 前半：filter()／データの絞り込み／削除処理・検索処理の入り口
  • 中盤：find()／ID検索／オブジェクト配列との組み合わせ
  • 後半：Reactの状態管理とfilter・findの実践（削除ボタン・詳細表示など）

ここでは、そのうち 前半 にフォーカスして進めていきます。

filter()とは何か ― 「条件に合うものだけを残す」メソッド

配列を“間引く”ための道具

filter()は、「配列の中から、条件に合う要素だけを残して、新しい配列を作る」 メソッドです。

  • 元の配列：入力
  • 条件（true/falseを返す関数）：フィルター
  • 新しい配列：条件に合う要素だけを集めた出力

というイメージで捉えると分かりやすいです。

まずは、シンプルな数値の例から見てみます。

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((n) => {
  return n % 2 === 0;
});

console.log(evenNumbers); // [2, 4]
console.log(numbers);     // [1, 2, 3, 4, 5]
JavaScript

ここで起きていることをステップで整理すると、

  1. numbers は [1, 2, 3, 4, 5] という配列です。
  2. numbers.filter((n) => { return n % 2 === 0; }) を呼び出します。
  3. filter()は、各要素 n に対して順番に処理を行います。
    • 1 % 2 === 0 → false → 1は「残さない」
    • 2 % 2 === 0 → true → 2は「残す」
    • 3 % 2 === 0 → false → 3は「残さない」
    • 4 % 2 === 0 → true → 4は「残す」
    • 5 % 2 === 0 → false → 5は「残さない」
  4. 「残す」と判定された要素だけを集めて、新しい配列 [2, 4] を返します。
  5. 元の numbers は一切変更されません。

重要ポイント：

  • filter()は「条件に合うものだけを残す」メソッドです。
  • 元の配列を壊さずに、新しい配列を返します。

filter()の基本構文とテンプレート

基本構文

filter()の基本構文は次のようになります。

const 新しい配列 = 元の配列.filter((要素) => {
  // 要素を残すかどうか（true/false）を返す
  return 条件式;
});
JavaScript
  • 条件式 が true のとき → 要素は「残す」
  • 条件式 が false のとき → 要素は「残さない」

1行Arrow Functionとの組み合わせ

filter()も、map()と同じように Arrow Functionと組み合わせて1行で書くことが多いです。

const evenNumbers = numbers.filter((n) => n % 2 === 0);
JavaScript
  • {} と return を省略し、条件式だけを書いています。
  • 条件式の結果（true/false）が、そのまま戻り値になります。

Reactのコードでは、このような 「filter()＋1行Arrow Function」 の形が頻繁に登場します。

データの絞り込み：具体例で感覚をつかむ

例1：特定の値以上のものだけを残す

const prices = [500, 1200, 3000, 800];

const expensive = prices.filter((price) => price >= 1000);

console.log(expensive); // [1200, 3000]
JavaScript
  • 条件：price >= 1000
  • 1000円以上の商品だけを残しています。

このように、「条件に合うものだけを残す」という操作は、 検索・絞り込み・フィルタリングなど、UIでもよく使われるパターンです。

例2：文字列の絞り込み（特定の文字を含む）

const names = ['佐藤', '鈴木', '田中', '佐々木'];

const sNames = names.filter((name) => name.startsWith('佐'));

console.log(sNames); // ['佐藤', '佐々木']
JavaScript
  • 条件：name.startsWith('佐')
  • 「佐」で始まる名前だけを残しています。

Reactで「検索ボックスに入力された文字を含むものだけ表示する」といったUIを作るとき、 このような文字列の絞り込みがよく使われます。

削除処理としてのfilter ― 「残したいものだけを残す」

「削除する」のではなく「残したいものを選ぶ」

filter()は、「削除処理」としてもよく使われます。 ただし、発想としては 「削除したいものを消す」ではなく「残したいものだけを残す」 です。

例として、「IDが2の商品を削除したい」というケースを考えます。

const products = [
  { id: 1, name: 'Tシャツ' },
  { id: 2, name: 'ジーンズ' },
  { id: 3, name: 'スニーカー' },
];

const withoutJeans = products.filter((product) => product.id !== 2);

console.log(withoutJeans);
/*
[
  { id: 1, name: 'Tシャツ' },
  { id: 3, name: 'スニーカー' },
]
*/
JavaScript

ここでのポイントは、

  • 条件：product.id !== 2（IDが2ではないものだけを残す）
  • 結果として、「IDが2のジーンズだけが消えた配列」が得られる

ということです。

Reactの状態管理では、

  • 元の配列を直接書き換えず、
  • filter()で「残したい要素だけを集めた新しい配列」を作り、
  • それを新しい状態としてセットする

というスタイルが基本になります。

検索処理としてのfilter ― 「条件に合うものだけを一覧にする」

部分一致検索の例

「検索処理」としてのfilter()も、非常に分かりやすいです。 例えば、「商品名に『T』が含まれるものだけを表示したい」という場合を考えます。

const products = [
  { id: 1, name: 'Tシャツ' },
  { id: 2, name: 'ジーンズ' },
  { id: 3, name: 'スニーカー' },
];

const keyword = 'T';

const matched = products.filter((product) => product.name.includes(keyword));

console.log(matched);
/*
[
  { id: 1, name: 'Tシャツ' },
]
*/
JavaScript
  • 条件：product.name.includes(keyword)
  • キーワードを含む商品だけを残しています。

Reactで「検索ボックスに入力されたキーワードに応じて表示を絞り込む」UIを作るとき、 このようなfilter()の使い方がそのまま役立ちます。

find()への橋渡し ― 「1件だけ欲しいとき」はどうするか

filter()は「複数件」、find()は「1件」

前半では主にfilter()を扱いましたが、 学習項目にある find() は、「条件に合うものを1件だけ取り出したいとき」に使うメソッドです。

ざっくりとした違いは次のとおりです。

  • filter() → 条件に合うものを すべて 集めて、新しい配列を返す
  • find() → 条件に合うものを 最初の1件だけ 返す（見つからなければundefined）

例：IDで検索するイメージだけ、前半の最後に軽く触れておきます。

const products = [
  { id: 1, name: 'Tシャツ' },
  { id: 2, name: 'ジーンズ' },
  { id: 3, name: 'スニーカー' },
];

const target = products.find((product) => product.id === 2);

console.log(target);
// { id: 2, name: 'ジーンズ' }
JavaScript

中盤では、このfind()を「ID検索」として本格的に扱い、 オブジェクト配列との組み合わせを深掘りしていきます。

DAY 7：filter・find 前半のまとめ

前半では、

  • filter()は「条件に合う要素だけを残して、新しい配列を作る」メソッドであること
  • 元の配列を壊さずに、新しい配列が返ってくること
  • 数値・文字列・オブジェクト配列に対して、絞り込み処理を自然に書けること
  • 削除処理として「残したいものだけを残す」スタイルが、Reactの状態管理と相性が良いこと
  • 検索処理として「条件に合うものだけを一覧にする」場面でfilter()が役立つこと
  • filter()が「複数件」、find()が「1件」を扱うメソッドであること（ID検索への橋渡し）

を確認しました。

この土台の上に、中盤では find()を使ったID検索や、オブジェクト配列との組み合わせ を、 後半では Reactコンポーネント内での削除ボタン・検索UI・詳細表示などの実践的なパターン を扱っていくことで、 filter・findが「Reactでは必須級」と言われる理由が、より具体的に見えてくるはずです。

DAY 7：filter・find 中盤 ― 「filterで一覧」「findで1件」をはっきり区別する

DAY 7の中盤では、前半で学んだ filter()による絞り込み・削除・検索 をもう一歩深掘りしつつ、 新しく登場する find()による「1件だけの検索」 を丁寧に整理していきます。

ここでのねらいは、

  • 「一覧を絞り込みたいときはfilter()」
  • 「特定の1件を取り出したいときはfind()」

という役割分担を、オブジェクト配列の具体例を通して、はっきり体に染み込ませることです。

filter()の復習と「削除処理・検索処理」の整理

filterで「残したいものだけを残す」削除処理

前半で扱ったように、filter()は「削除処理」としてもよく使われます。 ただし発想としては、「削除したいものを消す」ではなく「残したいものだけを残す」 です。

const products = [
  { id: 1, name: 'Tシャツ' },
  { id: 2, name: 'ジーンズ' },
  { id: 3, name: 'スニーカー' },
];

const withoutJeans = products.filter((product) => product.id !== 2);

console.log(withoutJeans);
/*
[
  { id: 1, name: 'Tシャツ' },
  { id: 3, name: 'スニーカー' },
]
*/
JavaScript
  • 条件：product.id !== 2（IDが2ではないものだけを残す）
  • 結果として、「IDが2の商品だけが消えた新しい配列」が得られます。
  • 元の products は変更されません。

Reactの状態管理では、

  • 元の配列を直接書き換えず、
  • filter()で新しい配列を作り、
  • それを新しい状態としてセットする

というスタイルが基本になります。

filterで「一覧を絞り込む」検索処理

検索処理としてのfilter()も、非常に分かりやすいです。

const products = [
  { id: 1, name: 'Tシャツ' },
  { id: 2, name: 'ジーンズ' },
  { id: 3, name: 'スニーカー' },
];

const keyword = 'T';

const matched = products.filter((product) => product.name.includes(keyword));

console.log(matched);
/*
[
  { id: 1, name: 'Tシャツ' },
]
*/
JavaScript
  • 条件：product.name.includes(keyword)
  • キーワードを含む商品だけを残しています。
  • 「検索結果一覧」を作るイメージです。

ここまでの整理：

  • filter()は「条件に合うものを複数件集めて一覧にする」メソッドです。
  • 削除処理も検索処理も、「残したいものだけを残す」という同じ発想で書けます。

find()とは何か ― 「条件に合う最初の1件」を取り出す

filterとfindの違いを一言で言うと

find()は、「条件に合うものを1件だけ取り出したいとき」に使うメソッドです。

ざっくりとした違いは次のとおりです。

  • filter() → 条件に合うものを すべて 集めて、新しい配列を返す
  • find() → 条件に合うものを 最初の1件だけ 返す（見つからなければundefined）

findの基本構文

find()の基本構文は次のようになります。

const 見つかった要素 = 元の配列.find((要素) => {
  // 条件に合うかどうか（true/false）を返す
  return 条件式;
});
JavaScript
  • 条件式が true になった最初の要素を返します。
  • 条件に合う要素が1つもなければ、undefined が返ります。

ID検索としてのfind ― オブジェクト配列との組み合わせ

典型パターン：IDで1件だけ探す

ReactやWebアプリでは、「IDで1件だけ探す」という処理が非常によく登場します。 ここでfind()が活躍します。

const products = [
  { id: 1, name: 'Tシャツ', price: 1200 },
  { id: 2, name: 'ジーンズ', price: 4800 },
  { id: 3, name: 'スニーカー', price: 6800 },
];

const targetId = 2;

const targetProduct = products.find((product) => product.id === targetId);

console.log(targetProduct);
// { id: 2, name: 'ジーンズ', price: 4800 }
JavaScript

ここで起きていることをステップで整理すると、

  1. products.find((product) => product.id === targetId) を呼び出します。
  2. find()は、products の各要素（商品オブジェクト）に対して順番に処理を行います。
  3. product.id === targetId が true になった瞬間、その商品オブジェクトを返します。
  4. 以降の要素はチェックされません（最初の1件だけが対象）。
  5. 見つからなければ、targetProduct は undefined になります。

重要ポイント：

  • find()は「1件だけ欲しいとき」に使うメソッドです。
  • 特に「ID検索」との相性が抜群です。

filterでID検索をした場合との違い

同じことをfilter()で書くとどうなるかも見ておきます。

const result = products.filter((product) => product.id === targetId);

console.log(result);
// [{ id: 2, name: 'ジーンズ', price: 4800 }]
JavaScript
  • result は「配列」です（1件だけでも配列）。
  • find()は「オブジェクトそのもの」を返します（配列ではない）。

違いの整理：

  • filter() → 「条件に合うものの一覧」が欲しいとき
  • find() → 「条件に合うものの1件だけ」が欲しいとき

Reactで「詳細画面を表示する」「モーダルに1件分の情報を出す」といった場面では、 find()で1件だけ取り出すほうが自然です。

検索処理の設計：filterで一覧、findで詳細

一覧表示用の検索（filter）

検索ボックスに入力されたキーワードに応じて、 「一覧を絞り込む」処理はfilter()で書くのが基本です。

const keyword = 'T';

const matchedProducts = products.filter((product) =>
  product.name.includes(keyword)
);

console.log(matchedProducts);
/*
[
  { id: 1, name: 'Tシャツ', price: 1200 },
]
*/
JavaScript
  • 「検索結果一覧」を作るイメージです。
  • Reactでは、この配列をmap()でJSXに変換して表示します。

詳細表示用の検索（find）

一方で、「特定の商品だけの詳細情報を表示したい」といった場面では、 find()で1件だけ取り出すほうが自然です。

const targetId = 3;

const productDetail = products.find((product) => product.id === targetId);

if (productDetail) {
  console.log(`${productDetail.name}：${productDetail.price}円`);
} else {
  console.log('商品が見つかりませんでした');
}
JavaScript
  • productDetail が null や undefined ではないかをチェックすることで、 「見つからなかった場合」の処理も書けます。
  • Reactでは、このオブジェクトをそのまま詳細画面のコンポーネントに渡すことが多いです。

セキュリティ・安全性の視点から見たfilter・find

「見つからない場合」を必ず意識する

find()は、条件に合うものがなければ undefined を返します。 このときに何もチェックせずにプロパティへアクセスすると、エラーの原因になります。

const productDetail = products.find((product) => product.id === 999);

// そのままアクセスすると危険
// console.log(productDetail.name); // エラーになる可能性

if (!productDetail) {
  console.log('商品が見つかりませんでした');
} else {
  console.log(productDetail.name);
}
JavaScript
  • 「見つからない場合」を必ず考えることは、安全なコードを書くうえで非常に重要です。
  • 外部入力（ユーザーの入力やAPIレスポンス）に依存する処理では、特にこのチェックが欠かせません。

filter・findは「元の配列を壊さない」

filter()もfind()も、元の配列を変更しません。

  • filter() → 新しい配列を返す
  • find() → 条件に合う1件（またはundefined）を返す

元の配列を壊さないことで、

  • どこで何が変更されているかが分かりやすくなる
  • 意図しない副作用（他の処理が同じ配列を参照している場合など）を防ぎやすくなる
  • 状態の変化を追いやすくなり、バグや不正な挙動の原因を減らせる

というメリットがあります。

Reactの状態管理と組み合わせるときも、 この「元の配列を壊さない」性質が、安全で予測可能なコードにつながります。

DAY 7：filter・find 中盤のまとめ

中盤では、

  • filter()が「条件に合うものを複数件集めて一覧にする」メソッドであること
  • 削除処理として「残したいものだけを残す」スタイルが自然に書けること
  • 検索処理として「キーワードに合うものだけを一覧にする」場面でfilter()が役立つこと
  • find()が「条件に合うものを最初の1件だけ取り出す」メソッドであること
  • 特に「ID検索」との相性が良く、詳細表示などでよく使われること
  • filter()は配列を返し、find()はオブジェクト（またはundefined）を返すという違いがあること
  • 「見つからない場合」を必ず意識することが、安全なコードにつながること
  • どちらも元の配列を壊さず、新しい値を返すため、Reactの状態管理と相性が良いこと

を確認しました。

後半では、これらのfilter・findをReactコンポーネントの中で実際に使い、 削除ボタン・検索UI・詳細表示などの具体的なパターンを通して、 「Reactでは必須級」という言葉の意味を、より実感としてつかんでいく流れになります。

DAY 7：filter・find 後半 ― Reactの「削除・検索・詳細表示」を支える実践パターン

DAY 7の後半では、前半・中盤で学んだ filter()／find()／データの絞り込み／削除処理／検索処理／ID検索 を、 いよいよ Reactコンポーネントの中でどう使うか という視点でまとめていきます。

ここでは、次の3つの流れで説明していきます。

  • 前半パート：filterで「削除処理」をReactの状態管理と結びつける
  • 中盤パート：filterで「検索処理」をUIと結びつける
  • 後半パート：findで「ID検索」を詳細表示と結びつける

それぞれ、初心者向けにかみ砕きながら、例題・コード例・テンプレートを交えて解説していきます。

filterで「削除処理」をReactの状態管理と結びつける

削除処理の基本発想 ― 「残したいものだけを残す」

Reactで「削除ボタン」を作るとき、 よくあるパターンは filter()を使って「残したいものだけを残す新しい配列」を作る というものです。

まずは、商品一覧を表示しつつ、「削除」ボタンで商品を消せるコンポーネントの例を見てみます。

import { useState } from 'react';

const initialProducts = [
  { id: 1, name: 'Tシャツ', price: 1200 },
  { id: 2, name: 'ジーンズ', price: 4800 },
  { id: 3, name: 'スニーカー', price: 6800 },
];

function ProductList() {
  const [products, setProducts] = useState(initialProducts);

  const handleDelete = (id) => {
    const newProducts = products.filter((product) => product.id !== id);
    setProducts(newProducts);
  };

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name}（{product.price}円）
          <button onClick={() => handleDelete(product.id)}>削除</button>
        </li>
      ))}
    </ul>
  );
}
JSX

ここで起きていることをステップで整理すると、

  1. initialProducts に初期の商品一覧（オブジェクト配列）を定義します。
  2. useState で products という状態を持ちます。
  3. handleDelete 関数は、削除したい商品の id を受け取ります。
  4. products.filter((product) => product.id !== id) で、「削除対象ではない商品だけを残す新しい配列」を作ります。
  5. setProducts(newProducts) で、その新しい配列を状態としてセットします。
  6. map()で products をJSXに変換し、削除ボタンを表示します。
  7. ボタンがクリックされると、対応する id が handleDelete に渡され、状態が更新されます。

重要ポイント：

  • 「削除する」のではなく、「残したいものだけを残す」という発想で書いていること。
  • filter()が「削除処理」として自然に使えること。
  • 元の配列を直接書き換えず、新しい配列を作って状態を更新していること。

このスタイルは、Reactの状態管理と非常に相性が良く、安全で予測可能なコードにつながります。

filterで「検索処理」をUIと結びつける

検索ボックスとfilterの組み合わせ

次に、「検索ボックスに入力されたキーワードに応じて、表示する商品一覧を絞り込む」例を見てみます。

import { useState } from 'react';

const allProducts = [
  { id: 1, name: 'Tシャツ', price: 1200 },
  { id: 2, name: 'ジーンズ', price: 4800 },
  { id: 3, name: 'スニーカー', price: 6800 },
  { id: 4, name: 'キャップ', price: 2200 },
];

function ProductSearch() {
  const [keyword, setKeyword] = useState('');

  const filteredProducts = allProducts.filter((product) =>
    product.name.includes(keyword)
  );

  return (
    <div>
      <input
        type="text"
        placeholder="商品名で検索"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />

      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>
            {product.name}（{product.price}円）
          </li>
        ))}
      </ul>
    </div>
  );
}
JSX

ここでの流れをステップで追ってみます。

  1. allProducts に全商品の一覧を定義します。
  2. keyword という状態を持ち、検索ボックスの入力値を保存します。
  3. filteredProducts は、allProducts.filter(...) で作られた「絞り込み後の商品一覧」です。
    • 条件：product.name.includes(keyword)
    • キーワードを含む商品だけを残しています。
  4. input の onChange で、ユーザーの入力に応じて keyword を更新します。
  5. filteredProducts.map(...) で、絞り込み後の一覧を表示します。

重要ポイント：

  • filter()が「検索結果一覧」を作る役割を担っていること。
  • 状態（keyword）とfilter()を組み合わせることで、UIが「宣言的」に書けていること。
  • 「キーワードに合うものだけを表示する」というロジックが、非常にシンプルに表現できていること。

Reactでは、このような「検索ボックス＋filter」の組み合わせが、 商品検索・ユーザー検索・タスク絞り込みなど、さまざまな場面で登場します。

findで「ID検索」を詳細表示と結びつける

ID検索で1件だけの詳細を表示する

最後に、find()を使って「特定の商品だけの詳細情報を表示する」例を見てみます。 ここでは、選択された商品のIDに応じて、詳細表示を切り替えるコンポーネントを考えます。

import { useState } from 'react';

const products = [
  { id: 1, name: 'Tシャツ', price: 1200, description: 'シンプルな白Tシャツです。' },
  { id: 2, name: 'ジーンズ', price: 4800, description: '細身のデニムパンツです。' },
  { id: 3, name: 'スニーカー', price: 6800, description: '軽量で歩きやすいスニーカーです。' },
];

function ProductDetailApp() {
  const [selectedId, setSelectedId] = useState(null);

  const selectedProduct = products.find(
    (product) => product.id === selectedId
  );

  return (
    <div>
      <h3>商品一覧</h3>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name}（{product.price}円）
            <button onClick={() => setSelectedId(product.id)}>詳細を見る</button>
          </li>
        ))}
      </ul>

      <h3>商品詳細</h3>
      {selectedProduct ? (
        <div>
          <p>商品名：{selectedProduct.name}</p>
          <p>価格：{selectedProduct.price}円</p>
          <p>説明：{selectedProduct.description}</p>
        </div>
      ) : (
        <p>商品が選択されていません。</p>
      )}
    </div>
  );
}
JSX

このコードの流れをステップで整理すると、

  1. products に商品一覧（オブジェクト配列）を定義します。
  2. selectedId という状態を持ち、「現在選択されている商品のID」を保存します。
  3. selectedProduct は、products.find(...) で「IDがselectedIdと一致する商品」を1件だけ取り出したものです。
    • 条件：product.id === selectedId
    • 見つからなければ undefined になります。
  4. 商品一覧の各行に「詳細を見る」ボタンを付け、クリックされた商品のIDを selectedId にセットします。
  5. selectedProduct が存在する場合は、その詳細情報を表示します。
  6. selectedProduct が存在しない場合（まだ何も選択されていない場合）は、「商品が選択されていません。」と表示します。

重要ポイント：

  • find()が「ID検索」として、特定の1件だけを取り出す役割を担っていること。
  • filter()ではなくfind()を使うことで、「配列」ではなく「オブジェクト1件」として扱えること。
  • 「見つからない場合」を必ず考え、selectedProduct ? ... : ... のように分岐していること。

このパターンは、詳細画面・モーダル・プロフィール表示など、 「一覧から1件を選んで詳細を表示する」UIで頻繁に登場します。

セキュリティ・安全性の視点から見たfilter・find＋React

「見つからない場合」を必ずハンドリングする

find()は、条件に合うものがなければ undefined を返します。 このときに何もチェックせずにプロパティへアクセスすると、エラーの原因になります。

const productDetail = products.find((product) => product.id === 999);

if (!productDetail) {
  console.log('商品が見つかりませんでした');
} else {
  console.log(productDetail.name);
}
JavaScript

Reactコンポーネント内でも、

  • selectedProduct が存在するかどうかをチェックする
  • 見つからない場合の表示（エラーメッセージや「該当なし」表示）を用意する

といった工夫をすることで、 ユーザーにとって分かりやすく、安全なUIになります。

元の配列を壊さないことの意味

filter()もfind()も、元の配列を変更しません。

  • filter() → 新しい配列を返す
  • find() → 条件に合う1件（またはundefined）を返す

元の配列を壊さないことで、

  • どこで何が変更されているかが分かりやすくなる
  • 意図しない副作用（他の処理が同じ配列を参照している場合など）を防ぎやすくなる
  • 状態の変化を追いやすくなり、バグや不正な挙動の原因を減らせる

というメリットがあります。

Reactの状態管理と組み合わせるときも、 この「元の配列を壊さない」性質が、安全で予測可能なコードにつながります。

DAY 7：filter・find 後半のまとめ

DAY 7の後半では、

  • filter()を使って「削除処理」をReactの状態管理と結びつけるパターン
  • filter()を使って「検索処理」を検索ボックスと結びつけるパターン
  • find()を使って「ID検索」を詳細表示と結びつけるパターン
  • 「一覧を絞り込みたいときはfilter()」「1件だけ取り出したいときはfind()」という役割分担
  • 「見つからない場合」を必ず意識することが、安全なコードとUIにつながること
  • どちらも元の配列を壊さず、新しい値を返すため、Reactの状態管理と相性が良いこと

を確認しました。

DAY 4（Arrow Function）、DAY 5（配列）、DAY 6（map）、DAY 7（filter・find）まで来た時点で、 モダンJavaScriptとReactの「データ操作とUI表示の基礎」がかなり揃ってきています。

この先は、reduce やより高度な状態管理、コンポーネント分割などに進みながら、 今学んだ 「配列を変換し、絞り込み、検索し、1件を取り出す」 という感覚を、 さらに広い場面で活かしていくことになります。

DAY 7：filter・find ミニ課題 ― 商品検索プログラムを作る

このミニ課題では、filter()／find()／データの絞り込み／検索処理／ID検索 を使って、 「商品検索プログラム」をステップバイステップで作っていきます。

ゴールは次の2つです。

  • キーワードで商品一覧を絞り込む検索（filter()）
  • IDで特定の商品を1件だけ探す検索（find()）

どちらもReactでよく使うパターンなので、ここでしっかり「手で書ける感覚」をつかんでおくと、その後がかなり楽になります。

商品データをオブジェクト配列で用意する

商品一覧の基本形

まずは、商品一覧をオブジェクト配列で表現します。 ここでは、id・name・price を持つシンプルな構造にします。

const products = [
  { id: 1, name: 'Tシャツ', price: 1200 },
  { id: 2, name: 'ジーンズ', price: 4800 },
  { id: 3, name: 'スニーカー', price: 6800 },
  { id: 4, name: 'キャップ', price: 2200 },
];
JavaScript
  • 各オブジェクトが「1つの商品」を表します。
  • 全体として「商品一覧」を表す配列です。
  • Reactでも、このような「オブジェクト配列」がよく使われます。

この配列をもとに、キーワード検索とID検索の2種類の検索処理を書いていきます。

キーワード検索：filter()で「一覧を絞り込む」

ステップ1：検索キーワードを決める

まずは、キーワードを変数として用意します。 ここでは例として 'T' を使います。

const keyword = 'T';
JavaScript
  • 実際のアプリでは、ユーザーの入力値がここに入ります。
  • 今は「動きのイメージ」をつかむために固定値で進めます。

ステップ2：filter()で商品名にキーワードを含むものだけを残す

次に、filter()を使って「キーワードに合う商品だけを集めた新しい配列」を作ります。

const matchedProducts = products.filter((product) => {
  return product.name.includes(keyword);
});

console.log(matchedProducts);
/*
[
  { id: 1, name: 'Tシャツ', price: 1200 },
]
*/
JavaScript

ここで起きていることをステップで整理すると、

  1. products.filter((product) => { ... }) を呼び出します。
  2. filter()は、products の各要素（商品オブジェクト）に対して順番に処理を行います。
  3. product.name.includes(keyword) が true のとき、その商品を「残す」対象にします。
  4. 「残す」と判定された商品だけを集めて、新しい配列 matchedProducts を返します。
  5. 元の products は一切変更されません。

1行Arrow Functionで書くテンプレート

慣れてきたら、次のように1行Arrow Functionで書く形が定番になります。

const matchedProducts = products.filter((product) =>
  product.name.includes(keyword)
);
JavaScript

この形は、Reactの中でよく出てくる「検索処理のテンプレート」として覚えておくと便利です。

ID検索：find()で「1件だけ取り出す」

ステップ1：探したい商品のIDを決める

次に、「IDで商品を1件だけ探す」処理を書いていきます。 まずは、探したい商品のIDを変数として用意します。

const targetId = 3;
JavaScript
  • 実際のアプリでは、「ユーザーがクリックした商品」などのIDがここに入ります。
  • 今は例として 3 を使います。

ステップ2：find()でIDが一致する商品を1件だけ探す

find()を使って、「IDがtargetIdと一致する商品」を1件だけ取り出します。

const targetProduct = products.find((product) => {
  return product.id === targetId;
});

console.log(targetProduct);
// { id: 3, name: 'スニーカー', price: 6800 }
JavaScript

ここで起きていることをステップで整理すると、

  1. products.find((product) => { ... }) を呼び出します。
  2. find()は、products の各要素（商品オブジェクト）に対して順番に処理を行います。
  3. product.id === targetId が true になった瞬間、その商品オブジェクトを返します。
  4. 以降の要素はチェックされません（最初の1件だけが対象）。
  5. 見つからなければ、targetProduct は undefined になります。

filterとの違いを意識する

同じ条件をfilter()で書くと、結果が「配列」になることも確認しておきます。

const result = products.filter((product) => product.id === targetId);

console.log(result);
// [{ id: 3, name: 'スニーカー', price: 6800 }]
JavaScript
  • filter() → 「条件に合うものの一覧（配列）」が欲しいとき
  • find() → 「条件に合うものの1件だけ（オブジェクト）」が欲しいとき

商品検索プログラムでは、

  • 「検索結果一覧」 → filter()
  • 「選択された商品1件の詳細」 → find()

という役割分担が自然です。

ミニ課題の完成形：キーワード検索＋ID検索をまとめる

コンソールベースの商品検索プログラム

ここまでの処理を1つのプログラムとしてまとめてみます。 まずはブラウザのコンソールで動かせる形で考えます。

const products = [
  { id: 1, name: 'Tシャツ', price: 1200 },
  { id: 2, name: 'ジーンズ', price: 4800 },
  { id: 3, name: 'スニーカー', price: 6800 },
  { id: 4, name: 'キャップ', price: 2200 },
];

// キーワード検索
const keyword = 'T';
const matchedProducts = products.filter((product) =>
  product.name.includes(keyword)
);

console.log('キーワード検索結果:', matchedProducts);

// ID検索
const targetId = 3;
const targetProduct = products.find((product) => product.id === targetId);

if (targetProduct) {
  console.log('ID検索結果:', targetProduct);
} else {
  console.log('指定されたIDの商品は見つかりませんでした');
}
JavaScript

このプログラムでは、

  • filter()で「キーワードに合う商品一覧」を作り、
  • find()で「特定のIDの商品1件」を取り出し、
  • 見つからない場合のメッセージも用意しています。

重要ポイント：

  • 「一覧を絞り込む」処理 → filter()
  • 「1件だけ取り出す」処理 → find()
  • 「見つからない場合」を必ず意識することが、安全なコードにつながること

React版のイメージ：検索UIとfilter・findの組み合わせ

キーワード検索UIのイメージ

Reactで商品検索UIを作るときは、次のような構造になります。

import { useState } from 'react';

const products = [
  { id: 1, name: 'Tシャツ', price: 1200 },
  { id: 2, name: 'ジーンズ', price: 4800 },
  { id: 3, name: 'スニーカー', price: 6800 },
  { id: 4, name: 'キャップ', price: 2200 },
];

function ProductSearchApp() {
  const [keyword, setKeyword] = useState('');
  const [selectedId, setSelectedId] = useState(null);

  const filteredProducts = products.filter((product) =>
    product.name.includes(keyword)
  );

  const selectedProduct = products.find(
    (product) => product.id === selectedId
  );

  return (
    <div>
      <h3>商品検索</h3>
      <input
        type="text"
        placeholder="商品名で検索"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />

      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>
            {product.name}（{product.price}円）
            <button onClick={() => setSelectedId(product.id)}>
              詳細を見る
            </button>
          </li>
        ))}
      </ul>

      <h3>商品詳細</h3>
      {selectedProduct ? (
        <div>
          <p>商品ID：{selectedProduct.id}</p>
          <p>商品名：{selectedProduct.name}</p>
          <p>価格：{selectedProduct.price}円</p>
        </div>
      ) : (
        <p>商品が選択されていません。</p>
      )}
    </div>
  );
}
JSX

ここでは、

  • filter()で「キーワードに合う商品一覧」を作り、
  • find()で「選択されたIDの商品1件」を取り出し、
  • map()で一覧を表示し、
  • 条件分岐で詳細表示を切り替えています。

この構造は、Reactでよくある「検索＋一覧＋詳細」の基本パターンです。

セキュリティ・安全性の視点から見る商品検索プログラム

外部入力に依存する処理では「見つからない場合」を必ず考える

商品検索プログラムは、ユーザーの入力（キーワードやID）に依存します。 このとき、

  • find()の結果がundefinedになる可能性
  • filter()の結果が空配列になる可能性

を必ず意識しておくことが、安全なコードにつながります。

  • 見つからない場合 → 「該当する商品がありません」と表示する
  • IDが不正な場合 → 「不正なIDです」と表示する、あるいは何も表示しない

といった分岐を用意することで、 予期しないエラーや不正な挙動を防ぎやすくなります。

元の配列を壊さないことの意味

filter()もfind()も、元の配列を変更しません。

  • filter() → 新しい配列を返す
  • find() → 条件に合う1件（またはundefined）を返す

元の配列を壊さないことで、

  • どこで何が変更されているかが分かりやすくなる
  • 意図しない副作用（他の処理が同じ配列を参照している場合など）を防ぎやすくなる
  • 状態の変化を追いやすくなり、バグや不正な挙動の原因を減らせる

というメリットがあります。

Reactの状態管理と組み合わせるときも、 この「元の配列を壊さない」性質が、安全で予測可能なコードにつながります。

ミニ課題のまとめ ― filter・findで「検索の感覚」を身につける

このミニ課題では、

  • 商品一覧をオブジェクト配列として用意する
  • filter()で「キーワードに合う商品一覧」を作る
  • find()で「特定のIDの商品1件」を取り出す
  • 「一覧を絞り込むときはfilter()」「1件だけ取り出すときはfind()」という役割分担を意識する
  • 「見つからない場合」を必ず考えることが、安全なコードにつながること
  • React版のイメージとして、検索UI＋一覧表示＋詳細表示の構造を確認する

という流れを通して、 filter()とfind()が「Reactでは必須級」と言われる理由を、 商品検索という具体的な題材で体感していただけたと思います。

この感覚を持ったまま、次のステップで reduce やより高度な状態管理に進んでいくと、 「配列を変換し、絞り込み、検索し、1件を取り出す」という基礎が、 より複雑なロジックの土台として自然に活きてくるはずです。

スポンサーリンク
タイトルとURLをコピーしました