【JavaScript入門】confirmで「はい」「いいえ」のダイアログを出す

2024年3月29日

Kotono

みなさんこんにちは！Kotonoです。

今回は、windowオブジェクトのメソッドであるconfirmについて、ざっくりと解説していきたいと思います。confirmメソッドを使用すると、ウェブページに確認ダイアログを表示させる事が出来ます。

この記事では、

「confirm」メソッドとは？
confirmボタンを作ってみよう
変数を使ってみよう
改行について
ボタンやリンクを使おう
confirmの戻り値で条件分岐
「submit」の確認ダイアログを作ろう！
ダイアログをカスタマイズしよう！
alert(アラート)でダイアログを表示する方法

などについて解説していきます。

当ブログがオススメする
無料プログラミング学習サイト3選

スクロールできます

どのプログラミング学習サイトも無料プランを用意しているので、気になる学習サイトは試してみるのがオススメです！

	1位：侍テラコヤ	2位：Progate	3位：ドットインストール
サイト名
学べる内容	HTML/CSS、JavaScript、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、Webデザインなど	HTML/CSS、JavaScript、PHP、Ruby、Python、Java、Go、Git、SQL など	HTML/CSS、JavaScript、Ruby、Python、Java、C言語など
質問相談サポート
練習問題の数
特徴	現役エンジニアとのマンツーマンレッスン回答率100%のQ&A掲示板が使い放題　　実践的なスキルを身につけられる課題機能	環境構築をしなくても学べる　イラスト付きのスライド式教材　　　スマホアプリでも学べて手軽	レッスン動画でインプット可能 3分の簡単な動画で手軽に学べる有料プランなら質問ができる
詳細	公式サイト	公式サイト	公式サイト

「confirm」メソッドとは？

皆さんはconfirmメソッドを使った事がありますか？そもそも、confirmが何か知っていますか？

confirmとは、ウェブページ上に確認ダイアログボックスを表示させるのに活躍するメソッドなんです。確認ダイアログとは、ユーザーに確認を要求するために、一時的に表れる小さなウィンドウの事です。

confirmメソッドを使用することで、ユーザの選択によって処理を振り分ける事が出来るのでとても便利です。

confirmボタンを作ってみよう

では早速、confirmメソッドを使用し、確認ダイアログを表示させてみましょう。

以下のコードをご覧ください。

<html>
  <body>

  <script>
    window.confirm("これが確認ダイアログです。");
  </script>

  </body>
</html>

コードを実行すると、以下の画像のようなダイアログが表示されます。

2017-07-29

このサンプルコードは、単純な文字列をconfirmの引数に当てはめて、Webページで表示する基本例です。この場合、確認ダイアログを表示させただけなので、OKやキャンセルボタンをクリックしても何も起こりません。

confirmメソッドは、引数に設定した文字列をダイアログに表示する仕組みになっています。その為、今回は「これが確認ダイアログです。」という文字列がダイアログボックスに表示されたわけです。

変数を使ってみよう

「confirm()」の引数にはダイアログに表示したいテキスト文字を記述するのですが、「変数」を使うことも可能です。どちらかと言えば、実際のプログラミングでは変数を利用したテキスト文字を指定するのが一般的と言えるでしょう。

例えば、次のサンプル例を見てください！

var name = '太郎';

window.confirm( name + 'さん、この内容で宜しいですか？');

この例では、あらかじめ「name」という変数にユーザー名を格納していますね。

この変数をconfirmの引数に当てはめることで、柔軟なメッセージの表示に対応できるようになるわけです。

実行すると、以下のようなダイアログが表示されるのが分かります！
javascript-confirm-tutorial-re-1

このように、変数を利用することで状況に応じた情報をダイアログで表示できるようになるので便利です。

改行について

次に、ダイアログに表示するテキストの「改行」についてご紹介します。一般的にconfirmの引数に指定した文字列は「改行なし」で表示されます。

しかしながら、場合によっては改行を入れて段落を作りたいケースもあるでしょう。このような場合に役立つのが「エスケープシーケンス」を使う方法で、改行は「n」で表現することができます。

それでは、confirmのテキストに改行を挿入する例を見てみましょう！

window.confirm('項目1n項目2n項目3');

注目すべきは、confirmの引数に指定した文字列です。

「項目1n項目2・・・」のように、文字と文字の間に特殊文字の「n」を挿入することで改行を実現しています。

実際に実行すると、以下のように改行された文字が表示されます！
javascript-confirm-tutorial-re-2-2

エスケープシーケンスは文字列の制御を行うことができる特殊文字なのですが、基本的な使い方は次の記事で詳しく解説しています！

【JavaScript入門】エスケープ処理とescape関数の使い方まとめ

更新日：2024年3月1日

また、改行の使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】文字列を改行する方法(改行コード/「\n」/置換)

更新日：2024年3月29日

ボタンやリンクを使おう

これまでは、「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」と記述することでボタン要素を取得しています。このボタン要素を使ってイベント処理を実装することで、フォームの内容を送信する前にダイアログを表示できるわけです。
javascript-confirm-tutorial-re-4

あとは、「OK」「キャンセル」ボタンに応じた処理を実装すれば、ユーザーが使いやすいフォームを作れますね！

JavaScriptからフォームの内容を送信するプログラム事例については、次の記事で詳しく解説していますので合わせて参考にしてみてください！

JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう

更新日：2024年3月29日

ダイアログをカスタマイズしよう！

最後に、ダイアログのカスタマイズについてご紹介しておきます！

一般的に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」を調整することで、以下のようにダイアログっぽく見えるようになります！
javascript-confirm-tutorial-re-3

また、「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') });

まず最初に、ダイアログに設定したボタン要素をすべて取得しておきましょう。

これさえ出来れば、あとは各ボタンごとにイベント処理を書くだけで実現できます！

ダイアログの「表示 / 非表示」については、以下のようになります。