JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：ボタンを押すアプリ

Web APP JavaScript
スポンサーリンク

4日目のゴール

4日目のテーマは
「イベントと id を、“小さいおもちゃ”から“ちゃんとしたミニアプリ”に育てる感覚をつかむこと」 です。

今日もキーワードは同じです。

JavaScript はイベントで動く
id で HTML を取得する

ただし今日は、「ちょっと現実っぽい UI」を題材にして、
イベントと id をどう組み合わせるかをじっくり見ていきます。

ON/OFF スイッチ風ボタンを作ってみる

状態を持つボタンのイメージ

まずは、「ON / OFF を切り替えるスイッチ風ボタン」を作ります。

やりたいことはこうです。

最初は OFF 状態
ボタンを押すたびに ON / OFF が切り替わる
画面の表示も「今どっちか」が分かるようにする

HTML はこうします。

<p id="statusLabel">現在：OFF</p>
<button id="toggleButton">切り替え</button>

<script src="app.js"></script>

JavaScript はこうです。

const statusLabel = document.getElementById("statusLabel");
const toggleButton = document.getElementById("toggleButton");

let isOn = false;

toggleButton.addEventListener("click", function () {
  if (isOn) {
    isOn = false;
    statusLabel.textContent = "現在：OFF";
  } else {
    isOn = true;
    statusLabel.textContent = "現在：ON";
  }
});
JavaScript

ここで深掘りしたいポイントは三つです。

id で HTML を取得して、JavaScript 側に「リモコン」を持ってくること
イベント（click）の中で、変数 isOn を切り替えていること
画面の表示は、あくまで isOn の「結果」として更新していること

「状態（isOn）」と「見た目（statusLabel.textContent）」を分けて考えられると、
ボタンの動きが一気に理解しやすくなります。

「押された回数」を表示するボタン

イベントが起きた回数を数える

次は、「ボタンが何回押されたか」を表示するミニアプリです。

HTML はこうします。

<p id="countLabel">0 回押されました</p>
<button id="countButton">押してね</button>

<script src="app.js"></script>

JavaScript はこうです。

const countLabel = document.getElementById("countLabel");
const countButton = document.getElementById("countButton");

let count = 0;

countButton.addEventListener("click", function () {
  count = count + 1;
  countLabel.textContent = count + " 回押されました";
});
JavaScript

ここで重要なのは、「イベントの外に変数を置く」というルールです。

count を addEventListener の外に書いているからこそ、
クリックされるたびに「前回の値から」増えていきます。

もし、こう書いてしまうとどうなるか。

countButton.addEventListener("click", function () {
  let count = 0;
  count = count + 1;
  countLabel.textContent = count + " 回押されました";
});
JavaScript

この場合、クリックのたびに count が 0 から始まるので、
表示はずっと「1 回押されました」のままです。

「イベントの外に置いた変数は“記憶”になる」
この感覚を、ここでしっかりつかんでおいてください。

3つのボタンでメッセージを切り替える

id とイベントの組み合わせを整理してみる

今度は、「3つのボタンで違うメッセージを出す」アプリです。

HTML はこうします。

<p id="message">まだ何も選ばれていません</p>

<button id="goodButton">いいね</button>
<button id="badButton">よくないね</button>
<button id="resetButton">リセット</button>

<script src="app.js"></script>

JavaScript はこうです。

const message = document.getElementById("message");
const goodButton = document.getElementById("goodButton");
const badButton = document.getElementById("badButton");
const resetButton = document.getElementById("resetButton");

goodButton.addEventListener("click", function () {
  message.textContent = "あなたの評価：いいね";
});

badButton.addEventListener("click", function () {
  message.textContent = "あなたの評価：よくないね";
});

resetButton.addEventListener("click", function () {
  message.textContent = "まだ何も選ばれていません";
});
JavaScript

ここで意識してほしいのは、「id とイベントの対応関係」です。

goodButton → click → 「いいね」メッセージ
badButton → click → 「よくないね」メッセージ
resetButton → click → 初期メッセージ

id は「HTML のラベル」、
getElementById で作った変数は「そのラベルを持つ要素のリモコン」、
addEventListener は「リモコンに“押されたときの反応”を登録するもの」
というイメージで整理しておくと、頭の中がスッキリします。

関数を使って「イベントの中身」をきれいにする

同じ処理を関数にまとめる

さっきの評価ボタンを、少しだけ整理してみます。

const message = document.getElementById("message");
const goodButton = document.getElementById("goodButton");
const badButton = document.getElementById("badButton");
const resetButton = document.getElementById("resetButton");

function setMessage(text) {
  message.textContent = text;
}

goodButton.addEventListener("click", function () {
  setMessage("あなたの評価：いいね");
});

badButton.addEventListener("click", function () {
  setMessage("あなたの評価：よくないね");
});

resetButton.addEventListener("click", function () {
  setMessage("まだ何も選ばれていません");
});
JavaScript

ここで深掘りしたいのは、「関数の役割」です。

setMessage は、「メッセージを変える」という意味のかたまり
イベントの中では、「どのメッセージにするか」だけを決めている

イベントは「きっかけ」、
関数は「やりたいことのまとまり」
この分け方ができると、コードが読みやすくなります。

「押したボタンの情報」を使う書き方を体験する

event.target を使ってみる

少しだけレベルを上げて、「どのボタンが押されたか」をコード側で知る書き方も見てみます。

HTML はこうします。

<button class="colorButton" id="red">赤</button>
<button class="colorButton" id="green">緑</button>
<button class="colorButton" id="blue">青</button>

<p id="colorResult">色はまだ選ばれていません</p>

<script src="app.js"></script>

JavaScript はこうです。

const colorButtons = document.querySelectorAll(".colorButton");
const colorResult = document.getElementById("colorResult");

function handleColorClick(event) {
  const clickedButton = event.target;
  const colorId = clickedButton.id;

  if (colorId === "red") {
    colorResult.textContent = "赤が選ばれました";
  } else if (colorId === "green") {
    colorResult.textContent = "緑が選ばれました";
  } else if (colorId === "blue") {
    colorResult.textContent = "青が選ばれました";
  }
}

for (let i = 0; i < colorButtons.length; i = i + 1) {
  colorButtons[i].addEventListener("click", handleColorClick);
}
JavaScript

ここで新しく出てきたのは二つです。

querySelectorAll で「class が colorButton の要素を全部まとめて取っている」こと
handleColorClick の引数 event から、event.target で「実際に押されたボタン」を受け取っていること

超初級の範囲では、
「id で 1 個ずつ取る」だけでも十分ですが、
「押されたボタンの情報を event から取れる」という感覚を
一度見ておくと、この先とても楽になります。

4日目のまとめ 「イベント＋id で“ミニアプリ”になってきた」

今日のポイントを、ぎゅっとまとめるとこうなります。

id は HTML のラベル、getElementById で「リモコン」を手に入れる
イベントは「きっかけ」で、実際の処理はその中に書くか、別の関数に分ける
イベントの外に置いた変数は「記憶」として使える（押された回数、ON/OFF 状態など）
複数のボタンがあっても、やることは「id で取る → click を登録する」の繰り返し
必要になったら、関数で処理をまとめると、コードの意味が見えやすくなる

ここまで来ると、
「ボタンを押すアプリ」はもう“おもちゃ”ではなく、
立派な「ミニ UI」として扱えるレベルになっています。

次のステップでは、
ここに「文字の書き換え」「入力の読み取り」「条件分岐」などを
少しずつ足していくだけです。
土台は、ずっと今日までの「イベント＋id」のままです。

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