ひな姉と学ぶJS!ユーザーに「はい/いいえ」を尋ねるconfirmの使い方

webサイトで何らかのアクションを起こした時に、「OK」「キャンセル」というダイアログが表示されることがあることに気づいたことはあるでしょうか？
今回はダイアログを表示するconfirmメソッドについて、ひな姉が解説してくれるそうです。

天野 陽菜（あまの ひな）：おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
後輩ちゃん：JavaScriptを学び始めた初心者。

ユーザーの意思を確認したい時、どうする？

ひな姉、こんにちは！この前 alert を使って、ユーザーにメッセージを見せる方法を学びました。一方的に伝えるだけじゃなくて、ユーザーに何かを確認してから次の処理に進む、みたいなことはできるんでしょうか？

こんにちはー！おお、すごく良い質問だね！まさに、Webアプリケーションを作る上でとっても大事な考え方だよ。例えば、『本当に削除しますか？』とか『この記事を投稿してよろしいですか？』みたいに、ユーザーの意思を確認したい場面ってたくさんあるんだ。

そうそう、そういうのです！そういう時って、どうやって作るんですか？

ふふふ、そんな時にピッタリなのが、今日紹介する confirm（コンファーム）っていう命令なんだ。その名の通り、ユーザーに『確認』を求めることができるよ！

confirm って何？ まずは使ってみよう！

使い方は alert と似ていて、とってもシンプル。こんな風に書くだけだよ。

confirm("この処理を実行しますか？");

これを実行するとどうなるんですか？

ブラウザで実行すると、メッセージと一緒に『OK』と『キャンセル』っていう二つのボタンがついたダイアログが表示されるんだ。alert は『OK』ボタンしかなかったけど、confirm はユーザーがどちらかを選べるのが大きな違いだね。

なるほど！表示するだけなら alert とほぼ同じですね！でも、ユーザーがどっちのボタンを押したか、プログラムはどうやって知るんですか？

鋭い！そこが confirm の一番大事なポイントなんだよ！

confirmでどうやってユーザーの入力を判断するの？

confirm は、ユーザーが押したボタンに応じて、結果を返してくれるんだ。この『結果』のことを戻り値（もどりち）って言うんだけど、confirm の戻り値は真偽値、つまり true か false のどちらかなんだ。
・ユーザーが「OK」を押すと → true が返ってくる
・ユーザーが「キャンセル」を押すと → false が返ってくる
「この戻り値を受け取るために、こんな風に変数に入れるのが一般的なんだよ。」

const result = confirm("ログインしますか?");
console.log(result);

へえー！じゃあ、このコードを実行して『OK』を押したら、コンソールに true って表示されるんですね！『キャンセル』なら false に…。

その通り！ゲームで『セーブしますか？』って聞かれて『はい』か『いいえ』を選ぶのに似てるよね。選んだ選択肢によって、その後のゲームの動きが変わるよね？JavaScriptでも、この true と false を使って処理を分けることができるんだよ。

解説
confirmの返り値として、trueかfalseが返ってきます。
trueかfalseかをbool値(ブール値)と呼びます。
bool値はif文などと組み合わせて使いやすいことが特徴で、条件分岐を行うきっかけとして使われます。
具体的なif文との組み合わせは、次の項目でひな姉が解説してくれるそうです。

confirm の真骨頂！ if 文との組み合わせ

処理を分ける…というと、もしかして if 文ですか？

大正解！confirm の戻り値は、if 文の条件式にピッタリなんだ。これぞ confirm の真骨頂だよ！

if (confirm("背景色を黄色に変更しますか？")){
//「OK」が押された時
console.log("背景色を変更します。");
document.body.style.background = "yellow";//背景色を黄色に変える
}else{
//「キャンセル」が押された時
console.log("背景色の変更はキャンセルされました。");
}

わー、すごい！ユーザーの選択次第で、プログラムの動きを完全にコントロールできるんですね！これは面白いです！

でしょ？ユーザーとの『対話』が生まれる感じがして、一気にプログラミングが楽しくなるポイントだと思うな。

解説
コード中のdocument.body.style.background = “yellow”は、JavascriptのDOM操作と呼ばれるものです。
英語が並ぶと難しそうですが、「HTMLやCSSの要素をJavascriptで書き換えることができるよ」と理解してもらえれば十分です。

実践！「本当に削除しますか？」機能を作ってみる

じゃあ、よくある『削除ボタン』の機能をイメージしてみようか。大事なデータを間違って消しちゃわないように、確認を挟むのは定番だよね。

const postTitle = "私のブログ記事";

function daletePost(){
//削除の確認を行う
if(confirm(`${postTitle}を本当に削除しますか?`));{
//OKが押されたら削除処理を実行する
console.log(`${postTitle}を削除しました`);
//削除処理が入る
}else{
//キャンセルが押されたら何もしない
console.log("削除をキャンセルしました。");
}
}
//関数の実行
deletePost();

テンプレートリテラルを使うと、確認メッセージも分かりやすくなりますね！これで、うっかり大事なデータを消しちゃう事故が防げるんですね。

ひな姉と学ぶJS!もう「+」の嵐にサヨナラ?テンプレートリテラル入門

2025年6月4日

解説
if(confirm(`${postTitle}を本当に削除しますか?`))とありますが、OKが押されたらconfirmがTrueの値を返します。
ifの()内がtrueになった場合、「私のブログ記事を削除しました。」とコンソールに表示され、削除処理が実行されます。
elseはif内の値が成り立たなかった時に実行される処理です。
その場合、「削除をキャンセルしました」とコンソールに表示されます。

使う時のちょっとした心遣い

confirm はとっても便利なんだけど、一つだけ心に留めておいてほしいことがあるんだ。それは、このダイアログが表示されている間、ユーザーはページの他の部分を一切操作できなくなっちゃうってこと。

確かに、OKかキャンセルを押すまで、他のことができませんね。

そう。だから、あまりに頻繁に confirm を出すと、ユーザーにとっては少しストレスに感じちゃうこともあるんだ。本当に大事な確認の場面で、効果的に使うのがポイントだよ。最近のウェブサイトでは、ページのデザインに合わせたおしゃれな確認画面も多いけど、その基本的な考え方はこの confirm と同じなんだ。

まとめ：ユーザーとの対話を楽しもう！

今日のポイントをまとめると…

• confirm() は、ユーザーに『OK』『キャンセル』の二択を求めるダイアログを表示するよ。
• 『OK』なら true、『キャンセル』なら false という戻り値が返ってくるのが最大の特徴！
• この戻り値を if 文の条件に使うことで、ユーザーの選択に応じた処理の分岐ができる。
• 重要な操作の前の最終確認に使うと効果的！

どうだったかな？ confirm、使ってみたくなった？

はい！ユーザーの操作で結果が変わるなんて、すごく面白いです。自分の作ったプログラムが、ちゃんと対話してる感じがします。ありがとうございました！

よかった！その感覚、すごく大事だよ。ぜひ色々な場面で confirm を試してみて、ユーザーとの対話を楽しんでみてね。それじゃ、また次回！