基礎から学ぶJavaScript入門 90日コース | Webページを操作するDOM － Day 35：イベント処理

90日で身につけるJavaScript

2026.08.27

Day 35：イベント処理（前半）
イベント処理の考え方をシンプルに整理する
1. イベントとは何か
2. addEventListener()とは何か
clickイベントにフォーカスする
1. clickイベントとは
実践①：ボタンクリックでメッセージを変更する基本例
実践②：クリック回数に応じてメッセージを変える
実践③：ボタンクリックでCSSクラス＋メッセージを同時に変える
Day 35 前半練習用テンプレート
Day 35 前半のまとめ
Day 35：イベント処理（後半）
イベント処理の基本構造を“3ステップ”で捉える
1. イベント処理の3ステップ
addEventListener()を“設計の道具”として見る
1. 基本形の再確認
実践①：ボタンクリックでメッセージを“段階的に”変える
実践②：ボタンクリックで“ON/OFFメッセージ”を切り替える
実践③：イベント処理＋CSS＋メッセージの“ミニアプリ”
Day 35 後半練習用テンプレート
Day 35 後半のまとめ

Day 35：イベント処理（前半）

「addEventListenerで“ユーザーの行動”に反応するページを作る」

Day 35前半では、Webページを「ただ表示するだけ」から一歩進めて、 ユーザーの操作（クリック）に反応するページを作ることを目標にします。

キーワードは、

addEventListener()
click イベント

そして実践テーマは、

ボタンクリック
メッセージ変更

です。

イベント処理の考え方をシンプルに整理する

イベントとは何か

Webページ上では、ユーザーがさまざまな「行動」をします。

ボタンをクリックする
マウスを動かす
キーボードを押す
画面をスクロールする

これらの「行動」が、JavaScriptの世界では イベント と呼ばれます。

イベント処理とは、

「あるイベントが起きたときに、指定した処理を実行する」

という仕組みです。

addEventListener()とは何か

addEventListener() は、

「この要素で、指定した種類のイベントが起きたときに、この処理を実行してね」

とブラウザに登録するためのメソッドです。

基本形は次のようになります。

要素.addEventListener('イベントの種類', 実行したい処理);

要素.addEventListener('イベントの種類', 実行したい処理);

JavaScript

例えば、

buttonElement.addEventListener('click', function () {
  console.log('ボタンがクリックされました');
});

buttonElement.addEventListener('click', function () {
  console.log('ボタンがクリックされました');
});

JavaScript

というコードは、

「buttonElement がクリックされたら、この無名関数の中身を実行する」

という意味になります。

clickイベントにフォーカスする

clickイベントとは

click は、「ユーザーが要素をクリックしたとき」に発生するイベントです。

ボタン
リンク
画像
その他の要素

などに対して、click イベントを設定することができます。

初心者の方にとっては、

「まずはボタンにclickイベントを付ける」

ところから始めるのが、一番分かりやすいです。

実践①：ボタンクリックでメッセージを変更する基本例

目標イメージ

最初は「まだボタンは押されていません」というメッセージ。
ボタンを押すと「ボタンが押されました！」というメッセージに変わる。

HTML＋JavaScriptコード例（最もシンプルな形）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 前半：ボタンクリックでメッセージ変更</title>
</head>
<body>
  <h1>ボタンクリックでメッセージを変更する例</h1>

  <!-- メッセージ表示エリア -->
  <p id="message">まだボタンは押されていません。</p>

  <!-- ボタン -->
  <button id="changeButton">ここをクリック</button>

  <script>
    // ▼ メッセージを表示する<p>要素を取得します
    const messageElement = document.getElementById('message');

    // ▼ ボタン要素を取得します
    const changeButtonElement = document.getElementById('changeButton');

    // ▼ ボタンがクリックされたときの処理を登録します
    changeButtonElement.addEventListener('click', function () {
      // メッセージを変更します
      messageElement.textContent = 'ボタンが押されました！';

      // コンソールにもログを出しておきます（開発者向けの確認用）
      console.log('ボタンがクリックされました。メッセージを変更しました。');
    });
  </script>
</body>
</html>

このコードで押さえておきたいポイント

