JavaScript入門講座ーダイアログを表示する方法をわかりやすく解説

JavaScriptには、ブラウザ特有の挙動をさせるメソッドが用意されています。みなさんが、普段様々なサイトを訪問していると見かけると思います。

本記事では、ブラウザからお知らせなどで使われるダイアログについて解説していきます。ダイアログは実行されると目で見てすぐわかるような挙動です。初学者の方にも、とてもわかりやすいものになっていますので、すぐにマスターできるでしょう。

本記事のペルソナ

JavaScript初学者の方
JavaScriptでダイアログの出し方を学びたい方

第35回 WebでJSを動かす

JavaScriptダイアログの解説
まとめ
参考文献

JavaScriptダイアログの解説

世の中には様々なWebサイトが存在し、機能も様々です。みなさんが、普段ウェブサイトを訪れている時、お知らせみたいなものを見たことはないでしょうか？

それがダイアログです。それはJavaScriptによって動いています。そのやりかたを今回は順番に解説していきます！

HTMLファイルの準備

では、まずはHTMLファイルを準備しましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座　ダイアログ
        </title>
        <script type="text/javascript">
            
        </script>
    </head>
    <body>

    </body>
</html>

記述する内容は上記のように、お作法と言った感じです。コピペしてください。
今後、JavaScriptとWeb開発をするなら自分のPCにテンプレとして保存しておくのもいいでしょう。

window.alertダイアログ

まずはアラートについて解説していきます。

これは最も基本的なダイアログになります。
早速サンプルを見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script type="text/javascript">
            window.onload = function(){
                window.alert("C.I.学園へようこそ！！");
            }
        </script>
    </head>
    <body>

    </body>
</html>

アラートはwindowインターフェイスと呼ばれるもののメソッドになります。
今回もJavaScriptは直接HTMLファイルに書いています。

$ open index.html

ターミナルで、このようなコマンドを実行してみましょう。もちろん直接ファイルを開いても良いです。

コマンドで開く場合は、現在のディレクトリにindex.htmlがあることを確認しましょう

開くと、このようなダイアログが開かれるはずです。これがアラートになります。

window.promptダイアログ

続いて、promptダイアログについて解説していきます。
こちらは文字を入力することができるダイアログになります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script type="text/javascript">
            window.onload = function(){
                let stock = prompt("あなたの好きな銘柄を教えて下さい！！");
                alert("あなたが好きな銘柄は"+stock+"なのですね！");
            }
        </script>
    </head>
    <body>

    </body>
</html>

promptの内部にはメッセージを付けることが可能です。これをつけることによって、ユーザにこちらの意図を伝えることができます。

このサンプルでは、入力したキーワードが先程のアラートとなって出てきます。

このように、実行するとダイアログが出てきます。これに文字を入力すると・・・

このように、表示されます。

window.confirmダイアログ

最後に紹介するのは、confirmダイアログになります。
こちらは、ユーザに選択をさせるダイアログになります。よく、入力中に戻るボタンを押したりすると、ユーザに知らせてボタンを押させます。

このようなユーザビリティにすることで、操作をしやすくさせています。
では早速見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script type="text/javascript">
            window.onload = function(){
                let flag = confirm("このウィンドウを閉じます。よろしいですか？");
                flag ? window.close() : alert("ウィンドウはこのままにします");
            }
        </script>
    </head>
    <body>

    </body>
</html>

confirmも同様に引数にユーザへのメッセージを入れることが可能です。
そして、返り値にはBooleanが返されます。

この処理では、少々見慣れないかもしれませんが、三項演算子というものを使っています。これは、IF文による条件分岐を簡略化した書き方になります。あまりこれを知らない方もいるかも知れませんが、実務ではかなり使われる書き方になりますので、興味や余力のある方は学んでみましょう。