MENU

JavaScriptサンプルコード関数・メソッド

【JavaScript】 alert・confirm・promptでダイアログメッセージを表示する

更新日:2021/02/24

 

 

ブラウザ上で動作するJavaScriptには、alert/confirm/promptという入力ダイアログを表示するメソッドが用意されています。

 

今回はこれらのメソッドの使い方と、外観のカスタマイズについてお伝えします。

 

■お願い
去年ECMAScript2020を頑張って日本語訳しましたが、誰も見てくれません・・・
誰かみて!!
【JavaScript】 学習のためECMAScript2020を日本語訳してみました

alertはOKボタンのみ

 

alertは日本語で警報という意味があります。

 

JavaScriptでのalertメソッドは、ユーザーになんらかのメッセージを伝えるような場面で使用されます。

 

使い方

 

alertメソッドはグローバルオブジェクトのプロパティなので、次のように実行すると、引数として与えた値がブラウザに表示されます。

 


window.alert("aaa");

 

alertメソッド 実行結果 Firefox

 

グローバルオブジェクトのメソッドはオブジェクト指定を省略できるので、次のように記述できます。

 


alert("aaa");

 

ブラウザによって表示が異なる

 

上で紹介した実行結果は、Firefoxのものです。

 

chromeの実行結果は、これとはかなり変わっています。

 

alertメソッド 実行結果 chrome

 

「このページの内容」てなんだかおかしな表現です。
変更したいです。

 

しかし、外観や表示内容は固定のため、プログラム側で変更できません。

 

alertの外観を変更する

 

alertの外観を変更したい場合、自分で一から作成する必要があります。

 

独自alertの例

 

↓押してみて!!

 

JavaScript

 


const myAlert = ((  ) =>{

    let alt=null,p=null,btn=null;

    window.addEventListener( "DOMContentLoaded" , ()=> {
        if( alt !== null ) return;

        alt = document.getElementById("alert");
        p = alt.querySelector("p");
        btn = alt.querySelector("button");
        btn.addEventListener("click",()=>alt.style.display="none");

    });

    return ( text )=>{
        p.textContent = text;
        alt.style.display="block";
    }

})();

 

この関数は、onclick属性で呼び出すことを考慮しています。

 

html要素はDOM構築後でないと取得できないので、DOMContentLoadedイベントを待ちます。

 

 

CSS

 


#alert{
        display: none;
        position: fixed;
        background: rgba(0,0,0,.3);
        top:0;
        left:0;
        bottom: 0;
        right: 0;
        z-index: 100;
}
#alert div{
        border: 5px double purple;
        box-shadow: 5px 5px 3px rgba(0,0,0,.2);
        border-radius: 50%;
        padding: 5px;
        background: pink;
        position: absolute;
        width: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
}

 

#alertは画面いっぱいに表示することで、リンクなどを押せない状態にしています。

 

#alert divは、top、left、transformの組み合わせで、画面中央に表示しています。

 

html

 


<div id="alert">
    <div>
        <p></p>
        <button>確認しました</button>
    </div>
</div>
<button onclick="myAlert('確認')">確認</button>

confirmはOKとキャンセルボタンの二つ

 

confirmは日本語で確認という意味があります。

 

confirmメソッドは、OKとキャンセルボタンの二つが表示され、ユーザーがどちらかを選択するのを待ちます。

 

使い方

 

alertメソッドと同じように、表示するメッセージを引数として指定します。

 


const result = confirm("aaa");

 

confirmメソッド  実行結果 Firefox

 

ユーザーがOKを選択するとtrueが、キャンセルを選択するとfalseが返ります。

 

次のように、直接結果を参照するような使い方をするケースが多いです。

 


if(  !confirm("これでいいですか?") ) alert("キャンセルされました");

 

confirmの外観を変更する

 

confirmは、alertメソッドと同じように外観を変更することができません。

 

そこで、confirmと同じ機能を自作してみます。

 

 

独自confirmの例

 

↓押してみて!!

 

JavaScript

 


(()=>{

    const myConfirm = ((  ) =>{

        let alt=null,p=null,btn_yes=null,btn_no=null;

        window.addEventListener( "DOMContentLoaded" , ()=> {
            if( alt !== null ) return;

            alt = document.getElementById("confirm");
            p = alt.querySelector("p");
            btn_yes = alt.querySelector("#confirm-yes");
            btn_no = alt.querySelector("#confirm-no");
        });

        return  ( text )=>{
            p.textContent = text;
            alt.style.display="block";

            return new Promise( ( resolve  )=>{
                const yesEvent = ()=>{resolve(true);removeEvent();}
                const noEvent = ()=>{resolve(false);removeEvent();}
                const removeEvent = ()=>{
                    btn_yes.removeEventListener("click",yesEvent);
                    btn_no.removeEventListener("click",noEvent);
                    alt.style.display="none";
                };
                btn_yes.addEventListener("click",yesEvent);
                btn_no.addEventListener("click",noEvent);
            });
        };
    })();

    const myFunc = async ()=>{
        const result = await myConfirm("確認");
        alert(result); // ①
    };

    window.addEventListener( "DOMContentLoaded" , ()=> {
        document.getElementById("btn").addEventListener("click",()=>{
            myFunc(); // ②
            
        });
    });

})();

 

