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

Web APP JavaScript
スポンサーリンク

3日目のゴール

3日目のテーマは
「イベントと id の扱いを、“感覚”から“一段整理された理解”にすること」 です。

今日もやることは同じ二つです。

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

でも、ただ「書ける」から一歩進んで、
「なぜそう書くのか」「どう整理すると楽になるのか」を意識していきます。

同じパターンを“自分の言葉”で説明できるようにする

まずは基本パターンをもう一度

一番シンプルな形を、あえてもう一度書きます。

<button id="myButton">押してね</button>
<script src="app.js"></script>

const button = document.getElementById("myButton");

button.addEventListener("click", function () {
  alert("ボタンが押されました！");
});
JavaScript

この 3 行（HTML 1 行＋JS 2 行）を、
自分の言葉で説明できるかが、3日目のスタートラインです。

id=”myButton” のボタンを HTML に用意する
JavaScript で、そのボタンを getElementById でつかまえる
つかまえたボタンに、「クリックされたらこの処理をしてね」と登録する

ここまでを、コードを見ながらでいいので、
声に出して説明してみてください。

「id は“ラベル”」「変数は“リモコン”」というイメージ

id は HTML の世界の名前

HTML の中での id は、
「このページの中で、この要素だけの名前」です。

<button id="startButton">スタート</button>
<button id="stopButton">ストップ</button>

ここでは、

startButton というラベルがついたボタン
stopButton というラベルがついたボタン

がある、という状態です。

ブラウザはこのラベルを覚えていて、
JavaScript から「そのラベルのやつちょうだい」と言うと返してくれます。

変数は JavaScript の世界の“リモコン”

JavaScript 側では、こう書きます。

const startButton = document.getElementById("startButton");
const stopButton = document.getElementById("stopButton");
JavaScript

ここで作っているのは、
「画面上のボタンを操作するためのリモコン」です。

startButton 変数は、「スタートボタンを操作するためのリモコン」
stopButton 変数は、「ストップボタンを操作するためのリモコン」

というイメージを持ってください。

このリモコンに対して、
「クリックされたらこうしてね」と命令を登録するのが addEventListener です。

イベントの“流れ”を頭の中で追えるようにする

「書いた瞬間」ではなく「押した瞬間」に動く

3日目で一番深掘りしたいのはここです。

startButton.addEventListener("click", function () {
  console.log("スタートが押された");
});
JavaScript

このコードは、書いた瞬間に console.log が実行されるわけではありません。

ページを開いたときにやっているのは、

startButton というリモコンを用意する
そのリモコンに、「クリックされたらこの関数を呼んでね」と登録する

だけです。

実際に関数が動くのは、
「ユーザーがボタンをクリックした瞬間」です。

この「あとから呼ばれる」という感覚が、
イベント駆動のいちばん大事なところです。

3つのボタンを“きれいに”扱ってみる

似たようなコードを、あえて書き分ける

まずはストレートに書いてみます。

<button id="redButton">赤</button>
<button id="greenButton">緑</button>
<button id="blueButton">青</button>
<p id="colorMessage">色はまだ選ばれていません</p>

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

const redButton = document.getElementById("redButton");
const greenButton = document.getElementById("greenButton");
const blueButton = document.getElementById("blueButton");
const colorMessage = document.getElementById("colorMessage");

redButton.addEventListener("click", function () {
  colorMessage.textContent = "赤が選ばれました";
});

greenButton.addEventListener("click", function () {
  colorMessage.textContent = "緑が選ばれました";
});

blueButton.addEventListener("click", function () {
  colorMessage.textContent = "青が選ばれました";
});
JavaScript

ここまでなら、もう余裕で書けると思います。

「同じことを繰り返している」ことに気づく

3つの addEventListener をよく見ると、
違うのは「色の名前」だけです。

赤が選ばれました
緑が選ばれました
青が選ばれました

こういうときに、「まとめたい」という気持ちが出てきたら、
もう立派に“設計者の目線”です。

関数を使って「イベントの中身」を共通化する

引数つきの関数でスッキリさせる

さっきのコードを、こう書き換えられます。

const redButton = document.getElementById("redButton");
const greenButton = document.getElementById("greenButton");
const blueButton = document.getElementById("blueButton");
const colorMessage = document.getElementById("colorMessage");

function selectColor(color) {
  colorMessage.textContent = color + "が選ばれました";
}

redButton.addEventListener("click", function () {
  selectColor("赤");
});

greenButton.addEventListener("click", function () {
  selectColor("緑");
});

blueButton.addEventListener("click", function () {
  selectColor("青");
});
JavaScript

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

selectColor という関数が、「色を選んだときにやりたいこと」を表している
イベントの中では、「どの色を選んだか」だけを渡している

つまり、

イベント → きっかけ（どのボタンか）
関数 → 反応（何をするか）

という役割分担が、よりハッキリしました。

「イベントの中で別の関数を呼ぶ」パターンに慣れる

イベントは“入口”、本体は別の関数

3日目で身につけてほしいのは、
「イベントの中身を、その場で全部書かなくていい」という感覚です。

例えば、こういう書き方もできます。

function onRedClick() {
  selectColor("赤");
}

function onGreenClick() {
  selectColor("緑");
}

function onBlueClick() {
  selectColor("青");
}

redButton.addEventListener("click", onRedClick);
greenButton.addEventListener("click", onGreenClick);
blueButton.addEventListener("click", onBlueClick);
JavaScript

イベントの登録部分は、
「どのイベントが、どの関数につながっているか」だけが見えます。

中身のロジックは、
onRedClick / onGreenClick / onBlueClick / selectColor の中に分かれて入っています。

この分け方ができると、
コードを読むときに「流れ」が追いやすくなります。

「イベントが何個あっても怖くない」感覚をつくる

きっかけが増えても、やることは同じ

ここまでで、こんなことができるようになっています。

1つのボタンにイベントをつける
複数のボタンに、それぞれイベントをつける
同じ関数を、複数のボタンから呼ぶ
イベントの中で、別の関数を呼び出す

どれも、基本の形は変わりません。

id で HTML を取得する
addEventListener でイベントを登録する

この 2 ステップさえ守れば、
ボタンが 1 個でも 10 個でも、やることは同じです。

3日目のミニチャレンジ（頭の中だけでもOK）

自分で仕様を考えてみる

例えば、こんなアプリを想像してみてください。

「いいね」ボタンと「よくないね」ボタンがある
どちらかを押すと、「あなたの評価：いいね」「あなたの評価：よくないね」と表示される

これを、今日のピースに分解すると、

HTML に 2 つのボタンと 1 つの表示用の p を用意する
id をつける（likeButton, dislikeButton, result など）
JavaScript で getElementById で 3 つとも取得する
likeButton の click で「いいね」を表示する関数を呼ぶ
dislikeButton の click で「よくないね」を表示する関数を呼ぶ

全部、もうあなたが書いたことのある形だけで作れます。

3日目のまとめ 「イベントは怖くない“入口”」

今日つかんでほしいのは、これだけです。

id は HTML の世界の“ラベル”、変数は JavaScript の世界の“リモコン”
イベントは「きっかけ」であって、「本体の処理」は別の関数に分けていい
複数のボタンがあっても、getElementById → addEventListener の流れは変わらない
イベントの中で別の関数を呼ぶことで、「きっかけ」と「反応」をきれいに分けられる

この感覚があれば、
次に「文字を変える」「数字を増やす」「入力を読む」を足しても、
土台はずっと同じままです。

JavaScript は「イベントで動く」――
その意味が、だいぶ自分の言葉に近づいてきました。

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