JavaScript入門｜ボタンで表示を変える最初のプログラム。受講ログで分かった、最初につまずく場所

JavaScript入門｜最初の1本は、ボタンで表示を変えるプログラム

JavaScriptは、主にWebブラウザの中で動くプログラミング言語です。ボタンを押したらメニューが開く、入力欄の内容をその場で確かめる、ページを移動せずに新しい情報を表示する。Webページの「動き」の多くは、JavaScriptで作られています。

この記事では、説明を読むより先に1つ動かします。ボタンを押すたびに数字が増えるページです。10分ほどで作れます。

その前に、ナミノリの受講ログで分かったことを1つ書いておきます。JavaScriptを学び始めた人が最初に止まるのは、変数や計算などの文法ではありませんでした。

受講ログで分かった、最初につまずく場所

ナミノリの「JavaScript初級講座」（全15回）の受講記録です。各回に確認テストがあり、何回目で合格したかが記録に残ります。

回	内容	進んだ人	2回以上かかった人
1	JavaScriptとは	15人	1人（7%）
2	CSSセレクターとは	11人	10人（※下の訂正を参照）
3	動かしてみよう①（HTMLの要素を取得して色を変える）	10人	6人（60%）
4	動かしてみよう②（要素を取得して削除する）	6人	1人（17%）
5	四則演算	6人	0人（0%）
13〜15	関数	4人	各1人（25%）

受講登録は16人。4回目まで進んだのは6人で、最後の回までたどり着いたのは4人でした。

止まっているのは序盤です。3回目は、JavaScriptでHTMLの要素を選んで操作する回でした。四則演算やデータ型といった文法の回は、その後ろにあります。

訂正（2026年9月30日）：公開時は2回目「CSSセレクターとは」の100%も「要素を選ぶ回で止まる」根拠にしていました。この回の確認テストは、画面の表示処理の誤りで正解の選択肢（#idselect）の # が消えており、正解を選べない状態でした。9月30日に修正しました。2回目の数字は難しさを表していないため、根拠から外しました。お詫びして訂正します。

この記事のプログラムでも、最初にやるのは要素を見つけることです。ここを確かめる手順を必ず入れました。

※ 集計は2026年9月25日時点。母数は4〜16人と小さい数字です。確認テストの採点まわりの不具合を2026年8月に直しており、それ以前の記録は再挑戦が多めに出ている可能性があります。分かるのは「どこで止まったか」までで、「なぜか」は分かりません。

HTML・CSSとの役割分担

Webページは3つの技術の分業でできています。

技術	役割	この記事では
HTML	ページの構造と内容	見出し、数字、ボタン
CSS	色や配置などの見た目	使わない（動きに集中するため）
JavaScript	動きと操作への反応	ボタンを押したら数字を増やす

JavaScriptは、HTMLで作った要素を見つけて、書き換える言語です。HTMLに触れたことがなければ、先に自己紹介カードを1ファイルで作る記事を読んでください。30分ほどで、この記事に必要な分は足ります。

なお、名前が似ているJavaは別の言語です。

1ファイルで動かす

VS Code などのエディターで新しいファイルを作り、次のコードを貼り付けて 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>
  <p>今日の回数：<span id="count">0</span></p>
  <button type="button" id="add">1回増やす</button>
  <script>
    const countElement = document.querySelector("#count");
    const addButton = document.querySelector("#add");
    let count = 0;
    addButton.addEventListener("click", () => {
      count += 1;
      countElement.textContent = String(count);
    });
  </script>
</body>
</html>

「今日の回数：0」と表示され、ボタンを押すと1になれば成功です。

JavaScriptの部分は、<script> と </script> の間の7行だけです。やっていることは3つしかありません。

1. HTMLの要素を見つける

const countElement = document.querySelector("#count");
const addButton = document.querySelector("#add");

document.querySelector("#count") は、ページの中から id="count" の要素を探します。# は「idの名前」という意味で、CSSのセレクターと同じ書き方です。

見つかったかどうかは、確かめないと分かりません。 開発者ツール（Windowsは F12、Macは option + command + I）の Console で、次を実行してみてください。

document.querySelector("#count");

<span id="count">0</span> が表示されれば見つかっています。null と表示されたら、見つかっていません。

わざと失敗させてみます。HTMLの id="add" を id="ad" に書き換えて保存し、再読み込みしてください。Console に次のエラーが出ます。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

「null の addEventListener を読めない」という意味です。エラーはボタンの行ではなく、JavaScriptの行で起きます。 原因はHTMLとJavaScriptの名前の食い違いです。確認できたら id="add" に戻してください。

このエラーを一度見ておくと、次に同じメッセージが出たときに「要素が見つかっていない」とすぐ分かります。

2. クリックされたときの処理を登録する

addButton.addEventListener("click", () => {
  // ここに書いた処理が、クリックのたびに動く
});

addEventListener("click", ...) は、「クリックされたら、この処理を動かす」という予約です。この行が実行された瞬間に数字が増えるわけではありません。ボタンを押したときに、波括弧 { } の中が動きます。

() => { ... } は関数の書き方の1つです。今は「波括弧の中がクリック後に動く」と読めれば十分です。

3. 値を増やして、表示に反映する

count += 1;
countElement.textContent = String(count);

count += 1 で変数を1増やし、textContent で画面の文字を書き換えています。

