【JavaScript】アラート・確認ダイアログを表示する方法

【JavaScript】アラート・確認ダイアログを表示する方法

Amazonのアソシエイトとして、IT技術ライフは適格販売により収入を得ています。

記事の文字数：1454

本記事では、JavaScriptのalert()とconfirm()について解説します。alert()は、ユーザーに対してメッセージをポップアップで表示するシンプルな方法であり、通知や警告の目的で使用されます。一方、confirm()は「OK」と「キャンセル」の選択肢を提供し、ユーザーの意思確認に利用できます。


投稿履歴

JavaScript学習者にお勧めの本

商品1

1冊ですべて身につくJavaScript入門講座

商品2

独習JavaScript 新版

商品3

これからのJavaScriptの教科書


ITエンジニアにお勧めの本

商品1

世界一流エンジニアの思考法 (文春e-book)

商品2

ソフトウェア開発現場の「失敗」集めてみた。 42の失敗事例で学ぶチーム開発のうまい進めかた

商品3

IT用語図鑑［エンジニア編］ 開発・Web制作で知っておきたい頻出キーワード256

JavaScriptでアラートを表示する場合はalertメソッドを使用し、確認ダイアログの表示はconfirmメソッドを使います。

確認した環境（ブラウザ）

Microsoft Edge
バージョン 129.0.2792.52

アラート（alert）の実装

alert() はブラウザの組み込み関数で、ユーザーに対して即座にメッセージを伝える手段として利用されます。

構文

alertメソッドに表示したい文字列を指定します。

構文
alert("アラートに表示するメッセージ");

実装例

以下alertメソッドの実装例です。

alert_test.html
<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>アラートテスト</title>
</head>


<body>
    <script>
        alert("アラートを表示");
    </script>
</body>


</html>

表示例

保存したalert_test.htmlをブラウザで起動して確認します。

alt text

注意事項

ユーザーがアラートの「OK」ボタンをクリックするまでスクリプトの実行が一時停止します。 そのため、情報の提示やデバッグに便利ですが、過度に使用するとユーザーエクスペリエンスを損なう可能性があります。

確認ダイアログ（confirm）の実装

confirm() は、ユーザーに「OK」または「キャンセル」の選択肢を与えるポップアップを表示する関数です。戻り値として、OKを押した場合はtrue、キャンセルを押した場合はfalseを返します。

構文

confirmメソッドに表示したい文字列を指定します。

構文
confirm("確認ダイアログに表示するメッセージ");

実装例

以下confirmメソッドの実装例です。

confirm_test.html
<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>確認ダイアログテスト</title>
</head>


<body>
    <script>
        if (confirm("確認ダイアログを表示")) {
            document.write('<p>OKを押下</p>');
        } else {
            document.write('<p>キャンセルを押下</p>');
        }
    </script>
</body>


</html>

表示例

保存したconfirm_test.htmlをブラウザで起動して確認します。

alt text

OKを押下した場合

OKを押下のメッセージが表示されました。

alt text

キャンセルを押下した場合

キャンセルを押下のメッセージが表示されました。

alt text

送信ボタン押下時の確認ダイアログ

確認ダイアログを利用する場面として、送信ボタン押下時の実装例を紹介します。

実装例

確認ダイアログは、ボタンを押下した際の確認に利用するケースが考えられます。
以下は送信ボタンから確認ダイアログを表示する実装例です。

confirm_test2.html
<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>確認ダイアログテスト</title>
</head>


<body>
    <div id="container">
        <button id="button">送信</button>
    </div>


    <script>
        var btn = document.getElementById('button');


        btn.addEventListener('click', function () {
            const container = document.getElementById('container');
            if (confirm("送信して問題ないですか？")) {
                container.innerHTML = container.innerHTML + '<p>OKが押下されました</p>';
            } else {
                container.innerHTML = container.innerHTML + '<p>キャンセルが押下されました</p>';
            }


        })
    </script>
</body>


</html>

表示例

保存したconfirm_test2.htmlをブラウザで起動して確認します。
起動後まず送信ボタンを押下します。

alt text

確認ダイアログが表示されるので、OK・キャンセルボタンをそれぞれ確認します。

alt text

OKを押下した場合

OKが押下されましたのメッセージが表示されました。

alt text

キャンセルを押下した場合

キャンセルが押下されましたのメッセージが表示されました。

alt text

まとめ

  • アラートを表示するには<script>内にalertメソッドを指定する。
  • 確認ダイアログを表示するには<script>内にconfirmメソッドを指定する。
  • alert() や confirm() は処理を一時的に停止するため、頻繁に使用するとユーザー体験が損なわれる可能性がある。

JavaScriptのalert()とconfirm()は、簡単な通知やユーザーの意思確認に便利ですが、多用は避けるべきです。
またモダンなWeb開発では、alert() や confirm() の代わりにカスタムダイアログやモーダルを使用することが推奨されます。
適切な場面で活用し、ユーザーの操作性を考慮した実装を心掛けましょう。


JavaScript学習者にお勧めの本

商品1

1冊ですべて身につくJavaScript入門講座

商品2

独習JavaScript 新版

商品3

これからのJavaScriptの教科書


ITエンジニアにお勧めの本

商品1

世界一流エンジニアの思考法 (文春e-book)

商品2

ソフトウェア開発現場の「失敗」集めてみた。 42の失敗事例で学ぶチーム開発のうまい進めかた

商品3

IT用語図鑑［エンジニア編］ 開発・Web制作で知っておきたい頻出キーワード256


以上で本記事の解説を終わります。
よいITライフを！
Scroll to Top