UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#306 JavaScriptを使用した確認ポップアップの実装

記入日:2023-11-10 編集日:2023-11-10

JavaScriptを使用した確認ポップアップの実装に関して解説してみようと思います。

この記事を読むと(約5分)
JavaScriptを使用した確認ポップアップの実装に関してイメージできます。

JavaScriptを使用した確認ポップアップの実装

JavaScriptを使用した確認ポップアップは、ユーザーが重要なアクションを実行する前に確認が必要な場面での利用が考えられます。例えば、ユーザーがデータの削除や重要な変更を行うボタンをクリックする前に、確認のポップアップを表示することで、誤った操作を防ぐことができます。これにより、ユーザーエクスペリエンスを向上させつつ、重大なミスを回避する安全性を確保することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ポップアップの例</title>
</head>
<body>

<!-- ボタン -->
<button onclick="showConfirmation()">クリックして確認</button>

<!-- JavaScriptのコード -->
<script>
  function showConfirmation() {
    // ポップアップを表示
    const result = window.confirm("本当にこの操作を行いますか?");

    // 結果に応じた処理
    if (result) {
      // 「はい」が選択された場合の処理
      alert("処理が完了しました。");
    } else {
      // 「いいえ」が選択された場合の処理(ここではキャンセルとしています)
      alert("キャンセルしました。");
    }
  }
</script>

</body>
</html>

コード解説:

このJavaScriptコードは、ウェブページ上でボタンをクリックした際に確認用のポップアップを表示し、ユーザーが「はい」または「いいえ」を選択するとそれに応じた処理を行う単純な機能を実現しています。

1. HTML部分:

button要素は、ボタンを表示するためのもので、onclick属性を使用してボタンがクリックされたときに呼び出されるJavaScript関数 showConfirmation() を指定しています。

2. JavaScript部分:

showConfirmation() 関数は、window.confirm() メソッドを用いてブラウザ標準の確認ダイアログを表示します。 ダイアログには「本当にこの操作を行いますか?」というメッセージが表示され、ユーザーが「はい」を選択すると true が、そして「いいえ」を選択するかキャンセルすると false が返されます。

結果に応じて、条件分岐により処理が分かれます。

  • 「はい」が選択された場合、alert() を使用して処理が完了したことを通知します。
  • 「いいえ」またはキャンセルが選択された場合、同様に alert() を使用してキャンセルされたことを通知します。

このような確認ダイアログは、特にユーザーにとって取り消しやすい操作ではない場合に有用です。ただし、過度に使用するとユーザーにとって煩わしいと感じられることがあるため、適切なシナリオで使用することが重要です。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。