JavaScriptのconfirmメソッドの使い方と実践例

Web開発•2025/2/14

はじめに

JavaScriptのconfirmメソッドは、ウェブアプリケーションでユーザーの確認を求める際に使用されます。例えば、「この操作を実行しますか？」といった確認を求めるポップアップが表示され、ユーザーが操作を決定することができます。この機能は、アプリケーションのインタラクティブ性を向上させ、ユーザーの意図を確認するために便利です。

この記事では、JavaScriptのconfirmメソッドについて、実際の使用例を交えながら初心者向けに解説します。特に、どのようにしてconfirmメソッドを効果的に使うか、またその戻り値を活用する方法について詳しく紹介します。

この記事を読むとわかること

JavaScriptのconfirmメソッドの基本的な使い方
ユーザーの入力をどのように処理するか
confirmメソッドの実践的な利用例
実際のプロジェクトでの活用シーン

confirmメソッドの基本的な使い方

confirmメソッドは、ユーザーに確認を求めるダイアログボックスを表示します。このメソッドは、ユーザーが「OK」または「キャンセル」を選択するまで待機し、その選択に応じた値を返します。

confirmの構文


let result = confirm("この操作を実行しますか？");

上記のコードでは、confirmメソッドがダイアログを表示し、ユーザーが選択を行うまで待機します。選択結果はtrueまたはfalseとして返されます。ユーザーが「OK」をクリックした場合はtrueが、ユーザーが「キャンセル」をクリックした場合はfalseが返されます。

戻り値の活用

confirmメソッドの戻り値を使うことで、ユーザーの選択に応じて処理を分岐させることができます。


let result = confirm("この操作を実行しますか？");

if (result) {
  alert("操作が実行されました。");
} else {
  alert("操作はキャンセルされました。");
}

このコードでは、ユーザーが「OK」を選択すると「操作が実行されました。」と表示され、「キャンセル」を選択すると「操作はキャンセルされました。」と表示されます。

confirmメソッドの使い所

confirmメソッドは、特定の操作に対してユーザーの確認を必要とする場合に使います。例えば、フォーム送信前の確認ダイアログ、削除操作の確認、ページ遷移前の確認などで活用できます。

削除確認ダイアログ

ユーザーがデータを削除する際に、誤って削除しないよう確認を促すダイアログを表示するシーンを考えてみましょう。


let isDelete = confirm("本当にこのアイテムを削除しますか？");

if (isDelete) {
  // 削除処理を実行
  alert("アイテムが削除されました。");
} else {
  alert("削除はキャンセルされました。");
}

このコードでは、削除確認のダイアログが表示され、「OK」を選択すると削除処理が実行されます。

フォーム送信前の確認

フォーム送信前に確認を求める場合にもconfirmを使います。例えば、フォームの内容が保存されていない状態でページを離れる際に確認ダイアログを表示することができます。


let isLeaving = confirm("未保存の内容があります。ページを離れますか？");

if (isLeaving) {
  window.location.href = "https://example.com";
} else {
  alert("ページ遷移がキャンセルされました。");
}

このコードでは、未保存の内容がある場合にページを離れる前に確認ダイアログが表示され、ユーザーが「OK」を選択すると遷移が実行されます。

実際のプロジェクトでの活用シーン

confirmメソッドは、ユーザーが重要な操作を行う前に確認を求めることで、誤操作を防ぐのに役立ちます。例えば、ショッピングサイトでの注文確認や、アプリケーションでの設定変更時の確認など、幅広いシーンで活用できます。

ユーザーの意図を確かめる

ウェブアプリケーションのインタラクティブ性を高めるために、ユーザーに対して重要なアクションを行う前に確認を求めることがよくあります。これにより、誤って操作を実行してしまうリスクを減らすことができます。

confirmメソッドはシンプルですが、ユーザー体験を向上させるために活用できる重要な機能です。

まとめ

今回はJavaScriptのconfirmメソッドについて、その使い方と実践的な利用例を紹介しました。confirmメソッドは、ユーザーに重要なアクションを確認させるために使うダイアログボックスを表示する機能で、ウェブアプリケーションのインタラクションをより直感的にします。

confirmメソッドは、ユーザーが選択した結果に応じて処理を分岐させることができる
実際のプロジェクトでは、削除確認やフォーム送信前の確認などに活用できる
シンプルで効果的な方法でユーザーの意図を確認できる

この知識を活かして、インタラクティブなウェブアプリケーションの開発に役立ててください。