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

2020年4月16日
2025年1月5日
フロントエンド

フロントエンド

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('エラーが発生しました');
    }
  });<br />

エラーメッセージの表示

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

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

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

まとめ

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

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

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