alertでOKボタンを押した後に処理を続行する方法10例

●alertの基本的な使い方
- ○サンプルコード1：シンプルなalertの使用例
- ○alertの特徴と注意点
●OKボタン押下後の処理続行方法
●alertとconfirmの違い
●alertのカスタマイズ
●alertを使う際の考慮点
まとめ

●alertの基本的な使い方

JavaScriptのalertは、ウェブページ上でメッセージボックスを表示するための機能で、ユーザーに重要な情報を伝えたり、確認を求めたりする際に使用されます。

しかし、alertを表示した後の処理の続行方法について悩むエンジニアも多いのではないでしょうか。

本記事では、alertでOKボタンを押した後に処理を続行する方法について、初心者エンジニアの方にもわかりやすく解説していきます。

alertを使用するには、まず構文を理解することが重要です。

alertの構文は次のようになります。

alert("表示したいメッセージ");

引数には、ダブルクォーテーションまたはシングルクォーテーションで囲んだ文字列を指定します。

この文字列がメッセージボックスに表示されます。

○サンプルコード1：シンプルなalertの使用例

では、実際にalertを使ってみましょう。

次のサンプルコードでは、ボタンをクリックするとalertが表示されます。

<button onclick="showAlert()">alertを表示</button>

<script>
function showAlert() {
  alert("こんにちは！これはalertのメッセージです。");
}
</script>

ボタンをクリックすると、「こんにちは！これはalertのメッセージです。」というメッセージが表示されます。

OKボタンを押すと、alertが閉じられます。

このように、alertを使うことで、ユーザーに対して情報を提供することができます。

ただし、alertにはいくつかの特徴と注意点があります。

○alertの特徴と注意点

alertはモーダルウィンドウであるため、OKボタンを押すまで他の操作ができません。
alertはブラウザの機能であるため、スタイルを自由にカスタマイズすることはできません。
alertを多用すると、ユーザーの操作性が損なわれる可能性があります。
alertは、デバッグ用途で使用することが推奨されています。

alertの特徴を理解した上で、適切に使用することが大切です。

次は、alertでOKボタンを押した後に処理を続行する方法について見ていきましょう。

●OKボタン押下後の処理続行方法

alertを表示した後に処理を続行するには、いくつかの方法があります。

ここでは、代表的な4つの方法をサンプルコードとともに解説していきます。

○サンプルコード2：OKボタン押下後に関数を実行

OKボタンを押した後に特定の関数を実行したい場合は、alert()の直後にその関数を呼び出すことで実現できます。

function showAlertAndExecute() {
  alert("アラートが表示されました。OKを押すと、次の処理が実行されます。");
  executeNextProcess();
}

function executeNextProcess() {
  console.log("OKボタンが押されました。次の処理を実行します。");
  // 次の処理を記述する
}

実行結果

showAlertAndExecute()関数が呼び出されると、アラートが表示されます。
OKボタンを押すと、executeNextProcess()関数が呼び出されます。
コンソールに”OKボタンが押されました。次の処理を実行します。”と表示されます。

このように、alert()の直後に関数を呼び出すことで、OKボタン押下後の処理を続行することができます。

○サンプルコード3：OKボタン押下後に変数の値を更新

OKボタンを押した後に変数の値を更新したい場合は、alert()の前後で変数の値を設定することで実現できます。

let isConfirmed = false;

function showAlertAndUpdateVariable() {
  alert("アラートが表示されました。OKを押すと、変数の値が更新されます。");
  isConfirmed = true;
  console.log("変数の値が更新されました。isConfirmed:", isConfirmed);
}

実行結果

showAlertAndUpdateVariable()関数が呼び出されると、アラートが表示されます。
OKボタンを押すと、isConfirmed変数がtrueに更新されます。
コンソールに”変数の値が更新されました。isConfirmed: true”と表示されます。

このように、alert()の前後で変数の値を設定することで、OKボタン押下後の処理として変数の値を更新することができます。

