JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】
JavaScriptで【confirm】を使って確認ダイアログを表示させる方法をプログラミング初心者向けに実際にコードを書きながら解説した記事。confirmを使うと「OK」「キャンセル」のボタンをページ上に表示することができます。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について解説します。
また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
確認ダイアログとは
Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあるかと思います。
これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertやpromptなどと合わせ是非作り方を覚えましょう。
田島メンター！前にalert関数を使ってダイアログを表示させましたが、確認ダイアログを表示させる関数もあるんですか？
alert関数とほぼ同じなんだけど、確認ダイアログの場合、ユーザーが選択したボタンの情報を受け取れるんだよね。OKとかキャンセルとかのボタンの結果なんだけど。
じゃあ、結果によって表示や処理を変えるといったことが出来そうですね。
そうそう。それが違いかな。さっそく確認ダイアログを表示させてみよう！
confirmを使って確認ダイアログを表示させる
JavaScriptで確認ダイアログを表示させるときは、confirmを使って、単純に次のようなプログラムを書きます。
<script>
var 変数 = confirm('表示させたい文字列、値');
document.write(変数);
</script>
では、ためしに「入力に間違いはないですか？」という文字列を表示させてみましょう。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var answer = confirm('入力に間違いはないですか？');
document.write(answer);
</script>
</body>
</html>
PC画面上でほかのウィンドウよりも手前にダイアログボックスがポップアップ表示されます。
さらに、[OK]を押すとダイアログボックスが消え、ブラウザに「true」と表示されました。
ちなみに、[キャンセル]を押すと「false」と表示されます。
JavaScriptで確認ダイアログを表示させる方法は以上です。
他に、JavaScriptでalertを使ってアラートを表示させる方法もあるので合わせてご覧ください。
OKボタンを押したときはtrueが、キャンセルボタンを押したときはfalseが変数に入っていますね。
真偽値っていうんだけど、OKボタンが押されたらtrue(真)、キャンセルボタンが押されたらfalse(偽)って簡単に覚えてOKだよ。
サンプルでは、返ってくる値を表示させてるだけですけど、処理を変えたり出来そうですね。
そうだね。JavaScriptはPHPなどと連帯出来るから、データベースへの登録やダウンロードなど色々出来るよ。
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
