JavaScriptの始め方 — ボタンを押して動くページをブラウザで作ろう

ひよこ

ボタンを押すと数字が増えるページを作ってみたい！JavaScriptでできる？

ペンギン先生

できるよ。JavaScriptはWebページに動きを付ける言語だよ。今回はファイル1つで、押した回数が表示される小さなページを作ろう。ブラウザとテキストエディタがあれば試せるよ。

ひよこ

HTMLやCSSとは何が違うの？

ペンギン先生

HTMLはボタンや文章などの構造、CSSは色や配置、JavaScriptはクリックに反応する処理を担当するよ。図のボタンと数字を見てみよう。同じHTMLでも、JavaScriptが表示を書き換えると結果が変わるんだ。

ひよこ

どこにコードを書けばいいの？

ペンギン先生

下の例をindex.htmlという名前で保存して、ブラウザで開くんだ。エディタはメモ帳でもいいけれど、拡張子が.html.txtにならないようにね。ブラウザのアドレス欄がfile:で始まっても、この例は動くよ。

ひよこ

回数を覚えておくのはどの部分？

ペンギン先生

let count = 0が、回数を入れる変数だよ。クリックするたびにcount += 1で増やすんだ。constは変数への再代入をしない場合に使う。この例では、取得したボタンや表示先をconstで持っているよ。

ひよこ

押したことをどうやって知るの？

ペンギン先生

addEventListenerでclickイベントが起きたときの関数を登録するよ。関数の中で回数を増やし、表示先のtextContentを書き換える。DOMは、ページの要素をJavaScriptから扱うための仕組みなんだ。

ひよこ

画面を再読み込みしたら0に戻っちゃった。失敗？

ペンギン先生

この例では正常だよ。回数をページの実行中の変数にだけ保存しているからね。保存を続けたいときはlocalStorageやサーバーなどを別に考える。まずは「押す→変数が変わる→表示が変わる」をつかもう。

ひよこ

動かなかったら何を見ればいい？

ペンギン先生

ファイル名と保存内容を確認し、ブラウザの開発者ツールのConsoleで最初のエラーを見るんだ。idのつづり、括弧や引用符、scriptの位置を確認しよう。自分で内容を確認したコードで練習してね。

ひよこ

このあと何を作ると理解が深まるかな？

ペンギン先生

まずリセットボタンを追加してみよう。次に入力欄の文字を表示するページへ進むと、要素の取得とイベントが身につくよ。サーバーで使うNode.jsや型検査を加えるTypeScriptは、その後の学習先にできるね。

最初のゴール：3回押すと「3回」になる

今日はライブラリの導入よりも、自分の操作が画面の変化につながる体験をしましょう。以下は外部サービスへの通信も追加パッケージも使わない例です。

1. index.htmlを作る

新しいフォルダを作り、その中に次の内容をUTF-8で保存します。Windowsのメモ帳ならファイルの種類を「すべてのファイル」にして、名前を index.html にします。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ひよこのクリック練習</title>
  </head>
  <body>
    <h1>ボタンを押してみよう</h1>
    <button id="count-button" type="button">1回ふやす</button>
    <p id="result" aria-live="polite">0回</p>

    <script>
      const button = document.querySelector("#count-button");
      const result = document.querySelector("#result");
      let count = 0;

      button.addEventListener("click", () => {
        count += 1;
        result.textContent = count + "回";
      });
    </script>
  </body>
</html>

2. 開いて、押して、成功を確認する

ファイルをブラウザで開き、ボタンを3回押します。「0回」が「3回」になれば成功です。再読み込みすると0回に戻ります。コードを変えたときは、ファイルを保存してからブラウザを再読み込みします。

3. コードを3つの役割に分ける

script をボタンの後ろに置いたので、この例では要素が作られてから取得できます。先に実行すると、まだない要素を取得しようとして null になり、処理が失敗することがあります。

動かないときと、次の小さな挑戦

• コードが文章として表示される：ファイル名が index.html.txt になっていないか確認します。
• 押しても変わらない：Chrome・Edgeなら開発者ツールを開き、Consoleの最初のエラーを読みます。count-button と result のつづりを照合しましょう。
• 変更が反映されない：保存したファイルと、ブラウザで開いているファイルが同じか確認します。

次はリセットボタンを追加し、そのクリック時に count = 0 と表示の更新を行ってみましょう。HTMLの役割を補うならHTML/CSS入門、型のある書き方に進むならTypeScript入門へ。

参考資料

• MDN — What is JavaScript?
• MDN — addEventListener