JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 年齢計算機編

Web APP JavaScript
2026.08.05
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと全体像
  2. 年齢の詳細を計算する（生後何日・何ヶ月）
    1. なぜ必要なのか？
  3. 生後日数を計算する関数
    1. 深掘りポイント
  4. 生後月数を計算する関数
    1. 深掘りポイント
  5. CSSで見た目を整える（2日目版）
    1. 深掘りポイント
  6. 結果をまとめて表示する（DOM操作）
    1. 深掘りポイント
  7. 入力チェックを強化する
    1. 深掘りポイント
  8. 2日目の完成コード（HTML＋CSS＋JavaScript）
    1. HTML
    2. CSS（style.css）
    3. JavaScript（script.js）
  9. 2日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● イベント処理は複数使うと“動くUI”になる
    3. ● 関数分割でコードが読みやすくなる
  10. 次のステップ
  11. 3日目のゴールと全体像
  12. 追加する機能の一覧
  13. 入力欄のリアルタイムチェック（keyupイベント）
    1. なぜ必要なのか？
    2. 入力チェック用の関数
    3. 深掘りポイント
  14. keyupイベントでリアルタイムチェックを実装
  15. 誕生日まであと何日かを計算する
    1. 計算の考え方
    2. 関数
    3. 深掘りポイント
  16. 年齢に応じて背景色を変える
    1. 例：
    2. 深掘りポイント
  17. 結果表示を強化する（誕生日までの日数も追加）
  18. 3日目の完成コード（HTML＋CSS＋JavaScript）
    1. HTML
    2. CSS（style.css）
    3. JavaScript（script.js）
  19. 3日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● イベント処理は複数組み合わせると“動くUI”になる
    3. ● 関数分割でコードが読みやすくなる
  20. 次のステップ
  21. 4日目のゴールと全体像
  22. ローカルストレージとは？
    1. 保存の基本
    2. 取得の基本
    3. 削除の基本
  23. 履歴を保存するためのデータ構造
  24. 履歴をローカルストレージに保存する関数
  25. 履歴を読み込む関数
    1. 深掘りポイント
  26. 履歴をカードUIで表示する（DOM操作）
    1. カードUIを生成する関数
    2. 深掘りポイント
  27. 履歴削除機能
  28. CSSでカードUIを整える
  29. 4日目の完成コード（HTML＋CSS＋JavaScript）
    1. HTML
    2. CSS（style.css）
    3. JavaScript（script.js）
  30. 4日目で本当に掴んでほしいこと
    1. ● ローカルストレージは「データを残す力」
    2. ● JSONはWebアプリの必須スキル
    3. ● DOM操作で「画面を再描画」できる
    4. ● イベント処理を組み合わせると“動くアプリ”になる
  31. 次のステップ
  32. 5日目のゴールと全体像
  33. 履歴をカードUIにする（CSS強化）
    1. 深掘りポイント
  34. 履歴をカードとして描画する（DOM操作）
    1. 深掘りポイント
  35. 履歴の詳細表示（計算式など）
    1. 詳細表示関数
    2. 深掘りポイント
  36. 履歴の並び替え（新しい順・古い順）
    1. HTMLに並び替えボタンを追加
    2. JavaScriptで並び替え処理
    3. 深掘りポイント
  37. 削除アニメーションを追加する
    1. CSS
    2. JavaScript
    3. 深掘りポイント
  38. 5日目の完成コード（JavaScript）
  39. 5日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● ローカルストレージ＋並び替えで“データ管理ツール”になる
    3. ● イベント処理は複数組み合わせると強力
  40. 次のステップ
  41. 6日目のゴールと全体像
  42. 履歴カードに「メモ編集」機能を追加する
    1. メモ編集ボタンをカードに追加
    2. メモ編集処理
    3. 深掘りポイント
  43. 個別削除のアニメーション強化
    1. CSSアニメーション
    2. JavaScriptで削除処理
    3. 深掘りポイント
  44. カードUIを年齢に応じて色分けする
    1. 年齢 → 色の例
    2. カード生成時に色を適用
    3. 深掘りポイント
  45. 6日目の完成コード（JavaScript）
  46. 6日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● ローカルストレージ＋編集機能で“ライフログツール”になる
    3. ● イベント処理は複数組み合わせると強力
  47. 次のステップ
  48. 7日目のゴールと全体像
  49. 完成版アプリの構造（アーキテクチャ）
    1. JavaScriptの役割分割（完成版）
  50. 完成版HTML（最終形）
  51. 完成版CSS（最終形）
  52. 完成版JavaScript（最終形）
  53. 7日目で本当に掴んでほしいこと
    1. ● JavaScriptの基礎が「ひとつのアプリ」で全部つながった
    2. ● Webアプリは「画面 × 動き × データ」でできている
    3. ● DOM操作はアプリの“手足”
  54. 次のステップ（応用編への橋）

2日目のゴールと全体像

年齢計算機アプリ 2日目のテーマは 「年齢を“より詳しく”計算し、見た目を整え、入力チェックを強化し、DOM操作とイベント処理をさらに深く理解すること」 です。

1日目では

  • 生年月日を入力
  • 年齢（満年齢）を計算
  • 結果を表示

という最小のアプリを作りました。

2日目ではここに “実用性” と “わかりやすさ” を追加します。

  • 生後何日・何ヶ月も計算する
  • CSSで見た目を整える
  • 入力チェックを強化する
  • DOM操作で複数の結果を表示する
  • イベント処理を複数追加する

Webアプリらしさが一気に出てくるステップです。

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