【JavaScript入門】alert・confirm・promptが嫌われる理由｜UI/UXの観点からの注意点と代替案を初心者向けに解説

alert・confirm・prompt は便利な反面、UI/UX の観点では多くの問題を抱えています。
この記事では「なぜ嫌われるのか」「どんな代替UIを使うべきか」を、具体例を交えて分かりやすく解説します。

alert・confirm・prompt が嫌われる理由とは？

JavaScript の標準ダイアログである alert・confirm・prompt は、
初心者にとっては便利な機能ですが、実務では「できれば使いたくないUI」とされることが多いです。

その理由は、ユーザー体験（UX）を損ないやすい という点にあります。
ここでは、具体的にどのような問題があるのかを解説します。

1. 画面を完全にブロックしてしまう

標準ダイアログは表示されると、画面全体の操作が完全に停止 します。
ユーザーはダイアログを閉じるまで何もできず、操作の流れが中断されます。

• 作業のリズムが途切れる
• 意図しないタイミングで表示されるとストレスになる
• 複数回表示されると「邪魔」と感じる

2. デザインをカスタマイズできない

標準ダイアログはブラウザが表示するため、デザインを変更できません。
サイトの雰囲気と合わず、UI の統一感が失われます。

• ボタンの色や文言を変えられない
• フォントやサイズも変更不可
• ブランドイメージと合わない

3. スマホやブラウザによって挙動が異なる

特にスマホでは、標準ダイアログの挙動がブラウザごとに異なります。

• iOS Safari では表示が制限されることがある
• Chrome では連続表示がブロックされる場合がある
• prompt が正常に動作しないケースもある

実務では「動作が安定しないUI」は避けられる傾向があります。

4. prompt は入力チェックが難しい

prompt は入力欄を提供しますが、以下のような問題があります。

• 空欄かどうかを自分で判定する必要がある
• キャンセルと空欄の違いを判定する必要がある
• 入力フォームとしては機能が弱い

そのため、実務では フォームやモーダル を使うことが一般的です。

5. ユーザーが驚きやすい（心理的負担）

標準ダイアログは画面中央に突然表示されるため、
ユーザーが「驚く」「ストレスを感じる」ことがあります。

特に alert を多用すると、
「このサイトは使いにくい」 と感じられる原因になります。

代替案：モーダルやトースト通知を使う

実務では、標準ダイアログの代わりに以下の UI がよく使われます。

• モーダル（Modal）：確認・入力・説明に最適
• トースト通知（Toast）：軽い通知に最適
• スナックバー（Snackbar）：操作結果の通知に最適

これらはデザインを自由にカスタマイズでき、
UX を損なわずにユーザーへ情報を伝えられます。

■ モーダルで確認ダイアログを実装する例

標準の confirm の代わりに、HTML＋CSS＋JS で確認モーダルを作る例です。

<!-- モーダル -->
<div id="modal" class="modal hidden">
  <div class="modal-content">
    <p>本当に削除しますか？</p>
    <button id="okBtn">OK</button>
    <button id="cancelBtn">キャンセル</button>
  </div>
</div>

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal.hidden { display: none; }
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

const modal = document.getElementById("modal");
const okBtn = document.getElementById("okBtn");
const cancelBtn = document.getElementById("cancelBtn");

function openModal() {
  modal.classList.remove("hidden");
}

okBtn.addEventListener("click", () => {
  console.log("OK が押されました");
  modal.classList.add("hidden");
});

cancelBtn.addEventListener("click", () => {
  console.log("キャンセルされました");
  modal.classList.add("hidden");
});

// 呼び出し
openModal();

このように、モーダルならデザイン・文言・ボタン配置を自由に調整でき、
UX を損なわずに確認ダイアログを実装できます。

■ トースト通知で alert を置き換える例

軽い通知は alert ではなく、画面端に出るトーストが一般的です。

<div id="toast" class="toast hidden">保存しました！</div>

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .3s;
}
.toast.show {
  opacity: 1;
}

function showToast(message) {
  const toast = document.getElementById("toast");
  toast.textContent = message;
  toast.classList.add("show");

  setTimeout(() => {
    toast.classList.remove("show");
  }, 2000);
}

// 呼び出し
showToast("保存しました！");

alert のように画面を止めず、
ユーザーの操作を妨げない自然な通知が実現できます。

■ prompt の代わりに入力モーダルを使う例

prompt の代わりに、入力欄付きモーダルを使うパターンです。

<div id="inputModal" class="modal hidden">
  <div class="modal-content">
    <p>名前を入力してください</p>
    <input id="nameInput" type="text">
    <button id="submitName">送信</button>
  </div>
</div>

const inputModal = document.getElementById("inputModal");
const nameInput = document.getElementById("nameInput");
const submitName = document.getElementById("submitName");

function openInputModal() {
  inputModal.classList.remove("hidden");
}

submitName.addEventListener("click", () => {
  const name = nameInput.value.trim();
  if (!name) {
    showToast("名前を入力してください");
    return;
  }
  console.log("入力された名前:", name);
  inputModal.classList.add("hidden");
});

// 呼び出し
openInputModal();

prompt よりも入力チェックがしやすく、
UI も自由にデザインできるため、実務ではこちらが一般的です。

まとめ

alert・confirm・prompt は便利な反面、
UX を損ないやすい・デザインできない・挙動が不安定 という理由から、
実務では避けられることが多い UI です。

ただし、学習段階では理解しておくべき重要な機能なので、
まずは特徴を押さえた上で、必要に応じてモーダルなどの代替UIを使う判断ができるようになりましょう。