JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】
JavaScriptで【confirm】を使って確認ダイアログを表示させる方法をプログラミング初心者向けに実際にコードを書きながら解説した記事。confirmを使うと「OK」「キャンセル」のボタンをページ上に表示することができます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
確認ダイアログとは
Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあります。
これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertやpromptなどと合わせ是非作り方を覚えましょう。
田島メンター！前にalertメソッドを使ってダイアログを表示させましたが、確認ダイアログを表示させる関数もあるんですか？
alertメソッドとほぼ同じなんだけど、確認ダイアログの場合、ユーザーが選択したボタンの情報を受け取れるんだよね。OKとかキャンセルとかのボタンの結果なんだけど。
じゃあ、結果によって表示や処理を変えるといったことができそうですね。
そうそう。それが違いかな。さっそく確認ダイアログを表示させてみよう！
confirmを使って確認ダイアログを表示させる
JavaScriptで確認ダイアログを表示させるときは、confirmメソッドを使います。
構文
OKボタンが押されたかの真偽値 = window.confirm('メッセージの文字列');引数に確認ダイアログに表示するメッセージを文字列で指定します。
戻り値は「OK」ボタンが押されたらtrue、「キャンセル」ボタンが押されたらfalseの値が真偽値で返されます。
※confirmメソッドはWindowオブジェクトのメソッドです。本当なら「window.confirm」と呼び出す必要がありますが、「window」は省略できるので「confirm」だけで呼び出せます。
※オブジェクトとは関連のある値を記憶する変数（プロパティ）や関数のように呼び出す処理（メソッド）をグループにしたものです。
真偽値とは？
JavaScriptの値の型のひとつに真偽値があります。
真偽値は真（true、トゥルー）と偽（false、フォールス）の2つの値をとります。
trueは条件が成立している、または有効なものを表しています。
falseは条件が成立していない、または無効なものを表しています。
if文の条件には真偽値が使われるので、「if(条件式)」だと条件式がtrueの場合に実行される処理を指定します。
※真偽値はシングルクォーテーションなどで囲みません。’true’だと文字列になります。
ソースコード
では、ためしに「入力に間違いはないですか？」という文字列を表示させてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
const answer = confirm('入力に間違いはないですか？');
document.write(answer);
</script>
</body>
</html>※「const」は再代入できない固定された値として使える変数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。
表示結果
PC画面上でほかのウィンドウよりも手前にダイアログボックスがポップアップ表示されます。
さらに、[OK]を押すとダイアログボックスが消え、ブラウザに「true」と表示されました。
ちなみに、[キャンセル]を押すと「false」と表示されます。
まとめ
JavaScriptで確認ダイアログを表示するにはconfirmメソッドを使います。
確認ダイアログ内のテキストを改行する
確認ダイアログに表示するテキストを改行するにはエスケープシーケンス「n」を使います。
たとえば 「confirm(‘こんにちは、n山田さん’);」とすると、「こんにちは、」で改行されて、その下の行に「山田さん」が続きます。
エスケープシーケンスでの改行は確認ダイアログを表示するconfirmメソッドはもちろん、アラートを表示するalertでも使えます。
エスケープシーケンスとは？
エスケープシーケンス（エスケープ文字）とは、改行のような特殊な文字を表現する方法です。
エスケープシーケンスは「」（バックスラッシュ。機種によっては¥記号で表示）と特定の文字を組み合わせて特殊な意味を持たせます。
以下の表はエスケープシーケンスの例です。
| エスケープシーケンス | 意味 |
|---|---|
| n | 改行 |
| ‘ | シングルクォーテーション |
| “ | ダブルクォーテーション |
| t | タブ |
| バックスラッシュ（または¥）を表示 |
※Windowsなど機種によってはエスケープシーケンスを「」ではなく「¥」記号で表現します。バックスラッシュの入力方法について詳しくは解説記事にある「バックスラッシュの入力方法について」の見出しをご覧ください。
ソースコード
[件名]ボックスが未入力の状態で[確認]ボタンを押すと「以下の項目が未入力です。」で改行されて「件名：」がアラートで表示されます。
[件名]ボックスに文字が入力されている状態で[確認]ボタンを押すと「以下の件名にしますか？」で改行されて入力された内容が表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>confirmを使った改行 | JavaScript</title>
</head>
<body>
<form name="contact_form">
<p>
<label for="subject">件名：</label><input type="text" id="subject" name="subject">
</p>
<button type="button" name="check">確認</button>
</form>
<script>
//[確認]ボタンの取得
const button = contact_form.check;
//[確認]ボタンが押されたときの処理を定義
button.addEventListener('click', () => {
//input要素（name属性がsubject）の入力内容を取得
const text = contact_form.subject.value;
//未入力のとき
if(text == ""){
alert('以下の項目が未入力です。n件名：');
return;
}
//入力内容の確認
confirm('以下の件名にしますか？n' + text);
});
</script>
</body>
</html>表示結果
See the Pen
js_confirm_newline by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
<form name="contact_form">フォーム要素にname属性名「contact_form」を設定しています。
※一般的に実際に送信するform要素にはaction属性などを指定する必要がありますが、今回はJavaScriptのコードの説明のため指定を省略しています。
※実際にフォームを送信しないのならformタグで囲う必要はありませんが、formタグにname属性を設定しておくとJavaScriptでフォーム内の要素を取得しやすくなります。
//[確認]ボタンの取得
const button = contact_form.check;フォーム要素（name属性がcontact_form）からボタン要素（name属性がcheck）を取得しています。
フォーム要素にname属性を設定していると、フォーム内の要素を「フォームのname属性名.要素のname属性名」で取得できます。
ボタン要素を取得しているのは、次の行のコードでaddEventListenerメソッドが呼び出されている要素を短いコードで書くためです。
//[確認]ボタンが押されたときの処理を定義
button.addEventListener('click', () => {[確認]ボタン（button）が押されたときの処理をaddEventListenerメソッドに書きます。
※変数 buttonを使わずに「contact_form.check.addEventListener」と書いても同じです。
※「() =>」はアロー関数で従来の関数を簡潔に書く方法です。「() => {」は「function() {」と同じ意味です。
※addEventListenerメソッドは、マウスの操作や文字の入力のようなイベントの処理を登録するメソッドです。addEventListenerやイベントについて詳しくは解説記事「JavaScriptのaddEventListenerの使い方を現役エンジニアが解説【初心者向け】」をご覧ください。
//input要素（name属性がsubject）の入力内容を取得
const text = contact_form.subject.value;件名の入力ボックスにある文字の内容を textに取得します。
フォーム要素（name属性がcontact_form）のinput要素（name属性がsubject）が持つ入力内容（value）を取得しています。
//未入力のとき
if(text == ""){
alert('以下の項目が未入力です。n件名：');
return;
}textの値が空、つまり件名が未入力のときにアラートでメッセージを表示します。
「以下の項目が未入力です。」と「件名：」の間にあるエスケープシーケンス「n」でメッセージを改行しています。
「return」は、未入力の場合に呼び出されたイベントの処理を途中で終わらせるために入れています。
//入力内容の確認
confirm('以下の件名にしますか？n' + text);件名に入力されている文字があったときは、確認ダイアログに内容が表示されます。
「以下の件名にしますか？」の文字に続いてエスケープシーケンス「n」があるので改行された後に件名に入力された文字の内容 textをつなげて表示します。
まとめ
JavaScriptの確認ダイアログで改行するにはエスケープシーケンス「n」を使います。
アラートを表示するalertでもエスケープシーケンス「n」で改行できます。
confirmの確認ダイアログ活用例
確認ダイアログの活用例として、[OK]か[キャンセル]ボタンを押した結果の真偽値で処理を分ける方法を解説します。
また、リンクをクリックしたときに確認ダイアログを表示し、ページの遷移をキャンセルする方法も取り上げます。
ソースコード
[クリア]ボタンで[件名]ボックスの文字を、確認してからクリアできます。
リンクをクリックして確認ダイアログで[キャンセル]を押すとページが遷移しません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認ダイアログの活用 | JavaScript</title>
</head>
<body>
<form name="contact_form">
<p>
<label for="subject">件名：</label><input type="text" id="subject" name="subject" value="昨日の依頼について">
</p>
<button type="button" name="clear">クリア</button>
</form>
<p>
<a id="tec_link" href="https://techacademy.jp/" target="_blank">テックアカデミーのサイトを開く</a>
</p>
<script>
//*************************************************
// 文字をクリアする確認
//*************************************************
//クリアボタンの取得
const button = contact_form.clear;
//クリアボタンが押されたときの処理を定義
button.addEventListener('click', () => {
//input要素（name属性がsubject）の入力内容を取得
const text = contact_form.subject.value;
//入力内容の確認
const isOk = confirm('以下の件名を削除しますか？n' + text);
//[OK]が押されたか
if(isOk){
//件名の入力内容をクリア
contact_form.subject.value ="";
}
});
//*************************************************
// リンクを開く確認
//*************************************************
//リンクがあるアンカーの取得
const anchor = document.getElementById('tec_link');
//リンクがクリックされたときの処理
anchor.addEventListener('click', (event) => {
//確認ダイアログの表示
const isOk = confirm('以下のサイトを表示しますか？n' + event.target.href);
//[キャンセル]が押されたか
if(!isOk){
//デフォルトの動作（リンクの遷移）を停止
event.preventDefault();
}
});
</script>
</body>
</html>表示結果
See the Pen
js_confirm by mentor-inoue-y (@mentor-inoue-y)
on CodePen.
解説
//入力内容の確認
const isOk = confirm('以下の件名を削除しますか？n' + text);confirmメソッドで確認のダイアログを表示し、「OK」か「キャンセル」のどちらが押されたかの結果を isOkに取得します。
結果のisOkには、「OK」ならtrue、「キャンセル」ならfalseが代入されます。
//[OK]が押されたか
if(isOk){確認ダイアログで「OK」ボタンが押されたかどうかを判定します。
「if(isOk)」はisOkがtrueかどうか、つまり「OK」ボタンが押されたかを判定しています。
//リンクがクリックされたときの処理
anchor.addEventListener('click', (event) => {id属性が「tec_link」の要素「テックアカデミーのサイトを開く」の文字がクリックされたときの処理を指定します。
「(event) => {」は「function(event) {」と同じ意味で、リンクがクリックされた処理をする関数の第一引数でイベントオブジェクト eventを受け取ります。
イベントオブジェクトのeventには処理が呼ばれるきっかけとなったイベントに関する情報が入っており、クリックされた要素が「event.target」で取得できます。
※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。addEventListenerメソッドについて詳しくは解説記事「JavaScriptのaddEventListenerの使い方を現役エンジニアが解説【初心者向け】」をご覧ください。
※イベントオブジェクトはaddEventListenerメソッドに指定した関数の第一引数で受け取ります。イベントオブジェクトを受け取る名前は自由に付けられます。イベントオブジェクトを受け取るので一般的に「event」や「e」と命名されることがよくあります。
//確認ダイアログの表示
const isOk = confirm('以下のサイトを表示しますか？n' + event.target.href);リンクをクリックしたときに確認ダイアログを、クリックされたリンク先と一緒に表示します。
「event.target.href」でリンクが設定されている要素のhref属性の値、文字列「https://techacademy.jp/」を取得します。
//[キャンセル]が押されたか
if(!isOk){確認ダイアログで「キャンセル」が押されたかを判定します。
[キャンセル]ボタンが押されたらisOkにはfalseが代入されているので「!isOk」の式はtrueになります。
「!isOk」の「!」（エクスクラメーション）は否定の演算子で真偽値の結果を逆にします。
つまり「!isOk」はisOkがtrueではない、言い換えるとisOkがfalseならif文の中の処理が実行されます。
//デフォルトの動作（リンクの遷移）を停止
event.preventDefault();イベントオブジェクトのeventからpreventDefaultメソッドを呼び出し、イベントを発生させた要素が行う既定の動作を実行しないようにします。
既定の動作とは、JavaScriptでプログラムしていなくてもユーザーの操作だけで行われる動作のことです。
たとえば、チェックボックスをクリックしたらチェックをつけたり、リンクをクリックしたらページが遷移したり、送信ボタンでフォームを送信する動作などのことです。
今回はリンクをクリックして処理が呼び出されているので、「リンクをクリックしたらリンク先にページが遷移する」という既定の動作をpreventDefaultメソッドでキャンセルできます。
まとめ
confirmメソッドで押されたボタンによって処理を分岐させるには、取得した真偽値の値をif文で判定させます。
confirmメソッドで取得した値は「OK」ボタンならtrue、「キャンセル」ボタンならfalseになります。
キャンセルボタンが押されたことをif文の式で判定するには、否定の演算子「!」でfalseかどうかがわかります。
クリックされた要素が行う既定の動作を停止させるときは、イベントオブジェクトのpreventDefaultメソッドを使います。
まとめ
JavaScriptで確認ダイアログを表示するにはconfirmメソッドを呼び出します。
confirmメソッドの戻り値は「OK」ボタンならtrue、「キャンセル」ボタンならfalseになりif文で処理を分岐できます。
確認ダイアログのメッセージを改行するには、改行させたい位置にエスケープシーケンス「n」を入れます。
確認ダイアログで「キャンセル」が押されたときにリンクやフォームの送信などの既定の動作を停止するにはイベントオブジェクトのpreventDefaultメソッドを使います。
JavaScriptで確認ダイアログを表示させる方法は以上です。
他に、alertメソッドについて解説した記事「JavaScriptでalertを使ってアラートを表示させる方法」やHTMLでダイアログを作成する方法についての記事「JavaScriptのconfirmメソッドで作成するダイアログの位置を変更する方法を現役エンジニアが解説【初心者向け】」もあるので合わせてご覧ください。
confirmメソッドを使えば、「OK」ボタンが押されたかで処理を分岐できるんですね！
そうだね。
確認ダイアログで押されたボタンによって処理を分岐できるのがconfirmメソッドの便利なところだよ。
JavaScriptで確認させたいときはconfirmメソッドですね。
そうだね。
他にもHTMLでダイアログを作成する方法もあるから調べてみてね。
わかりました！ありがとうございます。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