要素を取得する
- getElementById('message') でメッセージ表示用の <p> を取得しています。
- getElementById('changeButton') でボタンを取得しています。
addEventListenerでclickイベントを登録する
- changeButtonElement.addEventListener('click', function () { ... });
- 「クリックされたときに、この関数の中身を実行する」という意味です。
イベントが起きたときに何をするかを関数の中に書く
- messageElement.textContent = 'ボタンが押されました！';
- ここが「イベントに反応して行う処理」です。

実践②：クリック回数に応じてメッセージを変える

目標イメージ

最初は「まだボタンは押されていません」。
1回目 → 「ボタンが1回押されました」。
2回目 → 「ボタンが2回押されました」。
3回目以降も、回数に応じてメッセージが変わる。

HTML＋JavaScriptコード例（カウンター付き）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 前半：クリック回数でメッセージ変更</title>
</head>
<body>
  <h1>クリック回数に応じてメッセージを変更する例</h1>

  <!-- メッセージ表示エリア -->
  <p id="countMessage">まだボタンは押されていません。</p>

  <!-- ボタン -->
  <button id="countButton">ボタンを押す</button>

  <script>
    // ▼ メッセージ表示用の<p>要素を取得します
    const countMessageElement = document.getElementById('countMessage');

    // ▼ ボタン要素を取得します
    const countButtonElement = document.getElementById('countButton');

    // ▼ ボタンが何回押されたかを記録する変数
    let count = 0;

    // ▼ ボタンがクリックされたときの処理
    countButtonElement.addEventListener('click', function () {
      // カウントを1増やします
      count = count + 1;

      // 現在の回数に応じてメッセージを変更します
      if (count === 1) {
        countMessageElement.textContent = 'ボタンが1回押されました。';
      } else {
        countMessageElement.textContent = `ボタンが${count}回押されました。`;
      }

      // コンソールにも現在の回数を表示します
      console.log('ボタンが押されました。現在の回数:', count);
    });
  </script>
</body>
</html>

重要なポイントの深掘り

let count = 0; → 「状態」を表す変数です。イベントが起きるたびに変化します。
countButtonElement.addEventListener('click', function () { ... }); → イベントが起きるたびに、この関数が呼ばれます。
count = count + 1; → 「前の状態に1を足す」という形で、状態を更新しています。

イベント処理では、

「イベントが起きるたびに、状態を更新し、その状態に応じて画面を変える」

という流れが非常に重要です。

実践③：ボタンクリックでCSSクラス＋メッセージを同時に変える

Day 34で学んだ classList と組み合わせると、「メッセージ」と「見た目」を同時に変えることができます。

目標イメージ

最初は「ライトモードです」というメッセージ。
ボタンを押すと「ダークモードです」に変わり、背景も暗くなる。
もう一度押すと、元に戻る。

HTML＋CSS＋JavaScriptコード例（イベント＋CSS＋メッセージ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 前半：クリックでダークモード＋メッセージ変更</title>
  <style>
    /* 通常モード */
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    /* ダークモード */
    body.dark-mode {
      background-color: #121212;
      color: #f0f0f0;
    }

    #toggleButton {
      margin-top: 16px;
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>イベント処理＋CSS＋メッセージ変更</h1>

  <!-- メッセージ表示エリア -->
  <p id="modeMessage">現在はライトモードです。</p>

  <!-- ボタン -->
  <button id="toggleButton">ダークモードに切り替える</button>

  <script>
    // ▼ body要素を取得します（背景色を変えるため）
    const bodyElement = document.body;

    // ▼ メッセージ表示用の<p>要素を取得します
    const modeMessageElement = document.getElementById('modeMessage');

    // ▼ ボタン要素を取得します
    const toggleButtonElement = document.getElementById('toggleButton');

    // ▼ ボタンがクリックされたときの処理
    toggleButtonElement.addEventListener('click', function () {
      // dark-modeクラスをON/OFF切り替えます
      bodyElement.classList.toggle('dark-mode');

      // 現在ダークモードかどうかを判定します
      const isDarkMode = bodyElement.classList.contains('dark-mode');

      // 状態に応じてメッセージとボタンのラベルを変更します
      if (isDarkMode) {
        modeMessageElement.textContent = '現在はダークモードです。';
        toggleButtonElement.textContent = 'ライトモードに戻す';
        console.log('ダークモードを有効にしました。');
      } else {
        modeMessageElement.textContent = '現在はライトモードです。';
        toggleButtonElement.textContent = 'ダークモードに切り替える';
        console.log('ダークモードを解除しました。');
      }
    });
  </script>
