JavascriptでYes/No質問を作成する

ウェブアプリケーションを構築する際、ユーザーインタラクションはシームレスな体験を作るための鍵です。開発者が直面する一般的なシナリオの一つは、ユーザーに対してYes/No質問をする必要があることです。しかし、Javascriptの標準関数confirm()は、機能的であるものの、OK/キャンセルボタンしか提供しません。では、ユーザーに明確なYes/Noオプションを提示するためのよりカスタマイズされたモーダルボックスを作成するにはどうすればよいのでしょうか？

組み込みモーダルボックスの制限

Javascriptにはいくつかの組み込みモーダルボックスがあります：alert、confirm、およびprompt。しかし、これらはいずれも明示的なYes/Noオプションを提供しません。これらのオプションの簡単な説明は以下の通りです。

• alert(): メッセージを表示し、OKボタンを提供します。通知に便利ですが、質問はしません。
• confirm(): Yes/Noの質問をし、Boolean（trueまたはfalse）を返します。しかし、Yes/NoボタンではなくOK/キャンセルボタンを使用しています。
• prompt(): ユーザー入力を許可しますが、Yes/Noインタラクションには適しておらず、OK/キャンセルボタンのみです。

これらの組み込み関数では特定のニーズを満たさない場合があるため、カスタムソリューションを模索することになります。

カスタムモーダルポップアップソリューション

Yes/No質問プロンプトを作成するために、多くの開発者はよりカスタマイズ可能なダイアログボックスを可能にするサードパーティライブラリを選択します。そのようなソリューションの一つがModalBoxです。実装方法の簡単な概要は以下の通りです：

ModalBoxの使用

1. インストール: まず、プロジェクトにModalBoxを含めます。このライブラリはGitHubこちらで見つけることができます。

2. HTML構造: モーダルボックスのHTMLフォーマットを設定します。以下はシンプルなモーダルの構造の例です：

   <div id="myModal" class="modal">
       <div class="modal-content">
           <span class="close">&times;</span>
           <p>進めてもよろしいですか?</p>
           <button id="yesButton">はい</button>
           <button id="noButton">いいえ</button>
       </div>
   </div>
   

3. モーダルのスタイリング: より良いユーザー体験のためにモーダルのスタイルを追加するのを忘れないでください。以下はシンプルなCSSの例です：

   .modal {
       display: none; 
       position: fixed; 
       z-index: 1; 
       left: 0;
       top: 0;
       width: 100%; 
       height: 100%;
       overflow: auto; 
       background-color: rgb(0,0,0);
       background-color: rgba(0,0,0,0.4);
   }
   
   .modal-content {
       background-color: #fefefe;
       margin: 15% auto; 
       padding: 20px;
       border: 1px solid #888;
       width: 80%;
   }
   

4. Javascript機能: 最後に、必要に応じてモーダルを開き、ボタンのクリックを処理するJavascriptを追加します：

   document.getElementById('myModal').style.display = "block"; // モーダルを開く
   
   document.getElementById("yesButton").onclick = function() {
       console.log("ユーザーがはいをクリックしました");
       // "はい"のアクションをここに追加
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementById("noButton").onclick = function() {
       console.log("ユーザーがいいえをクリックしました");
       // "いいえ"のアクションをここに追加
       document.getElementById('myModal').style.display = "none"; 
   }
   
   document.getElementsByClassName("close")[0].onclick = function() {
       document.getElementById('myModal').style.display = "none"; 
   }
   

結論

Javascriptでカスタマイズ可能なYes/No質問を作成することは、組み込み関数に依存せずにモーダルボックスライブラリを利用することで可能です。ModalBoxや他の代替手段を選択することにより、これらのカスタムソリューションは、ウェブアプリケーションでのインタラクションを向上させながら、より良いユーザー体験を提供します。

利用可能なライブラリを調査し、プロジェクトのスタイルと機能のニーズに最も適したものを選択すれば、すぐにユーザーと明確でアクセス可能なYes/No質問を交わすことができるようになります。