JavaScript | 1 日 90 分 × 7 日アプリ学習：DOM・イベント・ブラウザUI ToDoアプリ編

Web APP JavaScript
スポンサーリンク
スポンサーリンク
  1. ToDoアプリ 2日目のゴール
  2. 今日やることをざっくり整理する
  3. 2日目のHTML（1日目からの続き）
  4. ToDoを「オブジェクト」で表現する
    1. 深掘り：なぜオブジェクトにするのか
  5. ToDo一覧を「配列」で管理する
  6. DOM要素を querySelector() で取得する
  7. 「配列からDOMを描画する」関数を作る
    1. 深掘り：renderTodos() の役割
  8. ToDoを追加する関数を作る
    1. 深掘り：DOMを直接いじるのではなく「配列→描画」にする理由
  9. ToDoを削除する関数を作る
    1. 深掘り：filter() と配列の更新
  10. 完了状態を切り替える関数を作る
    1. 深掘り：完了状態とclassListの関係
  11. dataset と IDのつながりをもう一度確認する
    1. 深掘り：event.target と closest()
  12. querySelectorAll() を使って「全部完了」機能を作る
    1. HTMLにボタンを追加
    2. JavaScriptでイベントを設定
    3. 深掘り：配列から更新するか、DOMから更新するか
  13. 2日目の完成コード（全体）
  14. 2日目で本当に掴んでほしいこと
  15. ToDoアプリ 3日目のゴール
  16. 3日目でやることの全体像
  17. 3日目のHTML構成
    1. 深掘りポイント
  18. 配列と状態の定義（2日目の復習＋3日目の土台）
    1. 深掘り：currentFilter の役割
  19. DOM要素を querySelector() で取得する
  20. 配列から画面を描画する関数（フィルタ対応版）
    1. 深掘り：filter() と「表示用配列」
  21. ToDoを追加する関数と「追加」ボタンのイベント
  22. 完了状態を切り替える関数
  23. ToDoを削除する関数（event.target＋closest＋dataset版）
    1. シンプル版（IDを直接渡す）
    2. event.target＋closest＋dataset版
    3. 深掘り：event.target と closest() の感覚
  24. フィルタボタンのイベント（未完了だけ表示／全部表示）
    1. 深掘り：状態を変えてから再描画する
  25. 「全部完了にする」ボタンのイベント
  26. 3日目の完成コード（全体）
  27. 3日目で本当に掴んでほしいこと
  28. ToDoアプリ 4日目のゴール
  29. 今日やることの全体像
  30. 4日目のHTML構成
  31. 配列と状態の定義
  32. DOM要素を querySelector() で取得する
  33. 配列から画面を描画する関数（編集ボタン付き）
    1. 深掘り：表示モードと編集モードの切り替え
  34. ToDoのテキストを更新する関数
    1. 深掘り：配列の更新と再描画
  35. ToDoを追加する関数と「追加」ボタンのイベント
  36. 完了状態を切り替える関数
  37. ToDoを削除する関数
  38. フィルタボタンのイベント
  39. 「全部完了にする」ボタンのイベント
  40. 4日目の完成コード（全体）
  41. 4日目で本当に掴んでほしいこと
  42. ToDoアプリ 5日目のゴール
  43. 今日やることの全体像
  44. 5日目のHTML構成
    1. 深掘り：並び順ボタンとクラス
  45. 配列と状態の定義（作成日時＋並び順モード）
    1. 深掘り：作成日時を持たせる理由
  46. DOM要素を querySelector() / querySelectorAll() で取得する
    1. 深掘り：querySelectorAll() の使い方
  47. ToDoを追加する関数（作成日時付き）
    1. 深掘り：Date.now() の意味
  48. 配列から画面を描画する関数（フィルタ＋並び替え対応）
    1. 深掘り：filter → copy → sort の流れ
  49. ToDoのテキストを更新する関数
  50. 完了状態を切り替える関数
  51. ToDoを削除する関数
  52. 「追加」ボタンのイベント
  53. フィルタボタンのイベント
  54. 「全部完了にする」ボタンのイベント
  55. 並び順ボタンのイベント（querySelectorAll＋dataset＋classList）
    1. 深掘り：dataset＋classList＋querySelectorAll の連携
  56. 5日目の完成コード（全体）
  57. 5日目で本当に掴んでほしいこと
  58. ToDoアプリ 6日目のゴール
  59. 今日やることの全体像
  60. localStorage のイメージをつかむ
    1. localStorageとは
    2. 重要ポイント
  61. 6日目のHTML構成
  62. 配列と状態の定義（保存を意識する）
    1. 深掘り：STORAGE_KEY の意味
  63. DOM要素を querySelector() / querySelectorAll() で取得する
  64. 保存関数：配列を localStorage に書き込む
    1. 深掘り：なぜオブジェクトにまとめるのか
  65. 読み込み関数：localStorage から配列を復元する
    1. 深掘り：JSON.parse とエラーハンドリング
  66. 配列から画面を描画する関数（フィルタ＋並び替え＋編集付き）
  67. ToDoを追加する関数（保存付き）
  68. ToDoのテキストを更新する関数
  69. ToDoを削除する関数（保存付き）
  70. 完了状態を切り替える関数（保存付き）
  71. 「追加」ボタンのイベント
  72. フィルタボタンのイベント
  73. 「全部完了にする」ボタンのイベント（保存付き）
  74. 並び順ボタンのイベント
  75. ページ読み込み時の処理：保存データを読み込んでから描画
  76. 6日目の完成コード（全体）
  77. 6日目で本当に掴んでほしいこと
  78. ToDoアプリ 7日目のゴール
  79. 今日やることの全体像
  80. コードの役割を分けて考える
    1. 状態（State）
    2. DOM参照（DOM References）
    3. ストレージ（Storage）
    4. 描画（Render）
    5. 操作ロジック（Actions）
    6. イベント設定（Event Binding）
  81. 7日目のHTML構成
  82. 完成版コード：役割ごとに整理したToDoアプリ
    1. 状態・定数の定義
    2. DOM参照の取得
  83. ストレージ関連の関数
    1. 保存関数
    2. 読み込み関数
  84. 描画関数：状態からDOMを作る
  85. 操作ロジック：状態を変える関数たち
    1. ToDoを追加する
    2. テキストを更新する
    3. ToDoを削除する
    4. 完了状態を切り替える
  86. イベント設定：ユーザー操作とロジックをつなぐ
    1. 追加ボタン
    2. 全部完了ボタン
    3. フィルタボタン（未完了だけ表示／全部表示）
    4. 並び順ボタン（querySelectorAll＋dataset＋classList）
  87. 初期処理：保存データを読み込んでから描画
  88. 7日目の完成コード（全体）
  89. 7日目で本当に掴んでほしいこと

