JavaScript
PR

【JavaScript 1-4】ボタンを押したら変わる｜クリックで文字を切り替える（初心者向け）

JS1-4.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 1-4「ボタンを押したら変わる」です。
ここではクリックされた時に、
画面の文字や回数が変わる流れを見ていきます。
最初はコードを全部暗記するより、「押したら変わる」仕組み
が見えれば大丈夫です。

前回は、const と let を使って、
値に名前をつける「変数」の入口を見ました。

今回はその変数を少し使いながら、
**ボタンを押したら画面が変わる**
ところまで進みます。

JavaScriptらしさが少し見えやすくなる回です。

今までは、
ページを開いた時点で文字が変わる形でした。

今回は、
ユーザーがボタンを押した時に、
JavaScriptが反応するようにしていきます。

Q
「クリックされた時の処理は addEventListener で用意します」

最初はこの流れで見れば大丈夫です。

・HTMLでボタンを用意する
・JavaScriptでボタンを見つける
・クリックされた時の処理を書く
・画面の文字を書き換える

今回の中心は、

addEventListener(“click”, function () {
クリックされた時の処理
});

です。

難しく見えますが、
最初は「ボタンが押された時に動く場所」くらいで十分です。

目次
  1. 今回のゴール
  2. まずは完成形を見る
  3. どこを見ればいい？
  4. addEventListener は“何かが起きた時”に
  5. click は“クリックされた時”を表します
  6. let count で回数を増やしてみる
  7. textContent で画面の文字を変える
  8. console.log でクリック確認もできます
  9. よくあるつまずき
  10. 今回のまとめ
  11. 今日のゴール確認
  12. JavaScript 1-4 の一例zipについて
  13. JavaScript 2-1へ
ここまでできればOK

今回のゴール

  • ボタンを押した時にJavaScriptが反応する
  • addEventListener の入口が分かる
  • click がクリック操作を表すと分かる
  • textContent で画面の文字を変えられる
  • let を使って回数を増やす感覚が分かる
コピペOK

まずは完成形を見る

今回は、ボタンを押すと文章と回数が変わる小さなページを作ります。

フォルダ構成は、前回までと同じように考えると分かりやすいです。

javascript-01-04-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/

   └─ script.js
TeX

まずは index.html をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript 1-4</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main class="page">
    <section class="intro-card">
      <p class="label">JavaScript 1-4 の一例</p>
      <h1>ボタンを押したら変わる</h1>
      <p class="lead">ボタンを押すと、メッセージとクリック回数が変わる練習です。</p>
      <p id="message" class="message">まだボタンは押されていません。</p>
      <p id="countText" class="message">クリック回数：0回</p>
      <button id="changeButton" class="button" type="button">文字を変える</button>
    </section>
  </main>
  <script src="js/script.js"></script>
</body>

</html>
HTML

次に、cssフォルダの中に style.css を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.intro-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #2563eb;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-top: 0;
  margin-bottom: 24px;
}

.message {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 16px;
  margin-bottom: 16px;
}

.button {
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #1d4ed8;
}
CSS

最後に、jsフォルダの中に script.js を作って、下のコードを書きます。

const message = document.getElementById("message");
const countText = document.getElementById("countText");
const changeButton = document.getElementById("changeButton");

let count = 0;

changeButton.addEventListener("click", function() {
  count = count + 1;

  message.textContent = "ボタンが押されました。";
  countText.textContent = "クリック回数：" + count + "回";
});
JavaScript
toshi
toshi

今回は “ボタンを押した時だけ変わる” ところが
ポイントです。ページを開いただけでは、まだ回数は増えません。

変化のポイント

どこを見ればいい？

見る場所 起きていること
id=”message”変化させる文章の場所
id=”countText”クリック回数を表示する場所
id=”changeButton”クリックするボタン
addEventListenerボタンが押された時の処理を用意している
count = count + 1クリック回数を1つ増やしている
textContent画面に表示される文字を書き換えている

今回の流れは、
JavaScriptでかなりよく使う考え方です。

HTMLに場所を用意する。
JavaScriptでその場所を見つける。
ボタンが押された時に処理を動かす。
画面を書き換える。

この流れが見えれば、
かなり大きな一歩です。

処理

addEventListener は“何かが起きた時”に

今回の中心は、この部分です。

changeButton.addEventListener("click", function() {
  message.textContent = "ボタンが押されました。";
});
JavaScript

これは、ざっくり言うと、

「changeButton がクリックされたら、この中の処理を動かす」

という意味です。

部分 ざっくりした意味
changeButtonクリックされるボタン
addEventListener何かが起きた時の処理を登録する
“click”クリックされた時
function () { }その時に動かす処理を書く場所

最初は addEventListener を完全に説明できなくても大丈夫です。
「クリックされた時に動く処理を書く場所」くらいで見ていきます。

動き

click は“クリックされた時”を表します

addEventListener の中にある “click” は、
クリックされた時に反応するための指定です。

changeButton.addEventListener("click", function() {
  console.log("クリックされました。");
});
JavaScript