confirmはプログラムコード上で押されたボタンを判断するので、onclick属性で呼び出すことを考慮していません。
ただし、alertとの違いがわかるように流れを流用しています。そのためDOMContentLoadedイベントを2か所で待つようなコードになっています。

 

JavaScriptは、プログラムコードの流れを止めて、ボタンが押されるのを待つにはasyncとawaitを使用します。

 

関数myFuncでawaitキーワードと共にmyConfirmを呼び出すと、その後のコード①が保留され、呼び出しもとに戻ります。
呼び出し元のコードはそのまま実行されるので、confirmに関連する処理は、myFuncに記述する必要があります。

 

CSS

 


#confirm{
    display: none;
    position: fixed;
    background: rgba(0,0,0,.3);
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    z-index: 100;
}
#confirm div{
    border: 5px double purple;
    box-shadow: 5px 5px 3px rgba(0,0,0,.2);
    border-radius: 50%;
    padding: 5px;
    background: pink;
    position: absolute;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

 

CSSは、ID以外はalertと同じです。

 

html

 


<div id="confirm">
    <div>
        <p></p>
        <button id="confirm-yes">はい</button><button id="confirm-no">いいえ</button>
    </div>
</div>
<button id="btn">確認</button>

promptはユーザーからの文字入力を待つ

promptは日本語で促すという意味があります。

 

promptメソッドは、文字入力欄とOKとキャンセルボタンが表示され、ユーザーが文字入力するのを促します。

 

使い方

 

promptメソッドは、confirmメソッドと同じように表示するメッセージを引数として指定します。

 


const result = prompt("aaa");

 

confirmメソッド  実行結果 Firefox

 

また、第二引数を指定することで、入力文字の初期値を指定できます。

 


const result = prompt("aaa","これは初期値です");

 

confirmメソッド  初期値あり

 

ユーザーが文字を入力してOKボタンを押すと、入力した文字が返ります。

 

キャンセルボタンやEscキーが押されると、Nullが返ります。

 

ただし古いブラウザによっては空文字("")が返ることがあります。
ユーザーが何も入力せずにOKボタンを押したとき空文字が返るので、この場合はキャンセルしたかどうかの判断ができません。
プログラムコードを古いブラウザにも対応させたい場合、promptの使用は慎重におこなう必要があります。

 

 

promptの外観を変更する

 

alertやconfirmと同じように、promptを自作してみます。

 


↓押してみて!!

 

JavaScript

 


(()=>{

    const myPrompt = ((  ) =>{

        let alt=null,p=null,btn_yes=null,btn_no=null,input=null;

        window.addEventListener( "DOMContentLoaded" , ()=> {
            if( alt !== null ) return;

            alt = document.getElementById("prompt");
            p = alt.querySelector("p");
            btn_yes = alt.querySelector("#prompt-yes");
            btn_no = alt.querySelector("#prompt-no");
            input = alt.querySelector("#prompt-input");
        });

        return  ( text , intialValue = "")=>{
            p.textContent = text;
            alt.style.display="block";
            input.value = intialValue;

            return new Promise( ( resolve  )=>{
                const yesEvent = ()=>{resolve(input.value);removeEvent();}
                const noEvent = ()=>{resolve(null);removeEvent();}
                const removeEvent = ()=>{
                    btn_yes.removeEventListener("click",yesEvent);
                    btn_no.removeEventListener("click",noEvent);
                    alt.style.display="none";
                };
                btn_yes.addEventListener("click",yesEvent);
                btn_no.addEventListener("click",noEvent);
            });
        };
    })();

    const myFunc = async ()=>{
        const result = await myPrompt("入力してください");
        alert(result);
    };

    window.addEventListener( "DOMContentLoaded" , ()=> {
        document.getElementById("btn").addEventListener("click",()=>{
            myFunc();
        });
    });
})();

 

入力欄に関する処理が追加されただけで、内容はconfirmとほぼ同じです。

 

CSS

 


#prompt{
    display: none;
    position: fixed;
    background: rgba(0,0,0,.3);
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    z-index: 100;
}
#prompt div{
    border: 5px double purple;
    box-shadow: 5px 5px 3px rgba(0,0,0,.2);
    border-radius: 50%;
    padding: 5px;
    background: pink;
    position: absolute;
    width: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#prompt div p{
    margin: 5px auto;
}

 

CSSは入力欄とボタンが枠内に収まるように調整している他は、confirmとほぼ同じです。

 

html

 


<div id="prompt">
    <div>
        <p></p>
        <input id="prompt-input" type="text"><br>
        <button id="prompt-yes">OK</button><button id="prompt-no">キャンセル</button>
    </div>
</div>
<button id="btn">確認</button>

独自関数を既存のメソッドと置き換える

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