ここで大事なのは、変数を増やしただけでは画面は変わらないことです。2行目を消すと、ボタンを押しても0のままです（変数の中では増えています）。データと表示は別のもので、表示を変えるには書き換える命令が要ります。

<script> を <body> の最後に置いているのにも理由があります。ブラウザは上から順に読むので、ボタンより前に <script> を置くと、まだ存在しないボタンを探して null になります。

完成を確かめる4つのテスト

1. 開いた直後は 0
2. 1回押すと 1
3. さらに2回押すと 3
4. ページを再読み込みすると 0 に戻る

4番は失敗ではありません。このプログラムには保存する機能がないので、再読み込みで最初からになります。

キーボードでも操作できるか確かめてください。Tabキーでボタンに移動し、Enter または Space で押せます。<button> 要素を使っているので、何も書かなくてもキーボードで操作できます。

変更課題：リセットボタンを付ける

最初のボタンの下（<script> より前）に、次の1行を追加します。

<button type="button" id="reset">0に戻す</button>

<script> の中の最後（</script> の直前）に、次を追加します。

const resetButton = document.querySelector("#reset");
resetButton.addEventListener("click", () => {
  count = 0;
  countElement.textContent = String(count);
});

完成条件：3回増やしてからリセットを押すと0になり、そのあと1回増やすと 1 になる。

count = 0; を書き忘れて表示だけ0にすると、次に押したときに 4 になります。見た目は0なのに、変数は3のままだからです。3の「データと表示は別」を、自分の手で確かめる課題です。

動かないときに見る順番

1. Console を開く。赤いエラーがあれば、メッセージと行番号を読む
2. null の文字があれば、要素が見つかっていない。# の後ろとHTMLの id のつづりを比べる
3. 括弧の閉じ忘れ。( と )、{ と } が対になっているか
4. 保存して再読み込みしたか

直すときは1か所ずつにしてください。複数を同時に変えると、どれが効いたのか分からなくなります。

エラーの種類ごとの読み方と、赤いエラーが出ないのに動かないときの確かめ方は、JavaScriptのエラーの読み方にまとめました。

ここから先の学び方

このプログラムには、変数（count）、関数（() => { }）、要素の操作（querySelector・textContent）が入っています。書き写して動いたら、次は数字を変えても説明できるかを確かめてください。「1回増やす」を「2回増やす」に変えるには、どこを直せばよいか。答えられれば、このページは理解できています。

文法を順に固めるなら、次の記事が続きです。

• 変数とデータ型
• if文（条件分岐）
• for文と配列
• JavaScript練習問題10問
• 初めてのWebアプリの作り方（追加・削除・保存ができる学習メモを作る）

体系的に学ぶなら、JavaScript初級講座が15回構成です。3回目と4回目が、この記事で扱った「要素を選んで操作する」回です。3回目は受講ログでも再挑戦が多いので、1回で合格できなくても気にせず進めてください。

変数や条件分岐という考え方そのものが初めてなら、先にプログラミング入門講座（5回構成）で全体像をつかむ方法もあります。

ボタンを押したあとにサーバーとやり取りする仕組み（URL・HTTP・GETとPOST）は、Webの仕組みの記事で、実際の通信を見ながら確かめられます。その次に、JavaScriptでデータを取ってきて画面に出す練習をするなら、APIとは？の記事へ進んでください。

よくある質問

HTMLとCSSを知らなくても始められますか？

文法だけならHTMLなしでも学べます。ただ、この記事のように画面を動かすには、HTMLの要素を見つける必要があります。受講ログでも、要素を選んで操作する回で再挑戦が多く出ていました。HTMLの基本（見出し・段落・ボタン・idとclass）だけは先に触れておくほうが、結果的に早く進みます。

JavaScriptとPythonのどちらを先に学ぶべきですか？

作りたいもので決めてください。Webページの画面を作りたいならJavaScript、データの集計や業務の自動化に興味があるならPythonが向いています。変数・条件分岐・繰り返し・関数という基本の考え方は共通なので、どちらから始めても、もう一方に移るときに無駄にはなりません。

どのくらいの期間で身につきますか？

人によって大きく違うので、期間では答えられません。受講ログで分かるのは、止まる場所が序盤に集中していることです。期間を気にするより、この記事のカウンターを自分で改造できるかを最初の目標にしてください。

学んだ先にはどんな仕事がありますか？

Webサービスの画面を作る「フロントエンドエンジニア」が代表的です。実務では React などのフレームワークを使うことが多く、基礎が固まってから進むのが一般的です。未経験からの進み方は未経験からWebプログラマーになる方法にまとめています。

まとめ

• JavaScriptは、HTMLで作った要素を見つけて、書き換える言語
• 受講ログでは、文法より前の「要素を選んで操作する」回で再挑戦が多かった（60%）
• 要素が見つからないと null になり、Cannot read properties of null のエラーが出る
• 変数を増やしても、画面は自動では変わらない。データと表示は別
• 最初の目標は、このカウンターを自分で改造できること

参考資料

• MDN「文書オブジェクトモデル (DOM)」 https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model
• MDN「Document: querySelector() メソッド」 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
• MDN「EventTarget: addEventListener() メソッド」 https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
• Chrome DevTools「Console の概要」 https://developer.chrome.com/docs/devtools/console?hl=ja