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

Web APP JavaScript
2026.08.05
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと全体像
  2. BMI判定を追加する
    1. 判定関数を作る
    2. 深掘りポイント
  3. CSSで見た目を整える
    1. シンプルなCSS例
    2. 深掘りポイント
  4. 入力チェックを強化する
    1. 入力チェックの例
    2. 深掘りポイント
  5. DOM操作を増やす：色を変える・判定を追加表示する
    1. 深掘りポイント
  6. 2日目の完成コード（HTML＋CSS＋JavaScript）
    1. HTML
    2. CSS（style.css）
    3. JavaScript（script.js）
  7. 2日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を動かす力」
    2. ● イベント処理はアプリの心臓
    3. ● CSSで見た目を整えると“アプリらしさ”が出る
    4. ● 条件分岐で「判定」や「エラー表示」ができる
  8. 次のステップ
  9. 3日目のゴールと全体像
  10. 入力欄のリアルタイムチェック（keyupイベント）
    1. なぜリアルタイムチェックが必要なのか？
    2. 入力チェック用の関数
    3. 深掘りポイント
  11. keyupイベントでリアルタイムチェックを実装
    1. 深掘りポイント
  12. 判定に応じて背景色を変える（UIの強化）
    1. 深掘りポイント
  13. BMI履歴を追加表示する（DOM操作の応用）
    1. HTMLに履歴表示用の領域を追加
    2. 履歴を追加する関数
    3. 深掘りポイント
  14. 3日目の完成コード（HTML＋CSS＋JavaScript）
    1. HTML
    2. CSS（style.css）
    3. JavaScript（script.js）
  15. 3日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● イベント処理は複数使うと“動くUI”になる
    3. ● 関数分割でコードが読みやすくなる
  16. 次のステップ
  17. 4日目のゴールと全体像
  18. ローカルストレージとは？
    1. 保存の基本
    2. 取得の基本
    3. 削除の基本
  19. BMI履歴をローカルストレージに保存する
    1. 保存する関数
    2. 取得する関数
    3. 深掘りポイント
  20. 履歴を画面に描画する（DOM操作）
    1. 深掘りポイント
  21. 履歴削除ボタンを追加する
    1. HTMLにボタンを追加
    2. JavaScriptで削除処理
    3. 深掘りポイント
  22. 4日目の完成コード（HTML＋CSS＋JavaScript）
    1. HTML
    2. CSS（style.css）
    3. JavaScript（script.js）
  23. 4日目で本当に掴んでほしいこと
    1. ● ローカルストレージは「データを残す力」
    2. ● JSONはWebアプリの必須スキル
    3. ● DOM操作で「画面を再描画」できる
    4. ● イベント処理を組み合わせると“動くアプリ”になる
  24. 次のステップ
  25. 5日目のゴールと全体像
  26. 履歴をカードUIにする（CSS強化）
    1. CSS（カードUI）
    2. 深掘りポイント
  27. 履歴をカードとして描画する（DOM操作）
    1. 深掘りポイント
  28. 履歴の詳細表示（モーダル風）
    1. HTMLに詳細表示用の領域を追加
    2. JavaScriptで詳細表示
    3. CSS（詳細カード）
  29. 履歴の並び替え（新しい順・古い順）
    1. HTMLに並び替えボタンを追加
    2. JavaScriptで並び替え処理
    3. 深掘りポイント
  30. 履歴にタイムスタンプを追加する（保存時）
  31. 5日目の完成コード（JavaScript）
  32. 5日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● ローカルストレージ＋並び替えで“データ管理ツール”になる
    3. ● イベント処理は複数組み合わせると強力
  33. 次のステップ
  34. 6日目のゴールと全体像
  35. 履歴カードに「削除ボタン」を追加する
    1. まずはカードUIを拡張します。
    2. 深掘りポイント
  36. 履歴を削除する（アニメーション付き）
    1. CSSアニメーション
    2. JavaScriptで削除処理
    3. 深掘りポイント
  37. 履歴に「メモ（コメント）」を追加できるようにする
    1. 編集用の関数
    2. 深掘りポイント
  38. カードUIをさらに強化する（CSS）
  39. 6日目の完成コード（JavaScript）
  40. 6日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● ローカルストレージ＋編集機能で“情報管理ツール”になる
    3. ● イベント処理は複数組み合わせると強力
  41. 次のステップ
  42. 7日目のゴールと全体像
  43. 完成版アプリの構造（アーキテクチャ）
    1. JavaScriptの構造（完成版）
  44. 完成版HTML（最終形）
  45. 完成版CSS（最終形）
  46. 完成版JavaScript（最終形）
  47. 7日目で本当に掴んでほしいこと
    1. ● JavaScriptの基礎が「ひとつのアプリ」で全部つながった
    2. ● Webアプリは「画面 × 動き × データ」でできている
    3. ● DOM操作はアプリの“手足”
  48. 次のステップ（応用編への橋）

2日目のゴールと全体像

BMI計算機アプリ 2日目のテーマは 「見た目を整え、判定機能を追加し、イベント処理とDOM操作をさらに深く理解すること」 です。

1日目で作ったのは「計算して結果を表示するだけ」の最小アプリでした。 2日目ではここに “使いやすさ” と “わかりやすさ” を追加します。

  • BMIの判定（痩せ・普通・肥満など）
  • CSSで見た目を整える
  • 入力チェックを強化する
  • DOM操作を増やして「動くUI」を作る
  • イベント処理を複数追加する

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

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