【JavaScript入門】ボタンクリックでダイアログを表示する方法｜onclick・addEventListenerの実例を初心者向けに解説

JavaScript のダイアログは、ボタンクリックなどのイベントと組み合わせて使うことで、実用的な UI を簡単に作れます。
この記事では、onclick と addEventListener の違いから、削除確認や入力ダイアログの実践パターンまで分かりやすく解説します。

ダイアログはイベントと組み合わせて使うことが多い

JavaScript の alert・confirm・prompt は、
単体で使うよりも、ボタンクリックなどのイベントと組み合わせて使うことが多いです。

例えば以下のような場面です。

• 削除ボタンを押したら confirm を表示する
• 入力ボタンを押したら prompt を表示する
• 完了ボタンを押したら alert を表示する

ここでは、イベントとダイアログを連携させる基本を解説します。

onclick を使ったダイアログ表示

もっともシンプルな方法は onclick を使う書き方です。

<button onclick="alert('ボタンがクリックされました')">クリック</button>

HTML に直接書けるため簡単ですが、
複雑な処理には向かない というデメリットがあります。

addEventListener を使ったダイアログ表示

実務では addEventListener を使う書き方が一般的です。

document.getElementById("btn").addEventListener("click", () => {
  alert("クリックされました");
});

HTML と JavaScript を分離できるため、
保守性が高く、実務向きの書き方 です。

confirm とイベントを組み合わせた削除確認

削除ボタンと confirm を組み合わせると、以下のようになります。

document.getElementById("deleteBtn").addEventListener("click", () => {
  if (confirm("本当に削除しますか？")) {
    console.log("削除しました");
  }
});

confirm の戻り値（true / false）を使って処理を分岐します。

prompt とイベントを組み合わせた入力処理

ユーザーに入力させる場合は prompt を使います。

document.getElementById("inputBtn").addEventListener("click", () => {
  const name = prompt("名前を入力してください");

  if (name === null || name === "") {
    console.log("入力がキャンセルされました");
    return;
  }

  console.log(`こんにちは、${name} さん`);
});

prompt は空欄と null の判定が必要な点に注意しましょう。

イベントとダイアログを組み合わせる際の注意点

• onclick は複雑な処理に向かない
• addEventListener を使うと保守性が高い
• ダイアログは同期処理のため、表示中は処理が止まる
• prompt は入力チェックが必須

まとめ

ダイアログはイベントと組み合わせることで、
「クリック → 確認 → 処理」 のような実用的な流れを作れます。

まずは onclick で動かし、
慣れてきたら addEventListener を使う書き方に移行するとスムーズです。