○サンプルコード4：OKボタン押下後に条件分岐

OKボタンを押した後に条件分岐を行いたい場合は、alert()の直後にif文やswitch文を使用することで実現できます。

function showAlertAndConditionalBranch(num) {
  alert("アラートが表示されました。OKを押すと、条件分岐が実行されます。");

  if (num % 2 === 0) {
    console.log(num + "は偶数です。");
  } else {
    console.log(num + "は奇数です。");
  }
}

showAlertAndConditionalBranch(4);
showAlertAndConditionalBranch(7);

実行結果

showAlertAndConditionalBranch(4)が呼び出されると、アラートが表示されます。
OKボタンを押すと、条件分岐が実行されます。
コンソールに”4は偶数です。”と表示されます。
showAlertAndConditionalBranch(7)が呼び出されると、アラートが表示されます。
OKボタンを押すと、条件分岐が実行されます。
コンソールに”7は奇数です。”と表示されます。

このように、alert()の直後にif文やswitch文を使用することで、OKボタン押下後の処理として条件分岐を行うことができます。

○サンプルコード5：OKボタン押下後にフォームを送信

OKボタンを押した後にフォームを送信したい場合は、alert()の直後にform.submit()を呼び出すことで実現できます。

<form id="myForm" action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required>
  <button type="button" onclick="showAlertAndSubmitForm()">送信</button>
</form>

<script>
function showAlertAndSubmitForm() {
  alert("アラートが表示されました。OKを押すと、フォームが送信されます。");
  document.getElementById("myForm").submit();
}
</script>

実行結果

送信ボタンをクリックすると、showAlertAndSubmitForm()関数が呼び出されます。
アラートが表示されます。
OKボタンを押すと、form.submit()が実行されます。
フォームがサーバーに送信されます。

このように、alert()の直後にform.submit()を呼び出すことで、OKボタン押下後の処理としてフォームを送信することができます。

●alertとconfirmの違い

alertと似たような機能にconfirmがあります。

どちらもメッセージボックスを表示する点では共通していますが、confirmはOKボタンとキャンセルボタンの2つのボタンを持ち、ユーザーの選択に応じて真偽値を返すという点で異なります。

○confirmの構文とサンプルコード

confirmの構文は次のようになります。

const result = confirm("メッセージ");

confirmを呼び出すと、メッセージボックスが表示され、ユーザーはOKかキャンセルを選択することができます。

OKを選択した場合はtrueが、キャンセルを選択した場合はfalseが返されます。

では、実際にconfirmを使ってみましょう。

function deleteItem() {
  const result = confirm("本当に削除しますか？");

  if (result) {
    console.log("アイテムが削除されました。");
  } else {
    console.log("削除がキャンセルされました。");
  }
}

上記のコードでは、deleteItem関数が呼び出されると、confirmでユーザーに削除の確認を求めます。

OKを選択するとresultにtrueが代入され、アイテムが削除されたメッセージがコンソールに表示されます。

キャンセルを選択するとresultにfalseが代入され、削除がキャンセルされたメッセージが表示されます。

○サンプルコード6：confirmを使った処理の分岐

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

先ほどの削除の例を少し発展させてみましょう。

function deleteItem(itemId) {
  const result = confirm("本当に削除しますか？");

  if (result) {
    // サーバーにアイテム削除のリクエストを送信
    fetch(`/api/items/${itemId}`, { method: "DELETE" })
      .then(response => {
        if (response.ok) {
          console.log("アイテムが削除されました。");
          // 削除後の処理（例：一覧の更新）
          refreshItemList();
        } else {
          console.error("アイテムの削除に失敗しました。");
        }
      })
      .catch(error => {
        console.error("通信エラーが発生しました。", error);
      });
  } else {
    console.log("削除がキャンセルされました。");
  }
}

この例では、confirmでOKが選択された場合、サーバーにアイテム削除のリクエストを送信し、削除が成功すればメッセージを表示して一覧を更新します。

