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

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

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

この記事では、

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

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

「confirm」メソッドとは?

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

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

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

confirmボタンを作ってみよう

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

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

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

2017-07-29

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

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

変数を使ってみよう

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

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

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

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

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

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

改行について

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

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

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

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

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

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

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

【JavaScript入門】エスケープ処理とescape関数の使い方まとめ
更新日 : 2019年4月24日

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

【JavaScript入門】文字列を改行する方法(改行コード/「\n」/置換)
更新日 : 2019年5月22日

ボタンやリンクを使おう

これまでは、「confirm()」メソッドを直接記述していました。

しかし、通常はボタンやリンクをクリックした際にダイアログを表示するのが一般的です。そこで、簡単なサンプル例と一緒にクリックして表示されるダイアログを見ていきましょう!

まずは、「ボタン」をクリックして表示するダイアログの例です。

この例では、単純に「button要素」を作って配置しているだけですね。もちろんフォーム要素の「inputタグ」を代用しても構いません。

あとは、buttonタグの「id属性」を使ってボタン要素を取得し、イベント処理を実装すれば完成です! これで、ボタンをクリックした瞬間にダイアログが表示されるというわけです。

実は、リンクをクリックする場合もほとんど同じ考え方で実現できます!

ポイントはボタンの時と同じように「id属性」を付与している点です。これにより、同じ方法でconfirmを使ったダイアログを表示することができますよね?

リンクの場合は、クリックすると画面遷移する前にダイアログが表示されるようにります。

confirmの戻り値で条件分岐

confirmメソッドは、「OK」「キャンセル」をクリックした時に、戻り値として「true / false」返します。

つまり、以下のような特性を持っています。

  • 「OK」ボタンをクリックした → trueが返される
  • 「キャンセル」ボタンをクリックした → falseが返される

そのため、ユーザの選択によってプログラム内で条件分岐をする事が出来るわけです。

次のサンプル例を見てください!

実行結果

この例では、confirmの戻り値を取得するために変数へ結果を代入しています。ダイアログを表示して「OK」ボタンをクリックしてみてください。実行結果を見ると分かりますが、コンソールログに「true」が表示されましたね?

もちろん「キャンセル」ボタンをクリックすると、「false」がコンソールログに表示されます。この特性を利用すれば、ダイアログを使った条件分岐は簡単に実現できます!

この例では、ボタン要素を配置してクリックイベントの処理を実装しています。

イベント処理の中でconfirmの戻り値を変数「result」に代入し、その値を「IF文」の条件式に流用しているわけです。

このように記述すれば、各ボタンがクリックされた時に応じた処理を記述できるので便利ですね。

「submit」の確認ダイアログを作ろう!

フォームなどでユーザが入力を完了し「submitボタン」をクリックした際に表示する確認ダイアログを作ってみましょう!

一般的に、送信ボタンをクリックすると即座にフォームの内容がサーバーへ送信されます。そのため、確認ダイアログを表示して本当に送信しても良いかをユーザーに尋ねる目的があります。

プログラムは意外に簡単で、これまで学んだ内容だけで実現できます!

サンプルを簡単にするために、名前を入力して送信するだけのフォームにしています。この「ボタン」をクリックすると、通常はフォームの内容がサーバーへ送信されます。

しかし、フォーム要素の「name属性」を利用して「document.myform.btn」と記述することでボタン要素を取得しています。このボタン要素を使ってイベント処理を実装することで、フォームの内容を送信する前にダイアログを表示できるわけです。
javascript-confirm-tutorial-re-4

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

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

JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう
更新日 : 2019年4月26日

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

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

一般的にconfirmを使ったダイアログは、開発者がカスタマイズできないように設計されています。そのため、ボタンの表記を変更したり追加するようなこともできません。

それでは、どのようにカスタマイズすれば良いのでしょうか?

最も単純で簡単な方法は、自分でダイアログを自作することです! 自作と言っても難しくはありません。

考え方としては「HTML / CSS」でダイアログを作成し、JavaScriptで「表示 / 非表示」を制御するだけです!

まずは、HTMLで簡単なダイアログの骨組みを作ります。

メッセージ表示用の「p要素」と、「はい / いいえ / キャンセル」のボタンが3つだけです。

これにより、自分好みのボタンや配置を構成することが出来るわけですね。

あとは、ダイアログを表示するためのボタンを配置しています。

このHTMLだけだと「ダイアログ」に見えないので、CSSを追加しておきます。

CSSについては、親要素であるdivタグのid属性を利用しています。

「width」でダイアログの幅を調整し「margin-top」で画面中央に配置するように設定しています。

「border」と「box-shadow」を調整することで、以下のようにダイアログっぽく見えるようになります!
javascript-confirm-tutorial-re-3

また、「display: none」に設定しておくことで最初は「非表示」の状態にしておくのがポイントでしょう。

そして、JavaScriptから「表示 / 非表示」を制御できるようにしておきます!

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

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

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

  • 「style.display = ‘block’」で表示する
  • 「style.display = ‘none’」で非表示にする

これでダイアログを制御し、ボタンごとの処理を実行すれば良いわけです。このような方法を知っておけば、自分好みのダイアログを作ってユーザーに選択をしてもらえるので非常に便利ですよね!

alert(アラート)でダイアログを表示する方法

ここでは、alert(アラート)でダイアログを表示する方法を解説します。

alertメソッドでダイアログを表示するには、引数に表示させたい文字列を指定します。

次のプログラムで確認してみましょう。

実行結果:
javascript-alert-tutorial-re1

このようにして、ダイアログにメッセージを表示することができました。

alertメソッドの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

【JavaScript入門】alert(アラート)メッセージはこれで完璧。使い方を総まとめ!
更新日 : 2019年5月10日

まとめ

今回は、confirmメソッドの基本について学びました。

confirmメソッドを使いこなせるようになると、ウェブページに変化を加えたりアラート表示とはまた違うメッセージ表示方法を使用する事ができるので便利です。

比較的使用頻度が高めのメソッドなので、覚えておいて決して損はありません。プログラムのクオリティ向上のためにも、ぜひconfirmメソッドをはじめ様々なテクニックを習得してみてくださいね。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説