【Vue.js】トースト通知を作る方法|イベントで表示・非表示を制御する簡易実装

【Vue.js】トースト通知を作る方法|イベントで表示・非表示を制御する簡易実装 Vue.js

Vue.jsを使えば、ユーザーに一時的なメッセージを表示する「トースト通知」も簡単に実装できます。本記事では、ボタンクリックなどのイベントを契機に表示し、数秒後に自動で消えるシンプルなトースト通知機能の作り方を紹介します。

トースト通知とは?

トースト通知(toast)は、画面の端などに一時的に表示される軽量なメッセージUIです。保存成功やエラー通知、コピー完了など、ページ遷移を伴わずにフィードバックを伝える際によく使われます。

Vue.jsでの簡易トースト通知の実装例

以下は、Vue 3(Composition API)を使ってトースト通知を実装した例です。

<template>
  <div class="app">
    <button @click="showToast('保存しました!')">通知を表示</button>

    <div v-if="isVisible" class="toast">
      {{ message }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);
const message = ref('');

const showToast = (msg) => {
  message.value = msg;
  isVisible.value = true;
  setTimeout(() => {
    isVisible.value = false;
  }, 3000); // 3秒で自動非表示
};
</script>

<style scoped>
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
</style>

実装のポイント

  • 状態管理: isVisibleで表示・非表示を制御
  • メッセージ内容: messageに表示内容を格納
  • setTimeout: 一定時間後に自動的に非表示にする

この実装では、トースト表示後にsetTimeoutで3秒後にisVisibleをfalseに戻すことで、通知が自然に消えるようになっています。

コンポーネント化のヒント

このトースト通知を再利用しやすくするには、以下のようにコンポーネント化するのがおすすめです。

  • <Toast>コンポーネントを作成してスロットで内容を差し替え
  • 複数のトーストを同時に表示できるよう配列で管理
  • グローバルイベント(emitterなど)で他のコンポーネントから呼び出し

まとめ

Vue.jsでは、トースト通知のようなUIフィードバックもシンプルな状態管理とイベント処理で実装できます。まずは今回紹介したような基本構成を理解し、プロジェクトに合わせて表示位置や種類を増やすなどのカスタマイズを加えてみましょう。