キャンセルが選択された場合は、削除がキャンセルされたメッセージを表示するだけで終了します。

このように、confirmを使うことで、ユーザーの意思を確認しながら処理を分岐させることができます。

○alertとconfirmの使い分け

alertとconfirmはどちらもメッセージボックスを表示する点では似ていますが、用途が異なります。

alertは、ユーザーに情報を提供するための一方通行のコミュニケーションに適しています。

エラーメッセージや重要な通知など、ユーザーに伝えたい情報を表示する際に使用します。

一方、confirmは、ユーザーに選択を求めるための双方向のコミュニケーションに適しています。

削除の確認や設定の変更など、ユーザーの意思を確認しながら処理を進める際に使用します。

アラートの使い方を理解し、alertとconfirmの違いを踏まえた上で、適切に使い分けることが大切です。

ユーザーにとってわかりやすく、ストレスのないコミュニケーションを心がけましょう。

●alertのカスタマイズ

ここまでは、alertの基本的な使い方やOKボタン押下後の処理続行方法について解説してきました。

しかし、alertはブラウザが提供する機能であるため、デフォルトのスタイルやメッセージの表示方法に制限があります。

そこで、alertをカスタマイズする方法について見ていきましょう。

○サンプルコード7：alertのメッセージを改行

alertのメッセージを改行したい場合、メッセージ内で改行文字を使用することができます。

改行文字には、”\n”を使用します。

function showAlertWithLineBreak() {
  alert("こんにちは！\nこれはalertのメッセージです。\n改行されていますね。");
}

alertのメッセージボックスが表示され、メッセージ内で改行されていることが確認できます。

このように、”\n”を使用することで、alertのメッセージを改行することができます。

メッセージの可読性を高めたい場合や、複数の情報を表示したい場合に便利です。

○サンプルコード8：alertのメッセージにHTMLタグを使用

alertのメッセージにHTMLタグを使用したい場合、メッセージ内でHTMLタグを記述することができます。

ただし、実際にHTMLタグが適用されるわけではなく、あくまでもテキストとして表示されます。

function showAlertWithHTMLTags() {
  alert("<strong>重要なお知らせ</strong>\n<ul>\n  <li>項目1</li>\n  <li>項目2</li>\n</ul>");
}

alertのメッセージボックスが表示され、メッセージ内でHTMLタグが記述されていることが確認できます。

ただし、HTMLタグが実際に適用されているわけではなく、テキストとして表示されています。

このように、alertのメッセージ内でHTMLタグを使用することができますが、あくまでもテキストとして表示されるため、視覚的な装飾は期待できません。

メッセージの構造を示すための目印として使用するのは有効かもしれません。

○サンプルコード9：CSSでalertのスタイルを変更

alertはブラウザが提供する機能であるため、CSSを使ってスタイルを直接変更することはできません。

ただし、alertの代替となるカスタムダイアログを作成し、CSSでスタイルを適用することは可能です。

<div id="customAlert" class="alert">
  <div class="alert-message"></div>
  <button class="alert-button">OK</button>
</div>

<script>
function showCustomAlert(message) {
  const alertElement = document.getElementById("customAlert");
  const messageElement = alertElement.querySelector(".alert-message");
  const buttonElement = alertElement.querySelector(".alert-button");

  messageElement.textContent = message;
  alertElement.style.display = "block";

  buttonElement.addEventListener("click", function() {
    alertElement.style.display = "none";
  });
}
</script>

