JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 ミニ家計簿編

Web APP JavaScript
スポンサーリンク
スポンサーリンク
  1. ミニ家計簿アプリ 2日目のゴール
  2. 今日やることを言葉で整理する
  3. 入力フォームの HTML を用意する
    1. 深掘りポイント
  4. 1日目の「家計簿配列」と「表示関数」を再利用する
  5. フォームの値を JavaScript で受け取る
  6. 入力値から家計簿オブジェクトを作る
    1. 深掘りポイント
  7. 新しいオブジェクトを配列に追加する
    1. 深掘りポイント
  8. 配列に追加したあと、画面を再表示する
  9. 2日目の完成コード
  10. 今日の重要ポイントをもう一段深く理解する
    1. ● 「入力 → オブジェクト → 配列 → 表示」という流れ
    2. ● オブジェクトは「自分で組み立てる」もの
    3. ● 配列は「増えていくもの」を扱う箱
  11. 2日目で本当に掴んでほしいこと
  12. ミニ家計簿アプリ 3日目のゴール
  13. 今日やることを言葉で整理する
  14. 合計金額を表示するための HTML を用意する
    1. 深掘りポイント
  15. 家計簿配列と表示関数（2日目の復習）
  16. 合計金額を計算する関数を作る
    1. 深掘りポイント
  17. 合計金額を画面に表示する関数を作る
    1. 深掘りポイント
  18. DOM要素の取得と初期表示
  19. 新しい支出を追加したときに合計も更新する
    1. 深掘りポイント
  20. 3日目の完成コード
  21. 今日の重要ポイントをもう一段深く理解する
    1. ● 配列は「計算の対象」としても使える
    2. ● オブジェクトの特定のプロパティだけを取り出して使う
    3. ● 関数で「計算」と「表示」を分けると整理される
  22. 3日目で本当に掴んでほしいこと
  23. ミニ家計簿アプリ 4日目のゴール
  24. 今日やることを言葉で整理する
  25. カテゴリ別合計を表示するための HTML を用意する
    1. 深掘りポイント
  26. 家計簿配列と基本表示（3日目の復習）
  27. カテゴリ別合計を計算する仕組みを考える
    1. 集計結果を表すオブジェクトのイメージ
  28. カテゴリ別合計を計算する関数を作る
    1. 深掘りポイント
  29. カテゴリ別合計を画面に表示する関数を作る
    1. 深掘りポイント
  30. DOM要素の取得と初期表示
  31. 新しい支出を追加したときにカテゴリ別合計も更新する
    1. 深掘りポイント
  32. 4日目の完成コード
  33. 今日の重要ポイントをもう一段深く理解する
    1. オブジェクトの配列から「集計用オブジェクト」を作る
    2. オブジェクトを「辞書」として使う感覚
    3. 関数で「集計」と「表示」を分ける
  34. 4日目で本当に掴んでほしいこと
  35. ミニ家計簿アプリ 5日目のゴール
  36. 今日やることを言葉で整理する
  37. バリデーションと絞り込み用の UI を足す
    1. 深掘りポイント
  38. 家計簿配列と基本表示（4日目の復習）
  39. 入力チェック（バリデーション）の考え方
    1. バリデーション関数の設計
  40. 金額のバリデーション関数を作る
    1. 深掘りポイント
  41. 日付とカテゴリのバリデーション関数を作る
    1. 深掘りポイント
  42. バリデーション結果をまとめて扱う
    1. 深掘りポイント
  43. 絞り込み機能の考え方
  44. カテゴリで絞り込んだ配列を作る関数
    1. 深掘りポイント
  45. 絞り込み結果を表示する
    1. 深掘りポイント
  46. 絞り込み解除ボタンの処理
  47. 表示処理をまとめる関数 renderAll を作る
  48. 5日目の完成コード
  49. 5日目で本当に掴んでほしいこと
  50. ミニ家計簿アプリ 6日目のゴール
  51. 今日やることを言葉で整理する
  52. IDを持った家計簿オブジェクトのイメージ
    1. 深掘りポイント
  53. 6日目のHTML構成（5日目の続き）
  54. ID付きの家計簿配列を用意する
    1. 深掘りポイント
  55. 一覧表示に「削除ボタン」を追加する
    1. 深掘りポイント
  56. IDを使ってレコードを削除する関数
    1. 深掘りポイント
  57. 合計・カテゴリ別合計・バリデーションなどの関数
  58. バリデーションと追加処理（ID付き）
  59. 絞り込み機能（削除と共存させる）
  60. 6日目の完成コード
  61. 6日目で本当に掴んでほしいこと
  62. ミニ家計簿アプリ 7日目のゴール
  63. 今日やることを言葉で整理する
  64. 7日目のHTML構成（6日目の続き＋並び替えボタン）
    1. 深掘りポイント
  65. コードを「役割ごと」に整理する考え方
  66. データ定義・状態管理
    1. 深掘りポイント
  67. ユーティリティ関数（データ操作系）
    1. 合計金額を計算する関数
    2. カテゴリ別合計を計算する関数
    3. カテゴリで絞り込んだ配列を作る関数
    4. 日付で並び替える関数（古い順・新しい順）
    5. 深掘りポイント（ソートの重要な考え方）
  68. 表示系関数（render系）
    1. 家計簿一覧を表示する関数（削除ボタン付き）
    2. 合計金額を表示する関数
    3. カテゴリ別合計を表示する関数
    4. 全体表示をまとめる関数 renderAll
    5. 深掘りポイント
  69. バリデーション系関数（入力チェック）
  70. 操作系（イベントハンドラ）
    1. DOM要素の取得
    2. 追加ボタンの処理
    3. 削除処理（ID指定）
    4. 絞り込みボタンの処理
    5. 並び替えボタンの処理（7日目の新要素）
    6. 初期表示
  71. 7日目の完成コード（全体）
  72. 7日目で本当に掴んでほしいこと

ミニ家計簿アプリ 2日目のゴール

2日目のテーマは 「配列とオブジェクトを“動かす”——フォームから入力した支出をオブジェクトとして作り、配列に追加し、画面に反映できるようになること」 です。

1日目では、

  • 家計簿1件分をオブジェクトで表現する
  • 複数件を配列で管理する
  • 配列を画面に表示する関数を作る

ところまで進みました。

2日目では、 「ユーザーが入力した内容からオブジェクトを作り、配列に push して、再表示する」 という流れを身につけます。

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