JavaScriptでダイアログを表示する方法3選

JavaScriptを使ってブラウザ上にダイアログを表示する方法をご存知ですか?

Web開発を進めていると、ユーザーに対して注意喚起を促したり、ユーザーに選択肢を与えたりなど、ユーザーに対して何かしらのメッセージを表示したい場面が随所で現れます。

JavaScriptを使うと簡単にダイアログを表示することができますが、その一方で、様々な種類のダイアログが存在するため、見た目やその後の処理の実装方法の違いを理解することが重要です。

そこで、今回はJavaScriptを用いたダイアログ表示を実現できるメソッドを3つ紹介します。それぞれ実装方法や動作結果にどのような違いが見られるか、サンプルコードと実際の表示結果のスクリーンショットを併せて掲載したので、開発にお役立てください。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

ダイアログとは?

ダイアログの正式名称は、ダイアログボックス(dialog box)です。ディスプレイ上に表示される小さな四角形の領域を指し、特定のブラウザに関わらず、ひいてはwindowsやmacOSなど、GUIが実装されているコンピュータで見られます。

ダイアログは、コンピュータを操作しているユーザーに対して、何かしらのメッセージを出力したり、選択肢を示したりするために表示されることが多いです。

ダイアログ上には、メッセージ以外にボタンが設置されており、ユーザーはメッセージを解釈した後に、ボタンをどちらかクリックするなどの操作を実施できます。また、ユーザーの入力操作を受け付けるためのダイアログも存在します。

Google chromeやFirefoxなどのブラウザでも、ダイアログを出力する機能が搭載されており、JavaScriptで処理を記述することで実装可能です。ただし、複数の方法が存在するため、それぞれの違いを把握し、場合によって使い分けることが重要です。

ダイアログを出力する3つの方法

ブラウザ上にダイアログを出力するには、以下の3つの方法があります。いずれの方法も、専用のメソッドを呼び出すのが基礎となります。

メソッド名特徴
alert()メソッド ・メッセージ表示
・「OK」ボタンのみ表示
confirm()メソッド ・メッセージ表示
・「OK」「キャンセル」ボタン表示
prompt()メソッド ・メッセージ表示
・テキストボックス表示
・「OK」「キャンセル」ボタン表示

alert()メソッドで警告

1つ目は、alert()メソッドを用いる方法です。alert()メソッドの用法は単純で、ダイアログ上に設置したい文言を引数として設定するだけで簡単に実装できます。

試しに「ダイアログ上にメッセージが表示されましたか?」という文言を表示する処理を、以下のサンプルコードで確認してみましょう。

<script>
alert('ダイアログ上にメッセージが表示されましたか?');
</script>

上記サンプルコードを適当な名前を付けてHTMLファイルとして保存し、実際にブラウザで開いてみましょう。以下のスクリーンショットのような画面が表示されたでしょうか。この小さなボックスがダイアログです。

領域の大きさやボタンの色・配置場所は、ブラウザごとに細かい違いはあるものの、alert()メソッドの引数に設定した文字列が、ダイアログ上に設置されていることが分かります。ダイアログ右下に設置されている「OK」ボタンをクリックすると、ダイアログは閉じます。

alert()メソッドは、ダイアログ表示した後は「OK」ボタンを押すだけでユーザーに選択肢を与えません。したがって、もっぱら警告注意喚起のメッセージをユーザーに示すために利用されることが多いです。

例えば、未入力項目が存在した場合に、入力されてない旨のメッセージをダイアログを利用して表示したいとします。以下のサンプルコードを保存してブラウザで開いてください。

<html>
  <body>
    <label name="sample_text">サンプル項目</label>
    <input type="text" name="sample_text" id="sample_text" />
    <input type="submit" value="OK" onclick="check();"/>
    <p id="ok_message" style="display: none;">
      サンプル項目が入力されたので、メッセージを表示します。
    </p>
  </body>

  <script>
    // 入力済みか否かを判定する関数
    function check() {
      // id名を指定しテキストボックスを取得
      let text = document.getElementById('sample_text');

      // valueにテキストボックスの中身が格納されている
      if (text.value === '') {
        alert('サンプル項目が入力されていません。');
      } else {
        // 入力されていたら非表示にしていた行を表示する
        let p = document.getElementById('ok_message');
        p.style.display = "";
      }
    }
  </script>
</html>

テキストボックスと「OK」ボタンを配置しているページを実装しています。

テキストボックスは必須項目であり、「OK」ボタンを押したときに何も入力されていない場合は、未入力であることを知らせるメッセージを出力する仕様です。

テキストボックスが入力されているか否かを判定する処理はscript要素内にJavaScriptで実装しています。「OK」ボタンがクリックされたタイミングで、onclick属性に書かれたイベントが発生するようにしています。

ポイントは、check関数の4行目にあるif文です。ここでは、テキストボックスの入力値が格納されているvalueプロパティが、空文字であるかを条件式を使って評価しています。もし空文字であれば、入力されてないということなので、警告メッセージをalert()メソッドで表示します。

このように、ウェブページを閲覧したり入力フォームを操作しているユーザーに対し、警告や注意喚起などを促したい場合は、alert()メソッドを使うのがおすすめです。

confirm()メソッドで確認

2つ目は、confirm()メソッドを利用する方法。alert()メソッドと同じように、ダイアログに載せたいメッセージをダブルクオート(シングルクオート)で引数指定するだけで利用できます。Google chromeで開くと、以下のスクリーンショットにある通りに表示されます。

