Toastのライブラリが大げさすぎるので超シンプルな関数として実装。外部資源に一切依存しない。

サンプルソース

sample.html

<!DOCTYPE html>
<html>
<head>
    <title>Toastサンプル</title>
</head>
<body>
    <button onclick="showToast('Toastを表示')">Toastを表示</button>
    <script>
        function showToast(message) {
            let toast = document.createElement("div");
            toast.textContent = message;
            toast.style.backgroundColor = "#333";
            toast.style.color = "#fff";
            toast.style.borderRadius = "4px";
            toast.style.padding = "16px";
            toast.style.position = "fixed";
            toast.style.bottom = "16px";
            toast.style.right = "16px";
            toast.style.opacity = "0";
            toast.style.transition = "opacity 0.3s ease-in-out";
            toast.style.zIndex = "9999";
            document.body.appendChild(toast);

            setTimeout(function() {
                toast.style.opacity = "1";
                setTimeout(function() {
                    toast.style.opacity = "0";
                    setTimeout(function() {
                        document.body.removeChild(toast);
                    }, 300);
                }, 2000);
            }, 0);
        }
    </script>
</body>
</html>

実行結果

なぜ作ったか

ブックマークレットのようなUIを持たないロジックでもデバッグ用途で画面表示はしたい。

window.status が今どきは使えなくなってきたので、現在のステータスを表示するのに使っている。単にクリップボードにコピーするだけの機能でもユーザには何かしらのフィードバックがあった方がいいでしょう。

このてのサンプルの大半は、cssとhiddenなdivをHTMLに用意しているけど、それさえも依存する部品として外部リソースを汚しちゃうので、JSのfunctionだけコピーしても動くようにした。