ボタンを押すと何が起きる？JavaScriptの動き

ボタンを押した瞬間、実は4つの処理が起きている

Webページのボタンを押すと、画面が変わったり、メッセージが表示されたりします。
このとき、JavaScriptが「その場で考えて動いている」と思われがちですが、実際には違います。

ボタンを押したときの動きは、あらかじめ準備されています。
正確には、次の流れです。

1. クリックが検出される
2. ブラウザがイベントを通知する
3. JavaScriptが呼び出される
4. 画面（DOM）が書き換わる

つまり、ボタンはきっかけに過ぎません。
本体は「イベント処理」という仕組みです。

クリックは「信号」として扱われる

ブラウザは常にユーザーの操作を監視しています。

• マウスクリック
• キー入力
• スクロール
• タッチ操作

これらはすべて「イベント」という信号になります。
ボタンを押したとき、ブラウザは「clickイベントが発生した」と判断します。

ここではまだJavaScriptは実行されていません。
JavaScriptは、イベントが起きたときだけ呼び出されます。

JavaScriptは“待っている”

次のコードを見てください。

const button = document.getElementById('send');

button.addEventListener('click', function() {
  alert('送信されました');
});

このコードは、ボタンが押された瞬間に初めて実行されます。
ページを開いた直後に動くわけではありません。

重要なのは、JavaScriptは常に動作しているのではなく
イベントを待機しているという点です。

これをイベントリスナーと呼びます。

DOMとは「画面の設計図」

では、JavaScriptは何を書き換えているのでしょうか。
それがDOMです。

DOMは、ブラウザがページを管理するための内部データです。
HTMLは単なる文字列ですが、ブラウザはそれを「部品の集合」として解釈します。

例：

• 見出し要素
• 段落要素
• 入力欄
• ボタン

JavaScriptは、この部品に対して命令を出します。

document.getElementById('msg').textContent = '完了しました';

これは「msgという部品の文字を変更しろ」という命令です。
画面を再読み込みしているわけではありません。
画面の中身だけを差し替えています。

さらに裏では通信が走ることもある

最近のWebサイトでは、ボタンを押すとサーバ通信が発生することがあります。

fetch('/api/login', {
  method: 'POST'
}).then(res => res.json())
  .then(data => {
    document.getElementById('result').textContent = data.message;
  });

この処理では、ボタンが押された後に

• サーバへデータ送信
• 応答を受信
• 画面更新

が行われます。

ページは移動していませんが、実際には通信が起きています。
ログインフォームや検索候補、いいねボタンの多くがこの仕組みです。

よくある勘違い：ボタンが処理しているわけではない

初心者がよく誤解する点があります。
「ボタンを押すとボタンが処理する」という考え方です。

実際は違います。

ボタンはただのHTML要素です。
処理を持っていません。

処理を持っているのはJavaScriptであり、
ボタンは「イベントを発生させるスイッチ」に過ぎません。

この理解がないと、次のような疑問が出ます。

> なぜボタンを作っただけでは動かないのか

理由は、イベントに対する処理が登録されていないからです。

実際に起きるトラブル

ボタンが反応しない原因の多くは、JavaScriptのバグではありません。

典型例があります。

document.getElementById('send').addEventListener('click', handler);

もしHTMLがまだ読み込まれていない状態でこのコードが実行されると、
ボタンは存在しないため登録に失敗します。

その結果、クリックしても何も起きません。

対策は次のいずれかです。

window.addEventListener('DOMContentLoaded', function(){
  document.getElementById('send').addEventListener('click', handler);
});

または

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

これは「HTMLの準備が終わってから実行せよ」という意味です。

リスクと注意点

イベント処理は便利ですが、登録しすぎると問題が起きます。

• 同じイベントを何度も登録する
• 不要な監視を残す
• メモリを消費する

特にSPA（画面遷移しないサイト）では、イベントの解除忘れが原因でページが重くなることがあります。

JavaScriptは目に見えない部分で積み重なります。
そのため「動いているからOK」と考えると、後から急に重くなることがあります。

ボタンの正体

ボタンを押すと何かが起きる。
この「当たり前」の裏側では、常に同じ流れが動いています。

ユーザー操作 → イベント発生 → JavaScript実行 → DOM変更

つまりボタンは命令を持っているのではなく、
命令を呼び出すトリガーです。

この構造が理解できると、Webページの挙動を「見た目」ではなく「処理の流れ」で捉えられるようになります。
JavaScriptを学ぶ最初の一歩は、文法ではなく、この流れを理解することです。