プログラミング 📅 2026年4月25日 🔄 更新: 2026-04-16 ⏱ 8分で読めます

JavaScriptでボタンクリックを動かす方法【初心者向け】

JavaScriptでボタンクリック時に動作する仕組みを初心者向けに解説。scriptタグの書き方からaddEventListenerの使い方まで。中高生向け。

2026年4月25日

はじめに

JavaScript（ジャバスクリプト）は、Webページに「動き」をつけるプログラミング言語です。ボタンを押すと文字が変わる、画像が切り替わるなど、ユーザーの操作に反応するページを作れます。

この記事では、ボタンをクリックしたときにテキストが変わる仕組みを、ゼロから作る方法を解説します。

ステップ1：HTMLにボタンを作る

まず、HTMLファイルにボタンとテキストを用意します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>はじめてのJavaScript</title>
  </head>
  <body>
    <h1>JavaScriptの練習</h1>
    <p id="message">ボタンを押してみよう！</p>
    <button id="my-btn">クリック！</button>
  </body>
</html>

id 属性は、JavaScriptから要素を見つけるための「名前」です。id="message" と id="my-btn" をつけておきます。

📖 詳しくはclassとidの違いで解説しています。

ステップ2：scriptタグを追加する

JavaScriptのコードは <script> タグの中に書きます。</body> の直前に置くのが基本です。

    <button id="my-btn">クリック！</button>

    <script>
      // ここにJavaScriptを書く
    </script>
  </body>
</html>

// はコメント（メモ）です。プログラムの動作には影響しません。

ステップ3：クリック処理を書く

<script> タグの中に、以下のコードを書きましょう。

const btn = document.getElementById("my-btn");
const msg = document.getElementById("message");

btn.addEventListener("click", function() {
  msg.textContent = "クリックされました！🎉";
});

コードの意味を1行ずつ説明します。

document.getElementById("my-btn") — HTMLから id="my-btn" の要素を取得
addEventListener("click", function() {...}) — クリックされたときに実行する処理を登録
msg.textContent = "..." — テキストの内容を書き換える

👉 DOM操作入門も参考にしてください。

🔗 あわせてイベント処理入門もチェックしてみましょう。

ステップ4：ブラウザで動作確認する

ファイルを保存してブラウザで開きます。「クリック！」ボタンを押して、テキストが「クリックされました！🎉」に変われば成功です！

💡 動かないときは：開発者ツール（F12）の「Console」タブにエラーが出ていないか確認しましょう。開発者ツールの使い方を参考にしてください。

アレンジしてみよう

基本ができたら、以下のアレンジに挑戦してみましょう。

クリックするたびにカウントが増える「カウンター」を作る
テキストの色も一緒に変える（msg.style.color = "red"）
ボタンを2つ作って、それぞれ違う動きをさせる

🔥 カウンターチャレンジで実践してみましょう。

最初のスクリプトを書いたあとに試してみよう

最初のJavaScriptが動いたら、少しずつコードを変えて実験してみましょう。

実験1：alert()のメッセージを変える

alert("こんにちは")の中身を自分の好きな言葉に変えてみましょう。「おはよう」「今日は天気がいい」など、何でもOKです。文字列はクォーテーション（引用符）で囲むことを忘れないでください。

実験2：console.log()を使う

alert()の代わりにconsole.log("メッセージ")と書くと、ブラウザの開発者ツール（F12キー）のコンソールにメッセージが表示されます。alert()と違ってポップアップが出ないので、何度も実行するときに便利です。

実験3：計算をさせる

console.log(3 + 5)と書くと、コンソールに8と表示されます。足し算（+）、引き算（-）、掛け算（*）、割り算（/）ができます。電卓のように使ってみましょう。

実験4：document.write()で画面に表示する

document.write("こんにちは")と書くと、ページ上に直接文字が表示されます。HTMLの中にJavaScriptで文字を追加できることがわかります。

JavaScriptの3つの書き方

JavaScriptをHTMLに追加する方法は3つあります。

1つ目：HTMLファイル内にscriptタグで書く

bodyタグの閉じタグの直前にscriptタグを書いて、その中にJavaScriptを書きます。最初はこの方法が一番簡単です。

2つ目：外部ファイルに書く

JavaScriptを別ファイル（例：script.js）に書いて、HTMLからscriptタグのsrc属性で読み込みます。コードが長くなってきたら、この方法に切り替えましょう。HTMLとJavaScriptを分けることで、コードが整理されて読みやすくなります。

3つ目：コンソールに直接入力する

ブラウザの開発者ツールのコンソールに直接コードを打ち込む方法です。ファイルを作らなくても、すぐにJavaScriptを試せます。ちょっとした実験に最適です。

最初のスクリプトでよくあるミス

ミス1：scriptタグの位置が間違っている

scriptタグをheadタグの中に書くと、HTMLがまだ読み込まれていない状態でJavaScriptが実行されます。bodyの閉じタグの直前に書くのが安全です。

ミス2：クォーテーションの閉じ忘れ

文字列を囲むクォーテーションを閉じ忘れると、エラーになります。開始と終了で同じ種類（シングルかダブル）を使いましょう。

ミス3：全角文字でコードを書いている

日本語入力モードのまま記号を打つと、全角の括弧や全角のセミコロンになってしまいます。コードは必ず半角英数字で書きましょう。

ミス4：ファイルを保存していない

コードを変更したのに動作が変わらないとき、保存を忘れている可能性があります。Ctrl+S（MacはCommand+S）で保存してからブラウザを更新しましょう。

次のステップとして、変数を使ってデータを保存する方法を学びましょう。「JavaScript変数入門」で、letやconstの使い方を解説しています。

まとめ

✅ JavaScriptは <script> タグの中に書く
✅ getElementById でHTML要素を取得する
✅ addEventListener でクリック処理を登録する
✅ textContent でテキストを書き換える

✨ console.log の動きをブラウザで体験しよう！

コードを入力してconsole.logの出力をその場で確認できる無料シミュレーターです。

console.log シミュレーター →

⚡ JavaScriptコースで本格的に学ぼう

変数・条件分岐・ループ・関数など、プログラミングの基礎を体系的に学べます。

JavaScriptレッスン1を始める →

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

この記事に出てくる用語

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください: