モダン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の実践(削除ボタン・詳細表示など)

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

タイトルとURLをコピーしました