ToDoアプリ 2日目のゴール

2日目のテーマは 「ToDoを“配列＋オブジェクト”で管理しながら、DOMを通して表示・操作する」 ことです。

1日目では、

  • 入力欄からテキストを取り出す
  • createElement() と append() で <li> を追加する
  • remove() で削除する
  • classList で完了状態を切り替える
  • dataset でIDを持たせる

という「DOMを直接いじる」感覚をつかみました。

2日目では、そこに

  • 配列でToDo一覧を管理する
  • オブジェクトで1件のToDoを表現する
  • 配列とDOMを同期させる（配列を元に画面を描画する）

という要素を加えていきます。

今日やることをざっくり整理する

2日目のステップはこんな流れです。

  1. ToDoをオブジェクトで表現する
    • { id, text, done } のような形
  2. ToDo一覧を配列で管理する
    • const todos = [];
  3. 「配列からDOMを描画する」関数を作る
    • renderTodos(todos) のような関数
  4. 追加・削除・完了切り替えを「配列を更新 → 再描画」という流れにする
  5. querySelector() / querySelectorAll() / addEventListener() / createElement() / append() / remove() / classList / dataset を 「配列管理と組み合わせて」もう一度体に入れる
前へ
12
スポンサーリンク
タイトルとURLをコピーしました