JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 カウンター編

Web APP JavaScript
2026.08.03
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと全体像
  2. HTML/CSSとの連携をもう一段理解する
    1. HTMLは「部品」、JavaScriptは「動かす人」
  3. DOM操作を深掘りする：JavaScriptは画面をどう見ている？
    1. DOMとは「画面の地図」
    2. 要素を取得する方法
  4. イベント処理を深掘りする：関数が「動き」を作る
    1. addEventListener の仕組み
  5. 関数を分けると読みやすくなる
    1. カウンター更新関数を作る
    2. イベント処理がスッキリする
    3. 深掘りポイント
  6. 基本文法を整理する：変数・代入・関数・条件分岐
    1. 変数と代入
    2. 関数
    3. 条件分岐（軽く触れる）
  7. 2日目の完成コード（リセット機能付き）
  8. 2日目で本当に掴んでほしいこと
  9. 3日目のゴールと全体像
  10. カウンターに“ルール”を追加する準備
    1. メッセージ表示エリアを追加する（HTML）
    2. CSSでメッセージの見た目を整える
    3. 深掘りポイント
  11. JavaScriptで最小値・最大値の制限をつける
    1. 制限値を変数で管理する
    2. メッセージ表示関数を作る
    3. カウンター更新関数を改良する
    4. 深掘りポイント
  12. イベント処理にロジックを追加する
    1. ＋ボタン（増やす）
    2. −ボタン（減らす）
    3. リセットボタン
    4. 深掘りポイント
  13. 3日目の完成コード（最小値・最大値付きカウンター）
  14. 3日目で本当に掴んでほしいこと
  15. 4日目のゴールと全体像
  16. 複数カウンターを作るためのHTML構造
    1. カウンターを2つ並べる
    2. 深掘りポイント
  17. DOM操作の効率化 ― querySelectorAll を使う
    1. 複数の要素をまとめて取得する
    2. 複数のカウンターの値を配列で管理する
    3. 深掘りポイント
  18. イベント処理の共通化 ― ループでまとめて処理
    1. カウンター更新関数を「どのカウンターか」を指定できる形にする
    2. 増減処理を共通化する
    3. ボタンにイベントをつける（forEachでまとめて処理）
    4. 深掘りポイント
  19. 4日目の完成コード（複数カウンター対応版）
  20. 4日目で本当に掴んでほしいこと
  21. 5日目のゴールと全体像
  22. HTMLで「設定フォーム」を追加する
    1. カウンターの下に設定欄を追加する
    2. 深掘りポイント
  23. CSSで設定フォームの見た目を整える
    1. シンプルで読みやすいフォームにする
    2. 深掘りポイント
  24. JavaScriptで入力フォームの値を読み取る
    1. 入力フォームを取得する
    2. H3: 設定値を保持する変数
    3. 深掘りポイント
  25. 基本文法の深掘り ― 数値変換と入力チェック
    1. 設定を適用する関数
    2. 深掘りポイント
  26. イベント処理 ― 設定ボタンに動きをつける
    1. 設定ボタンをクリックしたら applySettings を実行
  27. カウンターの増減処理を「設定付き」にする
    1. カウンター表示更新関数
    2. メッセージ表示関数
    3. ＋ボタン（増やす）
    4. −ボタン（減らす）
    5. リセットボタン
  28. 5日目の完成コード（設定可能カウンター）
  29. 5日目で本当に掴んでほしいこと
  30. 6日目のゴールと全体像
  31. 自動カウンターのイメージをつかむ
    1. どんな動きを目指すか
    2. ここで学べること
  32. HTMLに「スタート／ストップ」ボタンを追加する
    1. ボタンを追加する
    2. ボタンの役割
  33. JavaScriptで「時間の流れ」を扱う
    1. setInterval と clearInterval
    2. タイマーIDを覚える変数
    3. 深掘りポイント
  34. 自動カウントのロジックを作る
    1. 自動カウント用の関数
    2. 自動スタート関数
    3. 自動ストップ関数
    4. 深掘りポイント
  35. イベント処理に自動カウントを組み込む
    1. 自動スタート／ストップボタンのイベント
    2. 手動の「＋ボタン」も stepUp を使うようにする
    3. 手動の「−ボタン」はそのまま
    4. 深掘りポイント
  36. 6日目の完成コード（自動カウンター付き設定可能カウンター）
    1. 完成版（コピーしてブラウザで動かせます）
  37. 6日目で本当に掴んでほしいこと
  38. 7日目のゴールと全体像
  39. ファイル分割の意味を理解する
    1. なぜファイルを分けるのか？
    2. 分割するメリット
  40. 完成版のファイル構成
    1. 3つのファイルに分ける
    2. これが「本物のWebアプリ」の基本構造
  41. index.html（画面の構造）
    1. 完成版 HTML（コメント付き）
  42. style.css（見た目）
    1. H3: 完成版 CSS（コメント付き）
  43. app.js（動き）
    1. 完成版 JavaScript（コメント付き）
  44. 7日目で本当に掴んでほしいこと
    1. ここまでで身についた力
    2. 初級者から“Webアプリを作れる人”へ

2日目のゴールと全体像

2日目のテーマは 「JavaScriptで“画面を動かす仕組み”を整理し、コードを読みやすくすること」 です。

1日目では、

  • 数字を増減できる
  • DOM要素を取得して書き換えられる
  • イベント処理でクリックに反応できる

という「動くカウンター」を作りました。

2日目では、このカウンターを少し育てながら、

  • 関数化してコードを整理する
  • DOM操作の理解を深める
  • イベント処理の仕組みをより明確にする
  • 基本文法（変数・関数・代入）の理解を強化する

という方向で進めていきます。

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