【JavaScript】alertとconfirmの使い分け方やカスタマイズ方法

WebサイトやWebアプリを開発していると、ユーザーにメッセージを通知したり、削除ボタンを押した際に「本当に削除しますか？」と確認を求めたりしたい場面によく遭遇します。

そのような時に手軽に利用できるのが、JavaScriptに標準で組み込まれている alert() と confirm() メソッドです。

alertとconfirmは非常にシンプルで使いやすい反面、デザインが変更できなかったり、処理を一時停止させてしまったりといった特徴もあります。

この記事では、alertとconfirm の基本的な使い方から、戻り値を使った条件分岐の実装方法、そして最新のWeb開発トレンドに合わせたモダンな代替手段までを徹底的に解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

JavaScriptのalert()とconfirm()とは？違いと使い分け
1. alert() は一方的な「通知」
2. confirm() はユーザーへの「確認」
alert()メソッドで警告ダイアログを表示する方法
confirm()メソッドで確認ダイアログを表示する方法
1. 基本的な書き方と戻り値
2. 実行結果
【実践】confirm()を使った条件分岐のサンプルコード
1. ボタンクリック時の確認処理サンプル
2. ソースコードの解説
ダイアログ内で改行する方法
1. 改行コードを使ったサンプル
2. 実行結果
alertやconfirmのデザインは変更できない？
1. 1. HTML5の dialog 要素を使う（推奨）
2. 2. ライブラリ「SweetAlert2」を使う
JavaScriptのスキルを活かして年収を上げる方法

JavaScriptのalert()とconfirm()とは？違いと使い分け

JavaScriptには、ユーザーと対話するためのダイアログ（ポップアップウィンドウ）を表示する機能がいくつか用意されています。

その中でも頻繁に使われるのが window.alert() と window.confirm() です。

まずはこの2つの決定的な違いと、それぞれの用途について整理しましょう。

alert() は一方的な「通知」

alert() は、ユーザーに対して情報を伝えるためだけのダイアログです。

表示されるのはメッセージと「OK」ボタンのみで、ユーザーはボタンを押してダイアログを閉じることしかできません。

エラーメッセージの表示や、処理が完了したことを伝えるだけのシンプルな通知に適しています。

confirm() はユーザーへの「確認」

confirm() は、ユーザーに「YES」か「NO」かの判断を求めるダイアログです。
メッセージとともに「OK」ボタンと「キャンセル」ボタンの2つが表示されます。

ユーザーがどちらのボタンをクリックしたかによって、その後の処理を分岐させることができるため、データの削除確認や送信前の最終確認などに利用されます。

alert()メソッドで警告ダイアログを表示する方法

まずは、最もシンプルな alert() の使い方から見ていきましょう。

引数に表示したい文字列を渡すだけで、ブラウザ標準のアラート画面が表示されます。

基本的な書き方

以下は、画面に「こんにちは！」というメッセージを表示するコードです。

// アラートを表示する
window.alert("こんにちは！");

// windowオブジェクトは省略可能なので、以下のように書くのが一般的です
alert("処理が完了しました。");

実行結果

ブラウザの中央上部などに、指定したテキストと「OK」ボタンが含まれたダイアログが表示されます。
ユーザーが「OK」を押すまで、ブラウザ上の他の操作（ボタンクリックなど）は一切できなくなります。

変数の中身を表示する

デバッグ（プログラムの動作確認）の際に、変数の値を確認する目的で alert() を使うこともあります。

const userName = "鈴木さん";
const score = 95;

// 変数と文字列を組み合わせて表示
alert(userName + "の点数は" + score + "点です。");

このように記述すると、「鈴木さんの点数は95点です。」というメッセージが表示されます。

confirm()メソッドで確認ダイアログを表示する方法

次に、ユーザーの意思確認を行う confirm() の使い方です。

こちらは「OK」か「キャンセル」の結果をプログラムで受け取る必要があるため、戻り値（返り値）の扱いが重要になります。

基本的な書き方と戻り値

confirm() を実行すると、ユーザーの操作結果が「真偽値（boolean）」として返されます。

OK ボタンをクリックした場合： true
キャンセル ボタンをクリックした場合： false

// 確認ダイアログを表示し、結果を変数resultに代入
const result = confirm("本当にデータを削除しますか？");

// 結果をコンソールに出力して確認
console.log(result);

実行結果

