JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】

JavaScriptで【confirm】を使って確認ダイアログを表示させる方法をプログラミング初心者向けに実際にコードを書きながら解説した記事。confirmを使うと「OK」「キャンセル」のボタンをページ上に表示することができます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

井上 祐介

NEC・Microsoftの認定インストラクター。Z80アセンブラ・C++・C#・PHP・Javaなどの経験を経て業務で使用するプログラムの開発や新入社員プログラミング研修の講師を行った。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

目次

1時間でできる無料体験!

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

確認ダイアログとは

Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあります。

確認ダイアログ

これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertpromptなどと合わせ是非作り方を覚えましょう。

 

大石ゆかり

田島メンター!前に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」と表示されました。

true

 

ちなみに、[キャンセル]を押すと「false」と表示されます。

false

まとめ

JavaScript確認ダイアログを表示するにはconfirmメソッドを使います。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

確認ダイアログ内のテキストを改行する

確認ダイアログに表示するテキストを改行するにはエスケープシーケンス\n」を使います。

たとえば 「confirm(‘こんにちは、\n山田さん’);」とすると、「こんにちは、」で改行されて、その下の行に「山田さん」が続きます。

confirm内での改行

エスケープシーケンスでの改行は確認ダイアログを表示する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.

confirmで改行(未入力)
未入力で[確認]ボタンを押したとき

 

confirmで改行(入力した内容がある)
入力してから[確認]ボタンを押したとき

 

解説

<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」でメッセージを改行しています。
confirmで改行(未入力)

return」は、未入力の場合に呼び出されたイベントの処理を途中で終わらせるために入れています。

//入力内容の確認
confirm('以下の件名にしますか?\n' + text);

件名に入力されている文字があったときは、確認ダイアログに内容が表示されます。

「以下の件名にしますか?」の文字に続いてエスケープシーケンス\n」があるので改行された後に件名に入力された文字の内容 textをつなげて表示します。
confirmで改行(入力内容あり)

まとめ

JavaScriptの確認ダイアログで改行するにはエスケープシーケンス\n」を使います。

アラートを表示するalertでもエスケープシーケンス\n」で改行できます。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

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)」はisOktrueかどうか、つまり「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」はisOktrueではない、言い換えるとisOkfalseなら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でダイアログを作成する方法もあるから調べてみてね。

大石ゆかり

わかりました!ありがとうございます。

 

1時間でできる無料体験!

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する