今回は、windowオブジェクトのメソッドであるconfirmについて、ざっくりと解説していきたいと思います。confirmメソッドを使用すると、ウェブページに確認ダイアログを表示させる事が出来ます。
この記事では、
- 「confirm」メソッドとは？
- confirmボタンを作ってみよう
- 変数を使ってみよう
- 改行について
- ボタンやリンクを使おう
- confirmの戻り値で条件分岐
- 「submit」の確認ダイアログを作ろう！
- ダイアログをカスタマイズしよう！
- alert(アラート)でダイアログを表示する方法
などについて解説していきます。
「confirm」メソッドとは？
皆さんはconfirmメソッドを使った事がありますか？そもそも、confirmが何か知っていますか？
confirmとは、ウェブページ上に確認ダイアログボックスを表示させるのに活躍するメソッドなんです。確認ダイアログとは、ユーザーに確認を要求するために、一時的に表れる小さなウィンドウの事です。
confirmメソッドを使用することで、ユーザの選択によって処理を振り分ける事が出来るのでとても便利です。
confirmボタンを作ってみよう
では早速、confirmメソッドを使用し、確認ダイアログを表示させてみましょう。
以下のコードをご覧ください。
<html>
<body>
<script>
window.confirm("これが確認ダイアログです。");
</script>
</body>
</html>
コードを実行すると、以下の画像のようなダイアログが表示されます。
このサンプルコードは、単純な文字列をconfirmの引数に当てはめて、Webページで表示する基本例です。この場合、確認ダイアログを表示させただけなので、OKやキャンセルボタンをクリックしても何も起こりません。
confirmメソッドは、引数に設定した文字列をダイアログに表示する仕組みになっています。その為、今回は「これが確認ダイアログです。」という文字列がダイアログボックスに表示されたわけです。
変数を使ってみよう
「confirm()」の引数にはダイアログに表示したいテキスト文字を記述するのですが、「変数」を使うことも可能です。どちらかと言えば、実際のプログラミングでは変数を利用したテキスト文字を指定するのが一般的と言えるでしょう。
例えば、次のサンプル例を見てください！
var name = '太郎'; window.confirm( name + 'さん、この内容で宜しいですか？');
この例では、あらかじめ「name」という変数にユーザー名を格納していますね。
この変数をconfirmの引数に当てはめることで、柔軟なメッセージの表示に対応できるようになるわけです。
実行すると、以下のようなダイアログが表示されるのが分かります！
このように、変数を利用することで状況に応じた情報をダイアログで表示できるようになるので便利です。
改行について
次に、ダイアログに表示するテキストの「改行」についてご紹介します。一般的にconfirmの引数に指定した文字列は「改行なし」で表示されます。
しかしながら、場合によっては改行を入れて段落を作りたいケースもあるでしょう。このような場合に役立つのが「エスケープシーケンス」を使う方法で、改行は「n」で表現することができます。
それでは、confirmのテキストに改行を挿入する例を見てみましょう！
window.confirm('項目1n項目2n項目3');
注目すべきは、confirmの引数に指定した文字列です。
「項目1n項目2・・・」のように、文字と文字の間に特殊文字の「n」を挿入することで改行を実現しています。
実際に実行すると、以下のように改行された文字が表示されます！
エスケープシーケンスは文字列の制御を行うことができる特殊文字なのですが、基本的な使い方は次の記事で詳しく解説しています！
また、改行の使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。
ボタンやリンクを使おう
これまでは、「confirm()」メソッドを直接記述していました。
しかし、通常はボタンやリンクをクリックした際にダイアログを表示するのが一般的です。そこで、簡単なサンプル例と一緒にクリックして表示されるダイアログを見ていきましょう！
まずは、「ボタン」をクリックして表示するダイアログの例です。
<body>
<button id="btn">ボタン</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
window.confirm('クリックされました！');
})
</script>
</body>
この例では、単純に「button要素」を作って配置しているだけですね。もちろんフォーム要素の「inputタグ」を代用しても構いません。
あとは、buttonタグの「id属性」を使ってボタン要素を取得し、イベント処理を実装すれば完成です！ これで、ボタンをクリックした瞬間にダイアログが表示されるというわけです。
実は、リンクをクリックする場合もほとんど同じ考え方で実現できます！
<a id="btn" href="https://www.google.co.jp/">サンプルリンク</a>
ポイントはボタンの時と同じように「id属性」を付与している点です。これにより、同じ方法でconfirmを使ったダイアログを表示することができますよね？
リンクの場合は、クリックすると画面遷移する前にダイアログが表示されるようにります。
confirmの戻り値で条件分岐
confirmメソッドは、「OK」「キャンセル」をクリックした時に、戻り値として「true / false」返します。
つまり、以下のような特性を持っています。
- 「OK」ボタンをクリックした → trueが返される
- 「キャンセル」ボタンをクリックした → falseが返される
そのため、ユーザの選択によってプログラム内で条件分岐をする事が出来るわけです。
次のサンプル例を見てください！
var result = window.confirm('ボタンをクリックしてください');
console.log( result );
実行結果
true
この例では、confirmの戻り値を取得するために変数へ結果を代入しています。ダイアログを表示して「OK」ボタンをクリックしてみてください。実行結果を見ると分かりますが、コンソールログに「true」が表示されましたね？
もちろん「キャンセル」ボタンをクリックすると、「false」がコンソールログに表示されます。この特性を利用すれば、ダイアログを使った条件分岐は簡単に実現できます！
<body>
<button id="btn">ボタン</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var result = window.confirm('ボタンをクリック！');
if( result ) {
console.log('OKがクリックされました');
}
else {
console.log('キャンセルがクリックされました');
}
})
</script>
</body>
この例では、ボタン要素を配置してクリックイベントの処理を実装しています。
イベント処理の中でconfirmの戻り値を変数「result」に代入し、その値を「IF文」の条件式に流用しているわけです。
このように記述すれば、各ボタンがクリックされた時に応じた処理を記述できるので便利ですね。
「submit」の確認ダイアログを作ろう！
フォームなどでユーザが入力を完了し「submitボタン」をクリックした際に表示する確認ダイアログを作ってみましょう！
一般的に、送信ボタンをクリックすると即座にフォームの内容がサーバーへ送信されます。そのため、確認ダイアログを表示して本当に送信しても良いかをユーザーに尋ねる目的があります。
プログラムは意外に簡単で、これまで学んだ内容だけで実現できます！
<body>
<form name="myform">
<input type="text" value="名前">
<input name="btn" type="submit" value="送信">
</form>
<script>
document.myform.btn.addEventListener('click', function() {
var result = window.confirm('送信しても宜しいですか？');
if( result ) {
//「true」の処理
}
else {
//「false」の処理
}
})
</script>
</body>
サンプルを簡単にするために、名前を入力して送信するだけのフォームにしています。この「ボタン」をクリックすると、通常はフォームの内容がサーバーへ送信されます。
しかし、フォーム要素の「name属性」を利用して「document.myform.btn」と記述することでボタン要素を取得しています。このボタン要素を使ってイベント処理を実装することで、フォームの内容を送信する前にダイアログを表示できるわけです。
あとは、「OK」「キャンセル」ボタンに応じた処理を実装すれば、ユーザーが使いやすいフォームを作れますね！
JavaScriptからフォームの内容を送信するプログラム事例については、次の記事で詳しく解説していますので合わせて参考にしてみてください！
ダイアログをカスタマイズしよう！
最後に、ダイアログのカスタマイズについてご紹介しておきます！
一般的にconfirmを使ったダイアログは、開発者がカスタマイズできないように設計されています。そのため、ボタンの表記を変更したり追加するようなこともできません。
それでは、どのようにカスタマイズすれば良いのでしょうか？
最も単純で簡単な方法は、自分でダイアログを自作することです！ 自作と言っても難しくはありません。
考え方としては「HTML / CSS」でダイアログを作成し、JavaScriptで「表示 / 非表示」を制御するだけです！
まずは、HTMLで簡単なダイアログの骨組みを作ります。
<div id="dialog">
<p>ボタンをクリックしてください</p>
<button id="yes">はい</button>
<button id="no">いいえ</button>
<button id="cancel">キャンセル</button>
</div>
<button id="btn">ボタン</button>
メッセージ表示用の「p要素」と、「はい / いいえ / キャンセル」のボタンが3つだけです。
これにより、自分好みのボタンや配置を構成することが出来るわけですね。
あとは、ダイアログを表示するためのボタンを配置しています。
このHTMLだけだと「ダイアログ」に見えないので、CSSを追加しておきます。
#dialog {
width: 250px;
margin: auto;
margin-top: 40vh;
padding: 30px 20px;
display: none;
text-align: center;
border: 1px solid #aaa;
box-shadow: 2px 2px 4px #888;
}
CSSについては、親要素であるdivタグのid属性を利用しています。
「width」でダイアログの幅を調整し「margin-top」で画面中央に配置するように設定しています。
「border」と「box-shadow」を調整することで、以下のようにダイアログっぽく見えるようになります！
また、「display: none」に設定しておくことで最初は「非表示」の状態にしておくのがポイントでしょう。
そして、JavaScriptから「表示 / 非表示」を制御できるようにしておきます！
//各種ボタン要素を取得しておく
var dialog = document.getElementById('dialog');
var btn = document.getElementById('btn');
var yes = document.getElementById('yes');
var no = document.getElementById('no');
var cancel = document.getElementById('cancel');
//ボタンがクリックされたらダイアログを表示する
btn.addEventListener('click', function() {
dialog.style.display = 'block';
this.style.display = 'none';
})
//「はい」がクリックされたら
yes.addEventListener('click', function(){ console.log('yes') });
//「いいえ」がクリックされたら
no.addEventListener('click', function(){ console.log('no') });
//「キャンセル」がクリックされたら
cancel.addEventListener('click', function(){ console.log('cancel') });
まず最初に、ダイアログに設定したボタン要素をすべて取得しておきましょう。
これさえ出来れば、あとは各ボタンごとにイベント処理を書くだけで実現できます！
ダイアログの「表示 / 非表示」については、以下のようになります。
- 「style.display = ‘block’」で表示する
- 「style.display = ‘none’」で非表示にする
これでダイアログを制御し、ボタンごとの処理を実行すれば良いわけです。このような方法を知っておけば、自分好みのダイアログを作ってユーザーに選択をしてもらえるので非常に便利ですよね！
alert(アラート)でダイアログを表示する方法
ここでは、alert(アラート)でダイアログを表示する方法を解説します。
alertメソッドでダイアログを表示するには、引数に表示させたい文字列を指定します。
次のプログラムで確認してみましょう。
alert('アラートのメッセージ')
実行結果：
このようにして、ダイアログにメッセージを表示することができました。
alertメソッドの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。
まとめ
今回は、confirmメソッドの基本について学びました。
confirmメソッドを使いこなせるようになると、ウェブページに変化を加えたりアラート表示とはまた違うメッセージ表示方法を使用する事ができるので便利です。
比較的使用頻度が高めのメソッドなので、覚えておいて決して損はありません。プログラムのクオリティ向上のためにも、ぜひconfirmメソッドをはじめ様々なテクニックを習得してみてくださいね。