</body>
</html>

ここで意識してほしいこと

イベント（click）が「状態の切り替え」のきっかけになっていること。
状態（ダークモードかどうか）に応じて、
- CSSクラス（dark-mode）
- メッセージ（modeMessageElement.textContent）
- ボタンラベル（toggleButtonElement.textContent）を同時に変えていること。

イベント処理は、

「ユーザーの行動をトリガーにして、状態とUIを更新する」

という仕組みだと捉えると、理解しやすくなります。

Day 35 前半練習用テンプレート

最後に、ボタンクリックとメッセージ変更をまとめて練習できるテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 前半：イベント処理 練習テンプレート</title>
</head>
<body>
  <h1>Day 35 前半：イベント処理 練習</h1>

  <!-- セクション1：シンプルなメッセージ変更 -->
  <section>
    <h2>シンプルなボタンクリック</h2>
    <p id="simpleMessage">まだボタンは押されていません。</p>
    <button id="simpleButton">ここをクリック</button>
  </section>

  <!-- セクション2：クリック回数に応じたメッセージ -->
  <section>
    <h2>クリック回数でメッセージ変更</h2>
    <p id="countMessage">まだボタンは押されていません。</p>
    <button id="countButton">ボタンを押す</button>
  </section>

  <script>
    console.log('--- イベント処理 練習開始 ---');

    // ▼ セクション1：シンプルなメッセージ変更
    const simpleMessageElement = document.getElementById('simpleMessage');
    const simpleButtonElement = document.getElementById('simpleButton');

    simpleButtonElement.addEventListener('click', function () {
      simpleMessageElement.textContent = 'ボタンが押されました！';
      console.log('シンプルボタンがクリックされました。');
    });

    // ▼ セクション2：クリック回数に応じたメッセージ変更
    const countMessageElement = document.getElementById('countMessage');
    const countButtonElement = document.getElementById('countButton');
    let count = 0;

    countButtonElement.addEventListener('click', function () {
      count = count + 1;

      if (count === 1) {
        countMessageElement.textContent = 'ボタンが1回押されました。';
      } else {
        countMessageElement.textContent = `ボタンが${count}回押されました。`;
      }

      console.log('カウントボタンがクリックされました。現在の回数:', count);
    });

    console.log('--- イベント処理 練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

Day 35 前半のまとめ

Day 35前半では、

イベントとは「ユーザーの行動」であり、 addEventListener() で「その行動が起きたときの処理」を登録することを学んだこと。
click イベントを使って、ボタンクリックに反応する基本的なコードを書いたこと。
状態（クリック回数やモード）を変数で管理し、その状態に応じてメッセージを変更する流れを体験したこと。
イベント処理が「ユーザーの行動 → 状態更新 → UI更新」という流れで動いていることを理解したこと。

を整理しました。

この「イベント＋状態＋UI」の組み合わせは、今後のフォーム処理、ゲーム、インタラクティブなアプリケーションなど、あらゆる場面で登場する基礎パターンです。

今日のコードを何度か書き直しながら、

「どのイベントに、どんな処理を紐づけるか」

を意識して練習していくことで、 JavaScriptで「動くWebページ」を作る感覚が、ぐっと掴みやすくなっていきます。

Day 35：イベント処理（後半）

「addEventListenerとclickで“気持ちよく動くボタン”を設計する」

Day 35後半では、前半で触れた addEventListener() と click を、もう一歩踏み込んで「設計の目線」で整理していきます。

単に「動くコードを書く」だけでなく、

どの要素に
どのイベントを
どんな処理として

結びつけるかを、ステップで考えられるようになることを目標にします。

イベント処理の基本構造を“3ステップ”で捉える

イベント処理の3ステップ

イベント処理は、次の3ステップで考えると整理しやすくなります。

対象要素を決めて取得する
- どのボタン・どのテキストを操作したいか
どのイベントに反応するか決める
- 今回は click
イベントが起きたときに何をするか決める
- メッセージ変更、CSS変更など

この3つを順番に決めていくと、「なんとなく書くJavaScript」から「設計されたJavaScript」に変わっていきます。

addEventListener()を“設計の道具”として見る

基本形の再確認

addEventListener() の基本形は次の通りです。

要素.addEventListener('イベントの種類', 実行したい処理);

要素.addEventListener('イベントの種類', 実行したい処理);

JavaScript

例えばボタンなら、

buttonElement.addEventListener('click', function () {
  // ここにクリックされたときの処理を書く
});

buttonElement.addEventListener('click', function () {
  // ここにクリックされたときの処理を書く
});

JavaScript

ここで大事なのは、

「どの要素か」 → buttonElement
「どのイベントか」 → 'click'
「何をするか」 → function () { ... } の中身

という3つを、意識的に分けて考えることです。

実践①：ボタンクリックでメッセージを“段階的に”変える

シナリオを先に言葉で書いてみる

まず、コードを書く前に「やりたいこと」を日本語で整理します。

ページを開いたときは「まだボタンは押されていません」と表示する。
ボタンを押したら「ボタンが押されました！」に変える。
もう一度押したら「もう一度押されました！」に変える。

このように、 「状態の変化」 を言葉で書いてからコードに落とすと、迷いが減ります。

コード例：2段階でメッセージを変える

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 後半：段階的なメッセージ変更</title>
</head>
<body>
  <h1>ボタンクリックで段階的にメッセージを変更する例</h1>

  <!-- メッセージ表示エリア -->
  <p id="stepMessage">まだボタンは押されていません。</p>

  <!-- ボタン -->
  <button id="stepButton">ボタンを押す</button>

  <script>
    // ▼ メッセージ表示用の<p>要素を取得します
    const stepMessageElement = document.getElementById('stepMessage');

    // ▼ ボタン要素を取得します
    const stepButtonElement = document.getElementById('stepButton');

    // ▼ 現在の「段階」を表す変数（0:未クリック, 1:1回目, 2:2回目以降）
    let step = 0;

    // ▼ ボタンがクリックされたときの処理
    stepButtonElement.addEventListener('click', function () {
      // 段階を1つ進めます
      step = step + 1;

      // 段階に応じてメッセージを変更します
      if (step === 1) {
        stepMessageElement.textContent = 'ボタンが押されました！';
      } else if (step === 2) {
        stepMessageElement.textContent = 'もう一度押されました！';
      } else {
        stepMessageElement.textContent = `ボタンが合計${step}回押されています。`;
      }

      console.log('ボタンがクリックされました。現在の段階:', step);
    });
  </script>
</body>
</html>

深掘りポイント

let step = 0; → 「状態」を変数で持つことがイベント処理の基本です。
step = step + 1; → イベントが起きるたびに状態が変化します。
if / else if / else → 状態に応じてUI（メッセージ）を変えるロジックです。

イベント処理は、

「イベント → 状態更新 → UI更新」

という流れで考えると、整理しやすくなります。

実践②：ボタンクリックで“ON/OFFメッセージ”を切り替える

シナリオを言葉で整理する

最初は「OFFです」と表示する。
ボタンを押すと「ONです」に変わる。
もう一度押すと「OFFです」に戻る。

これは、 「真偽値（true / false）で状態を持つ」 練習として最適です。

コード例：ON/OFF切り替えメッセージ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 後半：ON/OFFメッセージ切り替え</title>
</head>
<body>
  <h1>ON/OFFメッセージ切り替え</h1>

  <!-- メッセージ表示エリア -->
  <p id="switchMessage">現在はOFFです。</p>

  <!-- ボタン -->
  <button id="switchButton">ONにする</button>

  <script>
    // ▼ メッセージ表示用の<p>要素を取得します
    const switchMessageElement = document.getElementById('switchMessage');

    // ▼ ボタン要素を取得します
    const switchButtonElement = document.getElementById('switchButton');

    // ▼ 現在ONかOFFかを表す真偽値（false:OFF, true:ON）
    let isOn = false;

    // ▼ ボタンがクリックされたときの処理
    switchButtonElement.addEventListener('click', function () {
      // 状態を反転させます（false→true, true→false）
      isOn = !isOn;

      // 状態に応じてメッセージとボタンのラベルを変更します
      if (isOn) {
        switchMessageElement.textContent = '現在はONです。';
        switchButtonElement.textContent = 'OFFにする';
      } else {
        switchMessageElement.textContent = '現在はOFFです。';
        switchButtonElement.textContent = 'ONにする';
      }

      console.log('スイッチボタンがクリックされました。現在の状態:', isOn ? 'ON' : 'OFF');
    });
  </script>
</body>
</html>

深掘りポイント

let isOn = false; → 真偽値で状態を持つと、ON/OFFのような2値の切り替えが分かりやすくなります。
isOn = !isOn; → ! は「反転」を意味し、false → true、true → false に切り替えます。
メッセージとボタンラベルを同時に変えることで、「状態に応じてUI全体を更新する」感覚が身につきます。

実践③：イベント処理＋CSS＋メッセージの“ミニアプリ”

Day 34で学んだ classList と、Day 35の addEventListener を組み合わせて、「ボタンクリックで見た目とメッセージを同時に変える」ミニアプリを作ってみます。

シナリオ

最初はライトモードで「ライトモードです」と表示。
ボタンを押すとダークモードになり、「ダークモードです」と表示。
もう一度押すとライトモードに戻る。

コード例：ダークモード＋メッセージ切り替えミニアプリ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 後半：イベント＋CSS＋メッセージ ミニアプリ</title>
  <style>
    /* ライトモード */
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    /* ダークモード */
    body.dark-mode {
      background-color: #121212;
      color: #f0f0f0;
    }

    #modeToggleButton {
      margin-top: 16px;
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>ダークモード切り替えミニアプリ</h1>

  <!-- メッセージ表示エリア -->
  <p id="modeMessage">現在はライトモードです。</p>

  <!-- ボタン -->
  <button id="modeToggleButton">ダークモードに切り替える</button>

  <script>
    // ▼ body要素を取得します（背景色を変えるため）
    const bodyElement = document.body;

    // ▼ メッセージ表示用の<p>要素を取得します
    const modeMessageElement = document.getElementById('modeMessage');

    // ▼ ボタン要素を取得します
    const modeToggleButtonElement = document.getElementById('modeToggleButton');

    // ▼ ボタンがクリックされたときの処理
    modeToggleButtonElement.addEventListener('click', function () {
      // dark-modeクラスをON/OFF切り替えます
      bodyElement.classList.toggle('dark-mode');

      // 現在ダークモードかどうかを判定します
      const isDarkMode = bodyElement.classList.contains('dark-mode');

      // 状態に応じてメッセージとボタンのラベルを変更します
      if (isDarkMode) {
        modeMessageElement.textContent = '現在はダークモードです。';
        modeToggleButtonElement.textContent = 'ライトモードに戻す';
      } else {
        modeMessageElement.textContent = '現在はライトモードです。';
        modeToggleButtonElement.textContent = 'ダークモードに切り替える';
      }

      console.log('モード切り替えボタンがクリックされました。現在のモード:', isDarkMode ? 'ダーク' : 'ライト');
    });
  </script>
</body>
</html>

深掘りポイント

イベント（click）が「状態切り替え」のトリガーになっていること。
状態（ダークかライトか）に応じて、
- CSSクラス（dark-mode）
- メッセージ（modeMessageElement.textContent）
- ボタンラベル（modeToggleButtonElement.textContent）を同時に更新していること。

ここまで来ると、

「イベント処理は、ユーザーの行動をきっかけに状態とUIを更新する仕組み」

だと、かなりはっきり見えてくるはずです。

Day 35 後半練習用テンプレート

最後に、今日の内容をまとめて練習できるテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 35 後半：イベント処理 総合練習テンプレート</title>
  <style>
    body {
      font-family: sans-serif;
    }
    section {
      margin-bottom: 24px;
    }
  </style>
</head>
<body>
  <h1>Day 35 後半：イベント処理 総合練習</h1>

  <!-- セクション1：段階的メッセージ変更 -->
  <section>
    <h2>段階的メッセージ変更</h2>
    <p id="stepMessage">まだボタンは押されていません。</p>
    <button id="stepButton">ボタンを押す</button>
  </section>

  <!-- セクション2：ON/OFF切り替え -->
  <section>
    <h2>ON/OFFメッセージ切り替え</h2>
    <p id="switchMessage">現在はOFFです。</p>
    <button id="switchButton">ONにする</button>
  </section>

  <script>
    console.log('--- イベント処理 総合練習開始 ---');

    // ▼ セクション1：段階的メッセージ変更
    const stepMessageElement = document.getElementById('stepMessage');
    const stepButtonElement = document.getElementById('stepButton');
    let step = 0;

    stepButtonElement.addEventListener('click', function () {
      step = step + 1;

      if (step === 1) {
        stepMessageElement.textContent = 'ボタンが押されました！';
      } else if (step === 2) {
        stepMessageElement.textContent = 'もう一度押されました！';
      } else {
        stepMessageElement.textContent = `ボタンが合計${step}回押されています。`;
      }

      console.log('段階的メッセージ：現在の段階', step);
    });

    // ▼ セクション2：ON/OFFメッセージ切り替え
    const switchMessageElement = document.getElementById('switchMessage');
    const switchButtonElement = document.getElementById('switchButton');
    let isOn = false;

    switchButtonElement.addEventListener('click', function () {
      isOn = !isOn;

      if (isOn) {
        switchMessageElement.textContent = '現在はONです。';
        switchButtonElement.textContent = 'OFFにする';
      } else {
        switchMessageElement.textContent = '現在はOFFです。';
        switchButtonElement.textContent = 'ONにする';
      }

      console.log('ON/OFFメッセージ：現在の状態', isOn ? 'ON' : 'OFF');
    });

    console.log('--- イベント処理 総合練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

Day 35 後半のまとめ

Day 35後半では、

イベント処理を「要素取得 → イベント選択 → 処理定義」の3ステップで考える視点を持ったこと。
addEventListener('click', ...) を、単なる文法ではなく「設計の道具」として捉え直したこと。
段階的なメッセージ変更、ON/OFF切り替え、ダークモード＋メッセージのミニアプリを通して、「イベント → 状態更新 → UI更新」という流れを体験したこと。

この感覚が身につくと、ボタンだけでなく、フォーム入力、スクロール、キーボード操作など、さまざまなイベントを使ったインタラクティブなページ作りに、自然と踏み出せるようになります。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Day 35：イベント処理（前半）

イベント処理の考え方をシンプルに整理する

イベントとは何か

addEventListener()とは何か

clickイベントにフォーカスする

clickイベントとは

実践①：ボタンクリックでメッセージを変更する基本例

目標イメージ

HTML＋JavaScriptコード例（最もシンプルな形）

このコードで押さえておきたいポイント

実践②：クリック回数に応じてメッセージを変える

目標イメージ

HTML＋JavaScriptコード例（カウンター付き）

重要なポイントの深掘り

実践③：ボタンクリックでCSSクラス＋メッセージを同時に変える

目標イメージ

HTML＋CSS＋JavaScriptコード例（イベント＋CSS＋メッセージ）

ここで意識してほしいこと

Day 35 前半 練習用テンプレート

Day 35 前半のまとめ

Day 35：イベント処理（後半）

イベント処理の基本構造を“3ステップ”で捉える

イベント処理の3ステップ

addEventListener()を“設計の道具”として見る

基本形の再確認

実践①：ボタンクリックでメッセージを“段階的に”変える

シナリオを先に言葉で書いてみる

コード例：2段階でメッセージを変える

深掘りポイント

実践②：ボタンクリックで“ON/OFFメッセージ”を切り替える

シナリオを言葉で整理する

コード例：ON/OFF切り替えメッセージ

深掘りポイント

実践③：イベント処理＋CSS＋メッセージの“ミニアプリ”

シナリオ

コード例：ダークモード＋メッセージ切り替えミニアプリ

深掘りポイント

Day 35 後半 練習用テンプレート

Day 35 後半のまとめ

広告ブロッカーが検出されました

Day 35 前半練習用テンプレート

Day 35 後半練習用テンプレート