JavaScriptで一定時間後に自動で閉じるalertの実装方法

2025年2月11日2025年2月15日

はじめに
なぜalertを自動で閉じる必要があるのか？
- 1. ユーザーエクスペリエンスの向上
- 2. 繰り返し表示されるアラートの管理
JavaScriptでalertを自動で閉じる方法
まとめ
- おすすめの実装方法

はじめに

JavaScriptのalert関数は、簡単にダイアログを表示できる便利な機能ですが、通常はユーザーが手動で閉じる必要があります。しかし、特定の状況では一定時間後に自動で閉じたい場合もあります。本記事では、JavaScriptを使って自動で閉じるalertを実装する方法を詳しく解説します。

なぜalertを自動で閉じる必要があるのか？

1. ユーザーエクスペリエンスの向上

alertは強制的に表示されるため、長時間残っているとユーザーの操作を妨げる可能性があります。一定時間後に自動で閉じることで、よりスムーズなUXを提供できます。

2. 繰り返し表示されるアラートの管理

動的にデータを取得するWebアプリケーションでは、頻繁にアラートが表示されることがあります。自動で閉じる機能を実装すれば、ユーザーが手動で閉じる手間を減らせます。

JavaScriptでalertを自動で閉じる方法

JavaScriptのalert関数は、標準の方法では時間制限を設定できません。そのため、setTimeoutを活用して擬似的に自動で閉じる方法を実装します。

方法1：alertの代わりにカスタムダイアログを作成

JavaScriptのalertはブラウザのネイティブ機能なので、自動で閉じることができません。そのため、div要素を使ってカスタムのダイアログを作成し、一定時間後に非表示にする方法が有効です。

実装例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自動で閉じるアラート</title>
    <style>
        .custom-alert {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #ffcc00;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="showCustomAlert()">アラートを表示</button>
    <div id="customAlert" class="custom-alert">自動で閉じるアラート</div>

    <script>
        function showCustomAlert() {
            let alertBox = document.getElementById("customAlert");
            alertBox.style.display = "block";
            setTimeout(() => {
                alertBox.style.display = "none";
            }, 3000); // 3秒後に自動で閉じる
        }
    </script>
</body>
</html>

方法2：Bootstrapのアラートを活用

Bootstrapを利用すると、スタイリッシュなアラートを手軽に実装できます。BootstrapのalertクラスとJavaScriptを組み合わせることで、一定時間後に自動で閉じる機能を追加できます。

実装例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrapアラート</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="alert alert-warning fade show" role="alert" id="bootstrapAlert">
        これは自動で閉じるBootstrapアラートです。
    </div>

    <script>
        setTimeout(() => {
            let alert = document.getElementById("bootstrapAlert");
            alert.classList.remove("show");
            alert.classList.add("fade");
        }, 3000); // 3秒後に自動で閉じる
    </script>
</body>
</html>

まとめ

JavaScriptのalertは標準では自動で閉じることができませんが、カスタムのダイアログを作成することで同様の機能を実現できます。