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

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

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

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


ダイアログとは?

ダイアログの正式名称は、ダイアログボックス(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種類をメインに使っていくことになると思いますので、今回の記事でしっかりとマスターしておいてくださいね。

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

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