上記の表示結果を見ても分かるように、alert()メソッドとの違いは、ダイアログ右下に配置されているボタンの個数です。confirm()メソッドを採用した場合、「OK」ボタンに加えて「キャンセル」ボタンが、2つ並んで配置されます。

ボタンが2つに増えたことにより、ユーザーはどちらのボタンをクリックするかを選択する余地が生まれ、その後の処理を枝分かれさせることが可能です。

confirm()メソッドを用いた処理の枝分かれについて、以下のサンプルコードを使って説明していきましょう。

<html>
  <body onload="confirm_check();">
    <p id="ok_message" style="display: none;">
      「OK」ボタンをクリックしたときのメッセージです。
    </p>
    <p id="cancel_message" style="display: none;">
      「キャンセル」ボタンを押したときのメッセージだよ。
    </p> 
  </body>

  <script>
    // ページ読み込み時に実行される関数
    function confirm_check() {
      // 戻り値はブール値
      // [OK]クリック:true
      // [キャンセル]クリック:false
      let result = confirm('「OK」「キャンセル」のいずれかをクリックしてください。');
      let id_name = "";

      // ブール値で条件分岐
      if (result) {
        id_name = "ok_message";
      } else {
        id_name = "cancel_message";
      }
      
      // p要素の表示書影
      let p = document.getElementById(id_name);
      p.style.display = "";
    }
  </script>
</html>

上記のサンプルコードを保存後ブラウザで開くと、2行目のbody要素のonload属性に設定したイベントが実行され、confirm()メソッドによる確認メッセージが表示されます。「OK」ボタンまたは「キャンセル」ボタンを押すかによって、ブラウザ上に表示される文章が異なってきます。

分岐条件を評価するポイントは、confirm()メソッドの戻り値です。

confirm()メソッドは、「OK」ボタンがクリックされたときはtrue、「キャンセル」ボタンクリックであればfalseが返されます。戻り値をif文や三項演算子などで判定することで、confirm()メソッドを用いた条件分岐処理が実装できます。

prompt()メソッドで入力受付

3つ目は、prompt()メソッドを使う方法です。

prompt()メソッドは、alert()メソッドやconfirm()メソッドと違い、メッセージやボタン以外にテキストボックスをダイアログ上に設置されます。

ユーザーは、ダイアログ上に設置されているテキストボックスに値を入力することができ、ボタンクリック後の処理にテキストボックスの入力値を活用できます。簡単な使い方を、以下のサンプルコードで説明しましょう。

<html>
  <script>
  prompt('下にテキストボックスが表示されています。', ‘初期値’);
  </script>
</html>

上記サンプルコードをブラウザで開くと、以下のスクリーンショットにあるダイアログが表示されます。

prompt()メソッドの引数は2つ存在します。1つ目は、テキストボックスの上部に表示するメッセージ、2つ目は、ダイアログ表示時にテキストボックスに入力する初期値です。

続いて、ダイアログ上で入力した値をダイアログを閉じた後の処理で活用する方法について解説します。

例として、ダイアログ上でパスワードを入力し、パスワードの成否によってブラウザ上に表示される文字を変える処理を実装したいとしましょう。以下のサンプルコードをブラウザで開きながら、実装方法を確認します。

<html>
  <body onload="password_check();">
    <p id="correct" style="display: none;">
      問題ありません。
    </p>
    <p id="incorrect" style="display: none;">
      パスワードが間違っています。
    </p> 
    <p id="cancel" style="display: none;">
      入力がキャンセルされました。
    </p>
  </body>

  <script>
    let password = "sample1234"; // 整合するパスワード

    // パスワード入力・チェック関数
    function password_check() {
      // 戻り値は以下の通り
      // [OK]クリック:テキストボックスの入力値
      // [キャンセル]クリック:null
      let input_val = prompt('パスワードを入力してください。');
      let id_name = "";

      // 戻り値を用いて条件分岐
      if (input_val === null){
        id_name = "cancel";
      } else if (input_val === password) {
        id_name = "correct";
      } else {
        id_name = "incorrect";
      }
      
      // p要素の表示処理
      let p = document.getElementById(id_name);
      p.style.display = "";
    }
  </script>
</html>

ブラウザで開くと、早速以下のようなダイアログが表示されます。

今回は「sample1234」が正解のパスワードなので、同様のパスワードを入力して「OK」ボタンをクリックすると、問題ない旨の文章が表示されます。また、間違ったパスワードを入力したり、「キャンセル」ボタンをクリックした場合は、それぞれ別の文章が表示されます。

prompt()メソッドは、「OK」ボタンをクリックした時点で、テキストボックスに入力された値がそのまま戻り値として返されます。テキストボックスが未入力であれば、戻り値は空文字ということです。一方、「キャンセル」ボタンをクリックした場合は、nullが返されます。

prompt()メソッドの戻り値の違いを理解すれば、ダイアログ上のテキストボックスの入力値、クリックするボタンの違いで条件分岐処理を実装することが可能です。

今回の例で取り上げたパスワードの入力など、ユーザーに対して何らかの情報を受け取る場面では、prompt()メソッドを採用するのがおすすめです。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptを使ってダイアログを表示する方法について解説してきましたがいかがでしたか?

実装自体はとても簡単ですが、その用途によって正しく使い分けないと思った通りには動いてくれません。

実際の開発では、今回ご紹介した3種類をメインに使っていくことになると思いますので、今回の記事でしっかりとマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。