JavaScript | 1 日 120 分 × 7 日アプリ学習：検索 & ソート機能付き一覧

Web APP JavaScript
2026.02.15
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと今日やること
  2. アプリのデータと UI を整理する
    1. 今日扱うデータ（例）
    2. UI のイメージ
  3. 状態管理（state）を導入する
    1. なぜ state が必要なのか
    2. state の基本形
    3. 状態を更新する関数
  4. applyFilters で「処理の流れ」を作る
    1. 1日目の学びを組み合わせる
    2. 深掘りポイント
  5. リアルタイム検索を state とつなぐ
    1. 深掘りポイント
  6. 昇順 / 降順ソートボタンを作る
    1. 深掘りポイント
  7. 年齢フィルタ（複合条件）を UI とつなぐ
    1. 入力欄のイベント
    2. 深掘りポイント
  8. 一覧表示の render 関数
    1. 深掘りポイント
  9. 2日目のまとめ
  10. 今日いちばん深く理解してほしいこと
  11. 3日目のゴールと今日やること
  12. タグフィルタを作る（複数条件 AND / OR）
    1. 例：ユーザーにタグを付ける
    2. UI のイメージ
  13. タグフィルタのロジック（AND / OR の違い）
    1. OR 条件（どれか 1 つでも含む）
    2. AND 条件（すべて含む）
    3. 深掘りポイント
  14. state にタグフィルタを追加する
  15. applyFilters にタグフィルタを統合する
    1. 深掘りポイント
  16. ソート条件を増やす（名前順・年齢順）
    1. state に sortKey を追加
    2. ソートロジックを拡張
    3. 深掘りポイント
  17. ページネーションを追加する（一覧を分割表示）
    1. state にページ情報を追加
    2. ページネーション処理
    3. applyFilters の最後に追加
    4. 深掘りポイント
  18. ページボタンを UI とつなぐ
  19. 3日目のまとめ
  20. 今日いちばん深く理解してほしいこと
  21. 4日目のゴールと今日やること
  22. デバウンスで検索の負荷を減らす
    1. なぜデバウンスが必要なのか
    2. デバウンスとは？
    3. デバウンス関数の例
    4. 検索欄にデバウンスを適用
    5. 深掘りポイント
  23. 検索キーワードをハイライト表示する
    1. なぜハイライトが必要なのか
    2. ハイライト関数
    3. renderList に組み込む
    4. 深掘りポイント
  24. ソートアイコンを切り替える
    1. UI のイメージ
    2. state に sortKey と sortOrder を追加
    3. ソートボタンのロジック
    4. ソート処理を applyFilters に統合
    5. 深掘りポイント
  25. state を整理して責務を分離する
    1. なぜ state を整理するのか
    2. 検索条件（filters）
    3. ソート条件（sortState）
    4. ページ情報（pagination）
    5. 深掘りポイント
  26. applyFilters を“読みやすい流れ”に再構築する
    1. 深掘りポイント
  27. 4日目のまとめ
  28. 今日いちばん深く理解してほしいこと
  29. 5日目のゴールと今日やること
  30. 検索条件を保存する（localStorage）
    1. なぜ保存が必要なのか
  31. 保存するデータの構造を決める
    1. 保存するオブジェクト
    2. 保存関数
    3. 読み込み関数
    4. 深掘りポイント
  32. 条件プリセットを作る（ワンクリックで条件セット）
    1. UI のイメージ
    2. プリセットのロジック
    3. 深掘りポイント
  33. データの追加・削除を実装する
    1. なぜ必要なのか
  34. データ追加フォームを作る
    1. UI のイメージ
    2. 追加ロジック
    3. 深掘りポイント
  35. データ削除機能を追加する
    1. renderList に削除ボタンを追加
    2. 削除ロジック
    3. 深掘りポイント
  36. ソート UI を改善する（アイコン切り替え）
    1. ボタンの表示を動的に変更
    2. 深掘りポイント
  37. applyFilters を最適化する
    1. 3日目までの applyFilters はこうでした
  38. applyFilters の完成形
    1. 深掘りポイント
  39. 5日目のまとめ
  40. 今日いちばん深く理解してほしいこと
  41. 6日目のゴールと今日やること
  42. アプリ全体の構造を「3 層」で整理する
    1. データ処理層（最下層）
    2. 状態管理層（state）
    3. UI 層（最上層）
  43. データ処理層を「小さな関数の組み合わせ」にする
    1. applyFilters の完成形
    2. 深掘りポイント
  44. 各フィルタ関数を“読みやすい形”にする
    1. キーワードフィルタ
    2. 年齢フィルタ
    3. タグフィルタ（AND / OR）
    4. ソート
    5. ページネーション
    6. 深掘りポイント
  45. 状態管理層を整理する（責務の分離）
    1. filters（検索条件）
    2. sortState（ソート条件）
    3. pagination（ページ情報）
    4. 深掘りポイント
  46. UI 層を整理する（表示とイベントを分離）
    1. renderList（表示にだけ責任を持つ）
    2. updateSortButtons（ソート状態を UI に反映）
    3. 深掘りポイント
  47. 6日目のまとめ
  48. 今日いちばん深く理解してほしいこと
  49. 7日目のゴールと今日やること
  50. アプリ全体の構造を「3 層」で再確認する
    1. データ処理層（map / filter / sort / slice の世界）
    2. 状態管理層（filters / sortState / pagination）
    3. UI 層（表示とイベント）
  51. map / filter / sort を“アプリの型”として理解する
    1. 一覧アプリの処理の流れ
    2. 深掘りポイント
  52. 完成形の applyFilters を“物語として読めるコード”にする
    1. 7日目版 applyFilters（完成形）
    2. 日本語で読むとこうなる
  53. UI 層を“ユーザーに優しい形”に仕上げる
    1. ハイライト表示で検索結果をわかりやすくする
    2. 深掘りポイント
  54. ソート UI を“状態に応じて変わる”形にする
    1. ソートボタンの更新
    2. 深掘りポイント
  55. 状態保存（localStorage）で“前回の続きから使えるアプリ”にする
    1. 保存
    2. 読み込み
    3. 深掘りポイント
  56. 7日目のまとめと、あなたがもう持っている力

2日目のゴールと今日やること

2日目のテーマは
「検索・ソート・フィルタ機能を“実際に使える UI とロジック”として組み立てる」
ことです。

1日目では map / filter / sort の基本と、
リアルタイム検索・ソート・複合条件フィルタの“ロジック部分”を学びました。

2日目では、それらを UI（入力欄・ボタン）と結びつけて、実際に動く一覧アプリにする ところまで進めます。

今日のポイントは次の 3 つ。

  • 状態管理（state）を導入して、検索・ソート・フィルタを一元管理
  • UI 操作（検索欄・ソートボタン・年齢スライダー）とロジックをつなぐ
  • map / filter / sort を組み合わせて「処理の流れ」を作る

初心者がつまずきやすい「UI とロジックの分離」を丁寧に解説します。

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