JavaScriptのalert, confirm, promptの使い方、ダイアログ・メッセージを表示する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのalert, confirm, promptの使い方、ダイアログ・メッセージを表示する方法について解説していきます。

1 alert, confirm, promptの使い方、ダイアログ・メッセージを表示する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 プログラミング学習・エンジニア転職関連の情報
5 Twitterやってます！Follow Me！
6 最近の投稿

alert, confirm, promptの使い方、ダイアログ・メッセージを表示する方法

alert でアラート・メッセージを表示する

警告や注意メッセージなどのをダイアログを表示させたいときに使用するのが、alert() です。

<div>

<button id="robotama1">ロボ玉試作1号機</button>

<script>
    
    const alertBtn = document.getElementById('robotama1');

    // 1. 警告などをポップアップ表示させたいときに使用するのが、alert()
    alertBtn.addEventListener('click', () => {
        // 改行は「 \n 」でする
        alert('商品を受け付けました！\nご利用いただきありがとうございました。');
    });

</script>
</div>

ボタンを押すと次のようなアラート・ダイアログが表示されます。

confirm で Yes / Noを選択できる確認ダイアログを表示する

確認のポップアップを表示させたいときに使用するのが、confirm() です。

Yes/No をユーザーに選択させることができて、その返り値(真偽値)から条件分岐で処理ができます。

<div>

<button id="robotama2">ロボ玉試作2号機</button>

<script>

    const confirmBtn = document.getElementById('robotama2');

    // 2. 確認のポップアップを表示させたいときに使用するのが、confirm()
    // Yes/No をユーザーに選択させたい時に役立ちます
    confirmBtn.addEventListener('click', () => {

        // 真偽値が、返ってくる
        const confirmResult = confirm('確認画面に進みます。\nよろしいですか？');
        console.log({confirmResult});

        // 真偽値を使って、処理の条件分岐ができる
        if (confirmResult) {
            console.log('確認画面に進む・処理を実行する');
        } else {
            console.log('確認画面に進まない');
        }
    });

</script>
</div>

ボタンを押すと次のようなコンフォーム・ダイアログが表示されます。

prompt で入力フォームを持ったダイアログを表示する

ユーザーからの文字入力をしてもらいたい時に使用するのが、prompt()です。

<div>

<button id="robotama3">ロボ玉試作3号機</button>

<script>

    const promptBtn = document.getElementById('robotama3');

    // 3. ユーザーからの文字入力をしてもらいたい時に使用するポップアップ
    promptBtn.addEventListener('click', () => {
        
        // 入力テキスト or null => キャンセルされると null になる
        const text = prompt('パスワードを入力してください', 'ロボ玉');
        console.log({text});
    });

</script>
</div>

ボタンを押すと次のようなプロンプト・ダイアログが表示されます。

SampleCode全文

<div>

<button id="robotama1">ロボ玉試作1号機</button>
<button id="robotama2">ロボ玉試作2号機</button>
<button id="robotama3">ロボ玉試作3号機</button>

<script>
    
    const alertBtn = document.getElementById('robotama1');
    const confirmBtn = document.getElementById('robotama2');
    const promptBtn = document.getElementById('robotama3');


    // 1. 警告などをポップアップ表示させたいときに使用するのが、alert()
    alertBtn.addEventListener('click', () => {
        // 改行は「 \n 」でする
        alert('商品を受け付けました！\nご利用いただきありがとうございました。');
    });


    // 2. 確認のポップアップを表示させたいときに使用するのが、confirm()
    // Yes/No をユーザーに選択させたい時に役立ちます
    confirmBtn.addEventListener('click', () => {

        // 真偽値が、返ってくる
        const confirmResult = confirm('確認画面に進みます。\nよろしいですか？');
        console.log({confirmResult});

        // 真偽値を使って、処理の条件分岐ができる
        if (confirmResult) {
            console.log('確認画面に進む・処理を実行する');
        } else {
            console.log('確認画面に進まない');
        }
    });

    // 3. ユーザーからの文字入力をしてもらいたい時に使用するポップアップ
    promptBtn.addEventListener('click', () => {
        
        // 入力テキスト or null => キャンセルされると null になる
        const text = prompt('パスワードを入力してください', 'ロボ玉');
        console.log({text});
    });

</script>
</div>