JavaScriptには、ユーザーに警告を出したり、選択を促したりする際に使用できる、ダイアログ表示用のメソッドがいくつか用意されています。
今回は、その中の１つである confirm メソッドについて、詳しく解説していきたいと思います。
基本構文から具体的な使用例まで合わせて紹介していきますので、ぜひ参考にしてみてください。
JavaScriptのconfirmメソッドとは？
confirmメソッドは、確認ダイアログを表示するためのメソッドです。
確認ダイアログとは、以下のように 「OK」 または 「キャンセル」 の選択肢でユーザーに確認を要求する小ウィンドウのことを指します。
confirmメソッドを使用してユーザーに選択を促すことによって、結果に応じた処理の振り分けができる便利な機能となっています。
たとえば、入力フォームの内容を送信する際や、データ削除などの重要なアクションを実行する前など、ユーザーに確認を求める必要がある場面で活用されています。
confirmメソッドの使い方
それでは早速、confirmメソッドの使い方について見ていきましょう。
基本構文と使い方
confirmメソッドを使用する際の基本構文は、以下のように記述します。
【基本構文】
window.confirm("メッセージ") // 'window.'は省略可能ダイアログを表示する際は、上記のコードのみで簡単に表示することが可能です。
メソッドの返り値として、OKボタンが選択された場合には true が、キャンセルが選択された場合には false が返却されるため、変数に格納したり、条件式として活用することもできます。
確認ダイアログを表示する
基本構文を確認したところで、実際にWeb上で確認ダイアログを表示してみましょう。
以下がサンプルコードです。
【サンプルコード】
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SampleConfirm</title>
</head>
<body>
<script type="text/javascript">
window.confirm("本当に削除しますか？");
</script>
</body>
</html>コードを実行すると、次のような確認ダイアログが表示されるかと思います。
【実行結果】
表示に必要な設定はこれだけで完了です。
ただし、この段階ではボタンを押しても何も動作しないため、実際に使用する際は各ボタンに対応する処理を実装する必要があります。
変数を使ってメッセージを表示する
confirmメソッドの引数に指定する文字列には、変数を活用することも可能です。
実際の開発では、事前に決められた文章だけでなく、変数を使用して一部の文字を動的に変化させることも多々あります。
以下のサンプルを見てみましょう。
【サンプルコード】
const name = "山田太郎"
window.confirm(`あなたの名前は「${name}」で合っていますか？`);【実行結果】
変数 「name」 に格納した文字列が、確認ダイアログに表示されているのが分かりますね。
上記はサンプルのため、変数に格納する値もベタ打ちとなっていますが、実際には動作の過程で取得したデータを反映させるのが一般的です。
表示するメッセージを改行する
ダイアログに表示する文章を任意の箇所で改行し、複数行に渡って表示させたい場合もあると思います。
その場合は、エスケープシーケンスを使用しましょう。
エスケープシーケンスとは、たとえば改行やタブなどの文字として入力ができない表記を、バックスラッシュ()と文字の組み合わせで表現する特殊な文字のことを言います。
改行は、エスケープシーケンスで “\n” と記述します。
文字列内の改行したい場所に入力することで、画面表示の際に文章が改行された状態で表示されるようになります。
以下のサンプルコードで実際の動作を見てみましょう。
【サンプルコード】
window.confirm("データ１\nデータ２\nデータ３\n\nこれらのデータを削除しますか？");【実行結果】
表示結果を見ると、エスケープシーケンスを記述した箇所で改行されているのが分かりますね。
このように、文字列の改行は “\n” を使用して行います。
ボタンやリンクをクリックした際にダイアログを出す
これまでのコードでは、トリガーとなるイベントを設けずに直接ダイアログを表示させていましたが、実際には特定のボタンやリンクなどをクリックした際に表示されるケースが多いです。
以下の簡単な例で動作を見てみましょう。
【サンプルコード】
<body>
<button id="btn">サンプルボタン</button>
<script type="text/javascript">
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
window.confirm("サンプルボタンが押されました");
}, false);
</script>
</body>上記のサンプルコードでは、ページ上にボタンを１つ配置し、クリックされた際に確認ダイアログを表示するよう処理を記述しています。
実際にボタンを押下すると、addEventListenerメソッドの引数に指定した関数が実行され、確認ダイアログが画面上に表示されます。
【実行結果】
id属性を使用してイベントの取得を行なっているので、リンクの場合もほとんど同じコードで実装することができます。
【サンプルコード】
<body>
<a id="link" href="https://www.google.co.jp/">サンプルリンク</a>
<script type="text/javascript">
const link = document.getElementById('link');
link.addEventListener('click', function () {
window.confirm("外部のサイトに移動します。よろしいですか？");
}, false);
</script>
</body>【実行結果】
条件分岐とconfirmを組み合わせて使用する
先ほども解説したように、confirmメソッドでは押下したボタンに応じて true か false のどちらかが返却されます。
そのため、メソッドの返り値を利用して、ユーザーの選択に合わせた条件分岐を行うことが可能となっています。
以下のサンプルコードを見てみましょう。
【サンプルコード】
<body>
<a id="link" href="https://www.google.co.jp/">サンプルリンク</a>
<script type="text/javascript">
const btn = document.getElementById('link');
btn.addEventListener('click', function (event) {
const result = window.confirm("外部のサイトに移動します。よろしいですか？");
if (result) {
console.log("外部サイトに移動しました")
} else {
event.preventDefault();
console.log("キャンセルされました")
}
}, false);
</script>
</body>先ほどのクリックイベントのサンプルコードを、一部変更して記述してみました。
リンクをクリックすると確認ダイアログが表示されるところまでは同じですが、このコードでは返り値の値によって処理内容を条件分けしています。
上記のサンプルコードでは、キャンセルボタンを押下した場合にページ移動が中断され、指定のリンク先が表示されないようになっています。
メソッドの返り値を条件として使用し、trueの場合にはコンソール表示のみ、falseの場合は移動処理を中断した後にコンソールにログを表示します。
このように、特定のイベントを検知してダイアログを表示した後、返り値の値によって処理を条件分けするのが主な confirmメソッドの使い方です。
ダイアログをカスタマイズするには？
confirmメソッドを使用すると、確認ダイアログを簡単に表示することができますが、代わりに内容をカスタマイズすることはできません。
そのため、独自の確認ダイアログを表示したい場合には、自前でダイアログボックスを作成する必要があります。
以下のサンプルコードを見てみましょう。
【サンプルコード（HTML/JavaScript）】
<body>
<button id="btn">サンプルボタン</button>
<dialog id="dialog">
<p>サンプルダイアログ</p>
<form method="dialog">
<button type="submit" value="ok">OK</button>
<button type="submit" value="cancel">Cancel</button>
</form>
</dialog>
<script type="text/javascript">
const btn = document.getElementById('btn');
const dialog = document.getElementById('dialog');
btn.addEventListener('click', function (event) {
dialog.showModal();
}, false);
dialog.addEventListener('close', function () {
if (dialog.returnValue == "ok") {
console.log("okボタンが押されました");
} else {
console.log("cancelボタンが押されました");
}
});
</script>
</body>【サンプルコード（CSS）】
#dialog {
width: 200px;
border: 1px solid #aaa;
box-shadow: 5px 5px 10px #888;
}【実行結果】
「（ダイアログ）」要素を使用すると、比較的簡単に独自のダイアログを作成することができます。
また、ダイアログの表示に showメソッドと showModalメソッドのどちらを使用するかによって、通常のダイアログとモーダルダイアログのどちらで表示するかも使い分けることが可能です。
dialog要素内で、form要素の method属性に dialog という値を指定して記述すると、submit時にリクエストを送信せずにダイアログが閉じられるようになる他、value属性に指定した値を 「returnValue」 で受け取れるようになります。
returnValueを使用すると、値の違いによってどのボタンが押下されたかを判断することができるようになるため、ボタンごとに addEventListenerメソッドで処理を分けて記述する必要が無くなります。
submitイベントの確認ダイアログを作る
続いて、フォームの入力内容を送信する際に、確認ダイアログを表示する例を見てみましょう。
表示方法はいくつかありますが、今回は form要素の onSubmit属性を使用する方法を紹介します。
以下のサンプルコードを見てみましょう。
【サンプルコード】
<body>
<form>
<p>
<label for="name">名前：</label>
<input id="name" type="text" name="name" size="25">
<input id="btn" name="btn" type="submit" value="送信">
</p>
</form>
<script type="text/javascript">
const btn = document.getElementById("btn");
btn.addEventListener('click', (event) => {
if (window.confirm("送信しますか？")) {
alert("送信しました");
} else {
event.preventDefault();
alert("キャンセルされました");
}
});
</script>
</body>
【実行結果】
submitボタンを押下すると、クリックイベントが発火したタイミングでif文の条件式のconfirmメソッドが評価され、ダイアログが表示されます。
このダイアログへの回答結果に応じて入力した情報が送信されるか、preventDefault()メソッドで送信がキャンセルされることになります。
上記のサンプルコードは簡単な処理内容のため、onSubmit属性を使用しても動作に問題はありませんが、複数のイベントリスナーを追加するなどの柔軟性の高さが求められる場合を考慮してaddEventListenerメソッドを使用する方が最適です。
その他のダイアログを表示するメソッド
JavaScriptには、confirmメソッドの他にも、様々な形式のダイアログを表示するメソッドが用意されています。
最後に、それらのメソッドについても紹介していきたいと思います。
alertメソッドで警告を表示する
1つ目は、alertメソッドです。
alertメソッドは、confirmメソッドのようにユーザーに選択を尋ねるためのダイアログではなく、主に警告アラートを表示するためのメソッドです。
使用する際は、以下のように記述します。
【基本構文】
window.alert("アラートメッセージ")confirmメソッドと同様に、「window.」 は省略可能です。
表示すると、以下のようなダイアログが表示されます。
promptメソッドでテキスト入力ダイアログを表示する
2つ目は、promptメソッドです。
promptメソッドを使用すると、文字列の入力をユーザーに促すダイアログを表示することができます。
使用する際の構文は以下の通りです。
【基本構文】
let 変数名 = prompt("メッセージ", "初期値");入力された内容は、上記のように変数に格納することができます。
以下のサンプルコードで実際の動きを見てみましょう。
【サンプルコード】
let inputName = prompt("名前を入力してください", "名前");
window.alert(`あなたの名前は${inputName}です`)【実行結果】
このように、promptメソッドを使用することで、ダイアログから入力された内容をプログラム内で活用することができます。
まとめ
いかがでしたか？
今回は、confirmメソッドを使用してダイアログを表示する方法について解説しました。
実際のWebサイトでもよく見かけるように、確認ダイアログが表示されるケースは多々あります。
最後に紹介した他のメソッドと同様に、実際の開発においても confirmメソッドを使う機会は多いと思いますので、使い方をしっかりと覚えてマスターするようにしておきましょう！
関連記事
- JavaScriptとは？初心者向けにできることや基本的な書き方を解説
- JavaScriptが初心者におススメな理由を現役プログラマーが解説
- 【JavaScript入門】簡単なサンプルコードを実行して習得
- 【JavaScript入門】getElementByIdの使い方をわかりやすく徹底解説
- 【JavaScript入門】forEachメソッドで配列の各要素に処理を繰り返す！使い方から注意点まで徹底解説
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
