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

Web APP JavaScript
スポンサーリンク

5日目のゴール

5日目のテーマは
「イベントと id を、“バラバラのテクニック”から“自分で設計できるパターン”にすること」 です。

ここまでであなたは、

id でボタンをつかまえる
click イベントを登録する
押された回数を数える
メッセージを切り替える

といったことを、もう何度も書いてきました。

今日はそれを「型」として整理して、
どんなボタンでも同じ考え方で設計できる状態を目指します。

ボタン＋メッセージの「基本パターン」を言語化する

1ボタン1メッセージの型

まずは、いちばん基本の形を“型”としてはっきりさせます。

<button id="helloButton">あいさつ</button>
<p id="message">まだ何も起きていません</p>

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

const helloButton = document.getElementById("helloButton");
const message = document.getElementById("message");

helloButton.addEventListener("click", function () {
  message.textContent = "こんにちは！";
});
JavaScript

これを日本語で分解すると、こうなります。

HTML で「ボタン」と「表示する場所」に id をつける
JavaScript で、その二つを getElementById でつかまえる
ボタンに click イベントを登録し、その中で表示用の要素を書き換える

この「3ステップ」が、
ボタン＋メッセージ系の UI の基本パターンです。

ここまでを、コードを見ずに言葉で説明できるかどうかが、5日目のスタートラインです。

「ボタンの数が増えても同じ型」で考える

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

今度はボタンを 3 つに増やしますが、やることは同じです。

<button id="yesButton">はい</button>
<button id="noButton">いいえ</button>
<button id="maybeButton">どちらとも言えない</button>

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

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

const yesButton = document.getElementById("yesButton");
const noButton = document.getElementById("noButton");
const maybeButton = document.getElementById("maybeButton");
const answerMessage = document.getElementById("answerMessage");

yesButton.addEventListener("click", function () {
  answerMessage.textContent = "あなたの答え：はい";
});

noButton.addEventListener("click", function () {
  answerMessage.textContent = "あなたの答え：いいえ";
});

maybeButton.addEventListener("click", function () {
  answerMessage.textContent = "あなたの答え：どちらとも言えない";
});
JavaScript

ここで意識してほしいのは、「型は変わっていない」ということです。

ボタンに id をつける
表示場所に id をつける
それぞれを getElementById でつかまえる
ボタンごとに click イベントを登録し、メッセージを書き換える

ボタンが 1 個でも 3 個でも、
やっていることはまったく同じです。

「状態を持つボタン」をもう一度、設計目線で見る

ミュートボタン風の ON/OFF

次は、「ミュート／ミュート解除」みたいなボタンを考えます。

<button id="muteButton">ミュートする</button>
<p id="muteStatus">現在：ミュートではありません</p>

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

const muteButton = document.getElementById("muteButton");
const muteStatus = document.getElementById("muteStatus");

let isMuted = false;

muteButton.addEventListener("click", function () {
  if (isMuted) {
    isMuted = false;
    muteButton.textContent = "ミュートする";
    muteStatus.textContent = "現在：ミュートではありません";
  } else {
    isMuted = true;
    muteButton.textContent = "ミュート解除";
    muteStatus.textContent = "現在：ミュート中";
  }
});
JavaScript

ここで深掘りしたいのは、「どこに何の役割を持たせているか」です。

isMuted という変数が「本当の状態」を覚えている
muteButton.textContent は「ボタンの見た目」を変えている
muteStatus.textContent は「状態の説明」を変えている

イベントの中でやっていることは、
「状態を反転させる」＋「見た目を状態に合わせる」
この 2 つだけです。

この分解ができると、
「押すたびに変わるボタン」を自分で設計できるようになります。

「押された回数」と「最後に押したボタン」を両方覚える

ちょっとだけ情報量を増やしてみる

次は、「どのボタンを何回押したか」を扱ってみます。

<button id="goodButton">いいね</button>
<button id="badButton">よくないね</button>

<p id="lastMessage">最後の評価：まだありません</p>
<p id="countMessage">合計 0 回押されました</p>

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

const goodButton = document.getElementById("goodButton");
const badButton = document.getElementById("badButton");
const lastMessage = document.getElementById("lastMessage");
const countMessage = document.getElementById("countMessage");

let totalCount = 0;

function updateCount() {
  countMessage.textContent = "合計 " + totalCount + " 回押されました";
}

goodButton.addEventListener("click", function () {
  totalCount = totalCount + 1;
  lastMessage.textContent = "最後の評価：いいね";
  updateCount();
});

badButton.addEventListener("click", function () {
  totalCount = totalCount + 1;
  lastMessage.textContent = "最後の評価：よくないね";
  updateCount();
});
JavaScript

ここで重要なのは、「何をどこに覚えさせているか」です。

totalCount は「押された回数」という状態
lastMessage は「最後に押したボタンの種類」
countMessage は「状態を人間向けの文章にしたもの」

イベントの中では、

状態を更新する（totalCount を増やす）
状態に応じて表示を更新する（lastMessage, countMessage）

という流れになっています。

「状態」と「表示」を分けて考える癖がつくと、
アプリが複雑になっても整理しやすくなります。

「イベントの登録部分」と「処理の中身」をきれいに分ける

5日目で一度、ちゃんと整理して書いてみる

ここまでの考え方を使って、
ボタン 3 つ＋メッセージ 1 つを、少し“設計っぽく”書いてみます。

<button id="smallButton">小</button>
<button id="mediumButton">中</button>
<button id="largeButton">大</button>

<p id="sizeMessage">サイズは未選択です</p>

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

const smallButton = document.getElementById("smallButton");
const mediumButton = document.getElementById("mediumButton");
const largeButton = document.getElementById("largeButton");
const sizeMessage = document.getElementById("sizeMessage");

function setSize(sizeText) {
  sizeMessage.textContent = "選択されたサイズ：" + sizeText;
}

function onSmallClick() {
  setSize("小");
}

function onMediumClick() {
  setSize("中");
}

function onLargeClick() {
  setSize("大");
}

smallButton.addEventListener("click", onSmallClick);
mediumButton.addEventListener("click", onMediumClick);
largeButton.addEventListener("click", onLargeClick);
JavaScript

ここで注目してほしいのは、「どこを見れば何が分かるか」です。

上のほう（addEventListener の部分）を見ると、
「どのボタンが、どの処理につながっているか」が一目で分かる

下のほう（関数の中身）を見ると、
「サイズをどう表示しているか」が分かる

イベント登録部分は「配線図」、
関数の中身は「機械の中身」
というイメージで分けておくと、読みやすさが一気に変わります。

5日目のまとめ 「ボタンの動きを自分で設計できる」

今日つかんでほしいのは、次の感覚です。

id は HTML のラベルで、getElementById で「リモコン」を手に入れる
イベントは「きっかけ」で、その中で「状態の更新」と「表示の更新」を行う
状態（変数）と表示（textContent）を分けて考えると、頭の中が整理される
ボタンが何個あっても、「id → 取得 → click 登録」の型は変わらない
イベント登録部分と処理の中身を関数で分けると、「配線図」と「中身」が見やすくなる

ここまで来たあなたは、
「ボタンを押すと何かが起きる」を“なんとなく”ではなく、
「こういう型で設計する」と言葉にできるレベル にいます。

この土台の上に、
次は「文字の書き換え」「入力の取得」「条件分岐」「カウンター」などを
少しずつ積み上げていけば、もう立派なミニアプリが作れます。

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