<style>
.alert {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.alert-message {
  margin-bottom: 10px;
}

.alert-button {
  padding: 5px 10px;
}
</style>

showCustomAlert関数を呼び出すと、カスタムダイアログが表示されます。

CSSを使ってスタイルを適用しているため、背景色や枠線、影などを自由にカスタマイズできます。

OKボタンをクリックすると、カスタムダイアログが閉じられます。

●alertを使う際の考慮点

これまでalertの基本的な使い方やカスタマイズ方法について学んできましたが、実際にalertを使う際には、いくつかの考慮点があります。

ここでは、アクセシビリティやユーザビリティの観点から、alertを使う上で気をつけるべきポイントについて見ていきましょう。

○アクセシビリティへの配慮

アクセシビリティとは、障がいのある人も含めて、すべての人がWebサイトやアプリケーションを使いやすくするための取り組みのことです。

alertを使う際には、以下のようなアクセシビリティへの配慮が必要です。

□音声読み上げソフトとの互換性を確保する

alertのメッセージは、音声読み上げソフトでも正しく読み上げられるようにする必要があります。

メッセージ内で改行を使う場合は、適切な位置で改行することで、読み上げのしやすさを向上させましょう。

□キーボードでの操作に対応する

マウスを使えない人もいるため、キーボードでもalertを閉じられるようにしておくことが大切です。

具体的には、EnterキーやEscapeキーでalertを閉じる機能を実装するとよいでしょう。

□色のコントラストに気をつける

視覚障がいのある人にも見やすいように、alertのメッセージと背景色のコントラストを十分に確保しましょう。

カスタムダイアログを作成する場合は特に注意が必要です。

○ユーザビリティの向上

ユーザビリティとは、ユーザーが目的を達成するまでの効率性や満足度のことを指します。

alertを使う際には、次のようなユーザビリティの向上につながる工夫が大切です。

□メッセージは簡潔で明確にする

alertのメッセージは、ユーザーにとってわかりやすく、必要な情報だけを簡潔に伝えるようにしましょう。

長すぎるメッセージは避け、重要な情報を先に伝えるようにします。

□アクションを明示する

alertでユーザーに求めるアクションを明確に示すことで、ユーザーの迷いを減らすことができます。

例えば、「OKボタンを押すと、データが削除されます」のように、ユーザーが取るべきアクションとその結果を明示的に伝えましょう。

□代替手段を提供する

状況によっては、alertよりも適切な方法があるかもしれません。

例えば、ユーザーに確認を求める場合は、confirmを使うことを検討してみてください。

柔軟に代替手段を提供することで、ユーザーの選択肢を増やすことができます。

○サンプルコード10：代替手段の提供

先ほどの例では、削除の確認にconfirmを使いましたが、より柔軟な確認ダイアログを作成することもできます。

次のサンプルコードでは、カスタム確認ダイアログを作成し、ユーザーに削除の確認を求めています。

<div id="confirmDialog" class="dialog">
  <div class="dialog-message"></div>
  <div class="dialog-actions">
    <button class="dialog-button" data-action="cancel">キャンセル</button>
    <button class="dialog-button" data-action="ok">OK</button>
  </div>
</div>

<script>
function confirmDelete(itemId) {
  return new Promise((resolve) => {
    const dialogElement = document.getElementById("confirmDialog");
    const messageElement = dialogElement.querySelector(".dialog-message");
    const buttonElements = dialogElement.querySelectorAll(".dialog-button");

    messageElement.textContent = "本当に削除しますか？";
    dialogElement.style.display = "block";

    buttonElements.forEach((buttonElement) => {
      buttonElement.addEventListener("click", function() {
        dialogElement.style.display = "none";
        resolve(buttonElement.dataset.action === "ok");
      });
    });
  });
}

async function deleteItem(itemId) {
  const confirmed = await confirmDelete(itemId);

  if (confirmed) {
    // サーバーにアイテム削除のリクエストを送信
    // ...
    console.log("アイテムが削除されました。");
  } else {
    console.log("削除がキャンセルされました。");
  }
}
</script>

deleteItem関数を呼び出すと、カスタム確認ダイアログが表示されます。

ユーザーは「キャンセル」または「OK」を選択することができます。

「OK」を選択すると、アイテムの削除が実行されます。

「キャンセル」を選択すると、削除がキャンセルされます。