このように書くと、
ボタンがクリックされた時に、
console.log が動きます。

  • “click” はクリック操作を表す
  • ボタンが押された時だけ中の処理が動く
  • console.log を入れると、クリックされたか確認しやすい
変数

let count で回数を増やしてみる

前回、let はあとから変わる値に使うと見ました。

今回はクリック回数が増えるので、let を使っています。

let count = 0;

changeButton.addEventListener("click", function() {
  count = count + 1;
});
JavaScript

クリックされるたびに、
count の数字が1つ増えます。

コード意味
let count = 0;最初の回数を0にする
count = count + 1;今の回数に1を足す
countText.textContent増えた回数を画面に表示する
toshi
toshi

前回の count は表示するだけでしたが、
今回はクリックのたびに数字が変わります。

表示される文字を書き換え

textContent で画面の文字を変える

textContent は、
HTMLの中に表示される文字を書き換える時に使えます。

今回のコードでは、

message.textContent = "ボタンが押されました。";
countText.textContent = "クリック回数：" + count + "回";
JavaScript

と書いています。

これによって、
画面上の文章とクリック回数が変わります。

textContent は、最初のDOM操作で
かなり使いやすい指定です。
まずは「表示される文字を変えるもの」と見れば大丈夫です。

確認

console.log でクリック確認もできます

もしボタンを押しても変化が分かりにくい時は、
中に console.log を入れると確認しやすいです。

changeButton.addEventListener("click", function() {
  console.log("ボタンがクリックされました。");

  count = count + 1;
  message.textContent = "ボタンが押されました。";
  countText.textContent = "クリック回数：" + count + "回";
});
JavaScript

console.log は、
ページ上ではなく、開発者ツールのコンソールに表示されます。

うまく動かない時に、
「クリックの処理まで来ているか」
を確認するために便利です。

少しだけ変えてみる（練習）
  • ボタンの文字を変えてみる
  • message.textContent の文章を変えてみる
  • count を 0 ではなく 5 から始めてみる
  • count = count + 1 を count = count + 2 にしてみる
  • console.log を追加して、クリック時に表示されるか確認してみる

今回の練習では、
ボタンを押した時だけ変わることを確認します。

「どの行がクリックの中で動いているか」
を見るのが大事です。

ここだけ確認

よくあるつまずき

Q
「つまずき①：ボタンを押しても何も変わらない」

まずは id 名を確認します。

HTML側が、

<button id="changeButton" class="button" type="button">文字を変える</button>
HTML

なら、JavaScript側も

const changeButton = document.getElementById("changeButton");
JavaScript

のように、同じ名前にします。

changeButton の文字がずれていると、ボタンを見つけられません。

Q
「つまずき②：count が増えない」

count を増やす処理が、
addEventListener の中に入っているか確認します。

changeButton.addEventListener("click", function() {
  count = count + 1;
});
JavaScript

この中に入っていないと、
クリックのたびに増える動きになりません。

Q
「つまずき③：画面の文字は変わらないけど、エラーも分からない」

console.log を追加してみます。

console.log("クリックされました。");
JavaScript

これをクリック処理の中に入れて、
コンソールに表示されるか確認します。

表示されるならクリック処理までは動いています。
表示されないなら、ボタンの取得やscriptの読み込みを見直します。

Q
「つまずき④：script.js が読み込まれていない」

index.html の scriptタグを確認します。

今回の構成では、

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

です。

jsフォルダの中に script.js があるか、
ファイル名が違っていないかを見直してください。

ここだけ押さえればOK

今回のまとめ

  • addEventListener は“何かが起きた時”の処理を書く入口
  • “click” はクリックされた時を表す
  • ボタンを押した時だけ中の処理が動く
  • let count を使うとクリック回数のような変わる値を扱える
  • textContent で画面の文字を書き換えられる
できた判定

今日のゴール確認

ここまでできたらOKです。

  • ボタンを押した時に文字を変えられた
  • クリック回数を増やして表示できた
  • addEventListener の入口が見えた
  • 次の JavaScript 2-1 に進む準備ができた
参考.zip の 配布

JavaScript 1-4 の一例zipについて

この記事の内容は、JavaScript 1-4 の一例として zip ファイルを用意しました。

最初はそのまま開いて動きを確認し、
そのあとで表示される文章や、count の増え方を少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-01-04-example.zip
└─ javascript-01-04-example/
├─ index.html
├─ css/
│　└─ style.css
└─ js/
　　└─ script.js

javascript-01-04-exampleダウンロード
次に読む

JavaScript 2-1へ

今回は、ボタンを押した時に画面が変わる流れを見ました。

次は、
条件によって動きを変えるために、
if の入口へ進みます。

「もし〇〇なら、こうする」という考え方が分かると、
JavaScriptでできることが少し広がります。

次へ：JavaScript 2-1 ifの入口へ進む
PR：最初の1冊（必要な方だけ）

PR：JavaScriptの最初の学習に使いやすい参考(必要な方だけ)
この段階では、まず記事内のコードだけで進めて大丈夫です。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました