JavaScriptでconfirmを使うと…

TOP
コラム
JavaScriptでconfirm

JavaScriptとは

まず初めに、名前が似ていますが、JavaとJavaScriptは全くの別物です。
Javaの利用分野はさまざまな大規模システムです。例えば、SNSなどのWeb関連サービスやAndroidのスマホ向けアプリなどがあります。
一方JavaScriptの利用分野は、Webブラウザ上で動くシステムやサービスなど、Webサイトのページ制作です。また、ページの再読み込みなしで新しいコンテンツを読み込んでくれたり、Twitterなどでは再読み込みなしでサーバーに投稿することができます。簡単に書くと、WEBページの動作、WEBアプリ開発、スマホアプリ開発、ゲーム開発などが基本となります。
今回はWEBページ上で表示される内容について学習していきたいと思います。今回は「confirm()メソッド」についてです。

confirmとは？

confirmとは、Webページ上に確認ダイアログボックスを表示させるときに使用するメソッドです。確認ダイアログというのは、ユーザーに確認を要求したり、注意を喚起したりするためのポップアップがダイアログに該当します。(ちなみにダイアログとはダイアログボックスの略です。)

◯◯でよろしいですか。

キャンセル

というような画面で、「この内容で送信してもよろしいですか？」「入力項目に誤りがあります」などの内容を見たことがあるはずです。 Webサイトでユーザー情報を登録している時など、このようなポップアップが表示され、[OK]か[キャンセル]ボタンでWebサイト側から確認を求められた経験があるのではないでしょうか。このダイアログはいつでも一番手前に表示され、ユーザーに大切な情報を伝えてくれるのです。

confirmを使う

JavaScriptで確認ダイアログを表示させるには、confirmを使って次のようなプログラムを書きます。本来はWebページの編集に用いられる内容ですので、HTMLの内容に関係する<script>…</script>なども一部だけ一緒に表記しています。わからない場合はHTMLとCSSについても学習してみてください。

　<html>
　　 <body>

　　　 <script>
　　　 window.confirm("続けますか？");　(⇦この「window.」は書かなくても良い)
　　　 </script>

　　 </body>
　</html>

このように書くと「OK」と「キャンセル」のボタンがある確認ダイアログが出現します。ただし、上記の状態ではどちらを選んでも何も表示されません。

confirmの戻り値を使って答えを表示することもできますし、if文を使うこともできます。

　<body>
　 <script>
　 if(confirm("ダウンロードしますか？")){
　　　 console.log("ダウンロード中…");　(⇦ture(「OK」を選択)の時は「ダウンロード中…」と表示される)
　　　else {
　　　　 console.log("キャンセルされました");(⇦false(「キャンセル」を選択)の時は「キャンセルされました」と表示される)
　　　 }
　 }　　　
　 </script>
　 </body>
　

このとき「OK」を押すと「true」という結果が返され、if文の中身が表示されます。反対に「キャンセル」を押すと「false」が返され、「else」の内容が表示されるように作られます。

ダイアログつながりでもう一つ紹介しておくと、通常文字列で警告を出したい場合は、alertを用います。

alert("警告します");

また、ダイアログで文字列の入力をさせたい場合は、promptを用います。

var result = prompt("名前を入力してください");
console.log(result);

このようにすると入力した名前が表示されます。キャンセルをした場合は「null」が返ります。

見やすくしよう

confirmの引数に指定したダイアログに表示するテキストの文字列は、基本的に改行なしで表示されます。しかし改行を入れて段落を作ったり、見やすくしたい場合もあります。このようなは「エスケープシーケンス」を使用します。「n」で改行することができます。

window.confirm('イヌ¥nネコ\nクマ');

エスケープシーケンスとは、JavaScriptで特殊な文字を入力する際に￥(日本円)か、\（バックスラッシュ）を前につけて表示する方法です。「￥」か「\」のどちらが正しいのかということですが、基本的にはどちらでも構いません。ただし、日本以外の国の通貨は「￥（円）」では無いため、英語キーボードでは「\」を使用することが一般的です。
設定されているフォントによっては「￥」を押したら、「\」で表示される環境もありますし、「￥」のまま表示される環境もあります。私が使っているのはMacBookなのですが、MacBookで「\」を入力する際は、「option」を押しながら、「¥」を押すと「\」が表示されますので試して見てください。

最後に

今回扱ったダイアログの内容に関してだけでも、他にできることはたくさんあります。その際にはHTMLとCSSも一緒に使わなければならない場面が多くありますので、同時進行で学習を進めるか、その都度学習をして見てください。このようにJavaScriptは、Webページの骨組みの中でHTMLでは対応できない部分をサポートしているという面白さがあります。
興味がある方は、どんどん学習の幅を広げて見てはいかがでしょうか。