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

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

Toast通知の基本
JavaScriptでの実装方法
実践的なToastの活用例(フォーム送信、エラーメッセージなど)
おすすめのtoast用ライブラリの紹介

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

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

1 1. Toast通知とは？
- 1.1 Toast通知の利点
- 1.2 他のUIパーツとの違い
2 2. 基本的なToast通知の実装
3 3. 実践的な活用例
4 おすすめのライブラリ
5 まとめ
- 5.1 📚次に読むべきおすすめ記事

1. Toast通知とは？

Toast通知とは、画面上に一時的に小さな通知メッセージを表示するUIコンポーネントです。主に次のような場面で使用されます

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

Toast通知の利点

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

他のUIパーツとの違い

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

2. 基本的なToast通知の実装

さて、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	直感的・色分け簡単	高い	低

まとめ

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

📚次に読むべきおすすめ記事

さらにJavaScriptやReactの理解を深めたい方には、以下の記事がおすすめです！