JavaScriptでToast通知を実装する方法

2020年4月16日
2026年8月14日
フロントエンド
集客記事

トースト通知（Toast通知）とは何か・どんな場面で使うか
JavaScriptとHTML/CSSだけで作る実装方法（コピペ可）
実践的なToastの活用例(フォーム送信、エラーメッセージなど)
おすすめのtoast用ライブラリの紹介

こんにちは、フロントエンドエンジニアのてりーです。
React + TypeScriptを5年以上使い続け、派遣 → フリーランス → メガベンチャーとキャリアを積んできました。
詳しいキャリアや学習ロードマップについてはこちらからどうぞ！

👉 本記事では、JavaScriptでのトースト通知（Toast通知）の実装方法を解説していきます！

ライブラリを入れれば数分で終わりますが、HTML・CSS・JavaScriptだけでも十分に作れます。自作の手順を一度通しておくと「この要件ならライブラリは要らない」という判断ができるようになるので、まず素の実装から見ていきます。

1 1. トースト通知（Toast通知）とは？
- 1.1 トースト通知の利点
- 1.2 他のUIパーツとの違い
2 2. 基本的なトースト通知の実装（HTML・CSS・JavaScript）
3 3. 実践的な活用例
4 おすすめのライブラリ
5 【現場の話】ライブラリを入れるかどうかで、レビューが割れた
6 まとめ

1. トースト通知（Toast通知）とは？

トースト通知（Toast通知 / toast message）とは、画面の端に一時的に小さなメッセージを表示して、数秒で自動的に消えるUIコンポーネントです。パンからトーストが飛び出す動きに似ていることからこの名前がついています。主に次のような場面で使用されます

ユーザー操作の成功・失敗の通知
短いメッセージやヒントの表示
状態変更のフィードバック

トースト通知の利点

非干渉性: 他のコンテンツを邪魔しない
直感的: ユーザーがすぐに理解できる
短時間表示: 画面を占有せず、自然に消える

他のUIパーツとの違い

モーダルダイアログ: 画面全体を覆うのに対し、Toastは画面の一部で完結
アラートボックス: ユーザーの操作が必要だが、Toastは自動的に消える
通知バッジ: 永続的な通知に使われるが、Toastは一時的

2. 基本的なトースト通知の実装（HTML・CSS・JavaScript）

さて、Toastの基本形を実装していきましょう！
HTML、CSS、JavaScriptがそれぞれ必要になります。

2.1. HTML

<div id="toast" class="toast">操作が完了しました</div>

2.2. CSS

.toast {   visibility: hidden;   min-width: 250px;   margin-left: -125px;   background-color: #333;   color: #fff;   text-align: center;   border-radius: 5px;   padding: 16px;   position: fixed;   z-index: 1;   left: 50%;   bottom: 30px;   font-size: 17px; }  .toast.show {   visibility: visible;   animation: fadein 0.5s, fadeout 0.5s 2.5s; }  @keyframes fadein {   from {bottom: 0; opacity: 0;}   to {bottom: 30px; opacity: 1;} }  @keyframes fadeout {   from {bottom: 30px; opacity: 1;}   to {bottom: 0; opacity: 0;} }

2.3. JavaScript

function showToast(message) {   const toast = document.getElementById('toast');   toast.textContent = message;   toast.className = 'toast show';   setTimeout(() => {     toast.className = toast.className.replace('show', '');   }, 3000); }  // 使用例 showToast('データが保存されました');

これで基本形は完成です！

2.4. 複数Toastの管理

複数のToastを管理する場合は、動的にDOM要素を追加・削除する方法が便利です。

function createToast(message) {   const toast = document.createElement('div');   toast.className = 'toast show';   toast.textContent = message;   document.body.appendChild(toast);    setTimeout(() => {     toast.remove();   }, 3000); }  // 使用例 createToast('新しい通知メッセージ');

👉 【独学・未経験向け】最短でフロントエンドエンジニアになる勉強法
👉 未経験でも安心！ReactとTypeScriptでエンジニアデビューを目指そう

3. 実践的な活用例

ここではToastが実際のWebサービスでどのように使われているか、活用例を見ていきましょう！

フォーム送信時の通知

フォームが送信された後に、トーストでユーザーにその旨を伝えます。

const form = document.querySelector('#myForm'); form.addEventListener('submit', (e) => {   e.preventDefault();   showToast('フォームが正常に送信されました！'); });

APIリクエスト後の通知

APIリクエストの結果をユーザーに通知します！
エラーの場合の通知は送っているサービスもちょこちょこありますね。

fetch('/api/data')   .then(response => {     if (response.ok) {       showToast('データが正常に取得されました');     } else {       showToast('エラーが発生しました');     }   });

エラーメッセージの表示

アプリケーション内のエラーハンドリングで、トースト表示も選択肢としてはアリだと思います！

try {
throw new Error('エラーが発生しました');
} catch (error) {
showToast(error.message);
}

ライブラリ名	特徴	カスタマイズ性	使用難易度
Toastify.js	軽量・シンプル	高い	低
SweetAlert2	美しいUI・多機能	中程度	中
Notyf	直感的・色分け簡単	高い	低

【現場の話】ライブラリを入れるかどうかで、レビューが割れた

実務でトースト通知が必要になったとき、だいたい最初に出る議論が「ライブラリを入れるか、自作するか」です。

入れれば早い。でも依存が1つ増えます。バージョンが上がってスタイルが変わることもあるし、デザイン要件に合わせて結局CSSを上書きする羽目になることもある。そうなると「ライブラリを入れた意味は何だったのか」という話になります。

僕が実際に使っている判断基準はシンプルで、「表示位置・アニメーション・同時表示数に独自要件があるか」です。

要件が素直（右上に出て数秒で消える程度）→ 自作。この記事のコードで十分足ります
確認ダイアログやモーダルも必要 → SweetAlert2のような多機能ライブラリ
とにかく速く出したい・デザインに強いこだわりがない → Toastify.js

依存を1つ増やすかどうかの判断が積み重なって、そのプロジェクトの寿命は決まります。「入れない」という選択肢を持っておくために、素の実装を一度自分で通しておく価値があります。

まとめ

Toast通知は短いフィードバックメッセージに最適
シンプルなJavaScriptとCSSで簡単に実装可能
使用シーンに応じてライブラリを活用する
高度なカスタマイズで柔軟に対応

エンジニア初学者向けのプログラミング教材も書いています！
200冊異常売れているので、良かったら手に取って下さい。