ダイアログが表示され、ユーザーが「OK」を押せばコンソールに true が、「キャンセル」を押せば false が表示されます。

この仕組みを利用して、次の章で解説する条件分岐を作成します。

【実践】confirm()を使った条件分岐のサンプルコード

実務で confirm() を使う場合のほとんどは、if 文と組み合わせて処理を分岐させるケースです。

ここでは、「送信ボタン」が押された際に確認ダイアログを出し、OKなら送信処理を実行、キャンセルなら中断するというシナリオでコードを作成します。

ボタンクリック時の確認処理サンプル

<!-- HTML部分 -->
<button onclick="submitForm()">送信する</button>

<script>
// JavaScript部分
function submitForm() {
  // 確認ダイアログを表示
  const isConfirmed = confirm("送信してもよろしいですか？");

  // 戻り値を使って条件分岐
  if (isConfirmed === true) {
    // OKが押された場合の処理
    alert("送信しました！");
    // 実際にはここでフォームの送信処理やAPI通信などを行います
    console.log("処理実行：送信完了");
  } else {
    // キャンセルが押された場合の処理
    alert("送信をキャンセルしました。");
    console.log("処理実行：キャンセル");
  }
}
</script>

ソースコードの解説

まず、HTMLのボタンに onclick 属性を設定し、クリック時に submitForm 関数が呼ばれるようにしています。

関数内では confirm("送信してもよろしいですか？") を実行し、その結果を定数 isConfirmed に格納します。

if (isConfirmed === true) で判定を行い、真（OK）であれば送信完了のアラートを出し、偽（キャンセル）であればキャンセルした旨をアラートで通知します。

このように記述することで、ユーザーの誤操作を防ぐ安全なUIを作ることができます。

ダイアログ内で改行する方法

alert や confirm のメッセージ内で改行を入れたい場合、HTMLの <br> タグは使用できません。
代わりに、エスケープシーケンスと呼ばれる特殊な文字コード \n を使用します。

改行コードを使ったサンプル

// \n を入れることで改行される
alert("エラーが発生しました。\n管理者にお問い合わせください。\nエラーコード: 001");

実行結果

ダイアログ内のテキストは以下のように表示されます。

エラーが発生しました。管理者にお問い合わせください。エラーコード: 001

MacやWindowsなどOSを問わず、JavaScriptのダイアログ内での改行は \n で統一されています。

alertやconfirmのデザインは変更できない？

ここまで標準の alert と confirm について解説してきましたが、これらには大きな弱点があります。
それは、「デザイン（見た目）をCSSで一切変更できない」という点と、「ダイアログが出ている間、JavaScriptの実行が完全に停止してしまう（スレッドをブロックする）」という点です。

そのため、モダンなWeb開発においては、標準のダイアログを使わず、以下の方法で独自のダイアログを実装することが推奨されています。

1. HTML5の dialog 要素を使う（推奨）

現在のブラウザでは、標準で <dialog> タグがサポートされています。
これを使えば、HTMLとCSSで自由にデザインを作成でき、JavaScriptで制御も簡単に行えます。

<!-- ダイアログの定義 -->
<dialog id="myConfirmDialog">
  <p>本当に削除しますか？</p>
  <button id="cancelBtn">キャンセル</button>
  <button id="okBtn">OK</button>
</dialog>

<button onclick="showDialog()">削除確認</button>

<script>
  const dialog = document.getElementById('myConfirmDialog');
  const cancelBtn = document.getElementById('cancelBtn');
  const okBtn = document.getElementById('okBtn');

  // ダイアログを表示
  function showDialog() {
    dialog.showModal(); // モーダルとして表示
  }

  // キャンセルボタンの処理
  cancelBtn.addEventListener('click', () => {
    dialog.close();
    console.log("キャンセルされました");
  });

  // OKボタンの処理
  okBtn.addEventListener('click', () => {
    dialog.close();
    console.log("削除を実行しました");
    alert("削除完了");
  });
</script>

2. ライブラリ「SweetAlert2」を使う

手軽におしゃれなアラートを使いたい場合は、「SweetAlert2」などのライブラリを導入するのが一般的です。
複雑なコードを書かずに、リッチなアニメーション付きのダイアログを実装できます。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptでのalertとconfirmの使い分けやカスタマイズ方法を中心に解説してきました。

なお、JavaScriptのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

JavaScriptのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。