Vue.js初心者がトースト通知を実装してみた〜alertとの違いと基本的な仕組み〜
はじめに
こんにちは。株式会社パレットリンクの@sanonichiです。
私は、Webアプリの開発を行う中で、登録や更新が完了したことをユーザーに伝える通知機能について学びました。
研修ではalert()を使用した通知を習いましたが、開発を進める中で、alert()とは異なる表示方法である「トースト通知」に興味を持ちました。
この記事では、トースト通知の基本的な仕組みや、実装を通して学んだことについて紹介します。
1. トースト通知とは
トースト通知とは、画面上にメッセージを一時的に表示し、一定時間が経過すると自動的に消える通知のことです。
Webアプリでは、以下のような場面で使用されます。
- 登録が完了したとき
- 更新が完了したとき
- 削除が完了したとき
- エラーが発生したとき
研修で習ったalert()とトースト通知には、以下のような違いがあります。
| 項目 | alert() | トースト通知 |
|---|---|---|
| 表示方法 | ダイアログとして表示 | 画面上にメッセージを表示 |
| 操作 | ユーザーが閉じるまで処理が止まる | 表示中も画面を操作できる |
| 非表示 | ユーザーが閉じる | 一定時間後に自動で消える |
| 使用例 | 重要な確認や警告 | 登録・更新完了などの通知 |
alert()はユーザーに確実に内容を確認してもらいたい場合に適しており、トースト通知は画面操作を妨げずに情報を伝えたい場合に適していると感じました。
2. 使用技術
今回の実装では、以下の技術を使用しました。
- Vue.js
- JavaScript
- CSS
3. 仕様
今回作成するトースト通知は、以下の仕様にしました。
| 項目 | 内容 |
|---|---|
| 通知の種類 | 成功・エラー |
| 成功時の色 | 緑 |
| エラー時の色 | 赤 |
| 表示時間 | 3秒 |
| 表示位置 | 画面右上 |
4. templateの実装
まずは、通知を表示するためのtemplateを作成します。
<template>
<div class="app">
<button @click="showToast('登録が完了しました', 'success')">
成功通知
</button>
<button @click="showToast('エラーが発生しました', 'error')">
エラー通知
</button>
<div
v-if="isToastVisible"
class="toast"
:class="toastType"
>
{{ toastMessage }}
</div>
</div>
</template>
@click
ボタンがクリックされたときに、showToast()を実行します。
@click="showToast('登録が完了しました', 'success')"
showToast()には、表示するメッセージと通知の種類を渡しています。
- '登録が完了しました'：表示するメッセージ
- 'success'：通知の種類
エラー通知の場合は、メッセージと種類を変更します。
@click="showToast('エラーが発生しました', 'error')"
このようにすることで、成功通知とエラー通知の両方で同じ関数を使用できます。
v-if
v-if="isToastVisible"
isToastVisibleの値によって、通知を表示するかどうかを切り替えています。
trueの場合は通知を表示し、falseの場合は通知を表示しません。
:class
:class="toastType"
toastTypeの値によって、通知に付けるクラスを切り替えています。
例えば、toastTypeがsuccessの場合は、以下のクラスが適用されます。
class="toast success"
errorの場合は、以下のクラスが適用されます。
class="toast error"
通知の種類に応じてCSSを切り替えることで、成功時とエラー時の色を変更できます。
{{ toastMessage }}
{{ toastMessage }}
toastMessageに設定されているメッセージを画面に表示します。
5. JavaScriptの実装
次に、通知を表示・非表示にする処理を作成します。
<script setup>
import { ref, onBeforeUnmount } from 'vue'
const isToastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')
let messageTimer = null
const showToast = (message, type) => {
toastMessage.value = message
toastType.value = type
isToastVisible.value = true
if (messageTimer) {
clearTimeout(messageTimer)
}
messageTimer = setTimeout(() => {
isToastVisible.value = false
}, 3000)
}
onBeforeUnmount(() => {
if (messageTimer) {
clearTimeout(messageTimer)
}
})
</script>
5-1. ref()を使用した値の管理
const isToastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')
この3つの変数を使って、通知の表示・メッセージ・種類を管理しています。
それぞれの役割は以下のとおりです。
| 変数 | 役割 |
|---|---|
| isToastVisible | 通知を表示するかどうか |
| toastMessage | 表示するメッセージ |
| toastType | 通知の種類 |
ref()は、値を変更したときに画面の表示も更新してくれる機能です。
今回の実装では、通知を表示するかどうかや、表示するメッセージを変更するために使用しました。
また、script setupの中で値を変更するときは、変数の後ろに.valueを付けます。
最初は.valueを付ける理由が分かりませんでしたが、Vue.jsではref()で作った値を変更するときに必要だと学びました。
5-2. 通知を表示する処理
const showToast = (message, type) => {
toastMessage.value = message
toastType.value = type
isToastVisible.value = true
showToast()では、引数として受け取ったメッセージと通知の種類を設定しています。
その後、isToastVisible.valueをtrueにすることで、通知を画面に表示します。
成功通知とエラー通知で処理を分けるのではなく、メッセージと種類を引数として渡すことで、1つの関数で対応できるようにしました。
5-3. setTimeout()で通知を自動的に非表示にする
messageTimer = setTimeout(() => {
isToastVisible.value = false
}, 3000)
setTimeout()は、指定した時間が経過したあとに処理を実行する機能です。
今回の実装では、3,000ミリ秒、つまり3秒後にisToastVisible.valueをfalseにしています。
isToastVisible.value = false
これにより、通知が表示されてから3秒後に自動的に非表示になります。
5-4. clearTimeout()で以前のタイマーを解除する
if (messageTimer) {
clearTimeout(messageTimer)
}
clearTimeout()は、設定したタイマーを解除するための機能です。
通知を短い間隔で何度も表示した場合、以前に設定したタイマーが残っていると、意図しないタイミングで通知が非表示になる可能性があります。
そこで、新しいタイマーを設定する前に、以前のタイマーを解除しています。
messageTimer = setTimeout(() => {
isToastVisible.value = false
}, 3000)
このように、以前のタイマーを解除してから新しいタイマーを設定することで、通知が表示される時間を調整しています。
5-5. onBeforeUnmount()でタイマーを解除する
onBeforeUnmount(() => {
if (messageTimer) {
clearTimeout(messageTimer)
}
})
onBeforeUnmount()は、コンポーネントが画面から削除される前に処理を実行するライフサイクルフックです。
今回の実装では、画面を離れる前に設定されているタイマーを解除しています。
6. CSSの実装
次に、トースト通知の表示位置や色を設定します。
.toast {
/* 通知の配置 */
position: fixed;
top: 20px;
right: 20px;
/* 通知の内側の余白 */
padding: 14px 20px;
/* 文字の色と大きさ */
color: white;
font-size: 14px;
}
/* 成功通知の背景色 */
.toast.success {
background-color: #4caf50;
}
/* エラー通知の背景色 */
.toast.error {
background-color: #d9534f;
}
通知の種類によって色を変えることで、ユーザーが通知の内容を視覚的に判断しやすくなるようにしています。
7. 動作確認
実装後、以下の項目を確認しました。
- 成功通知ボタンを押すと、成功メッセージが表示される
- エラー通知ボタンを押すと、エラーメッセージが表示される
- 通知が3秒後に自動的に非表示になる
- 通知を連続して表示した場合、以前のタイマーが解除される
それぞれの通知が指定した内容で表示され、一定時間が経過すると非表示になることを確認しました。
8. 実装してみて分かったこと
研修ではalert()を使用した通知を習っていましたが、最初はalert()とトースト通知の違いがよく分からず、通知はalert()を使用すればよいと思っていました。
しかし、実際にトースト通知を実装してみると、画面を操作しながらメッセージを確認できることや、一定時間が経過すると自動的に消えることなど、alert()とは異なる特徴があると分かりました。
また、実装中には、タイマー処理によって一度消えた通知が再び表示されることがあり、思ったとおりに動かない場面もありました。
そのときは原因が分からず、処理の内容を確認しながら修正しました。
この経験から、通知を表示する処理だけでなく、表示するタイミングや非表示にするタイミングについても考える必要があると学びました。
さらに、通知の色や表示位置など、CSSによるデザインも大切だと感じました。
通知の内容が分かりやすくても、画面上で見つけにくい位置に表示されていると、ユーザーが気づけない可能性があります。
そのため、機能の動作だけでなく、通知の見やすさや表示位置なども考慮する必要があると学びました。
alert()とトースト通知は、それぞれの特徴を理解したうえで用途に応じて使い分けることが大切だと感じました。
9. まとめ
今回は、Vue.js・JavaScript・CSSを使用して、簡単なトースト通知を実装しました。
実装中には思ったとおりに動かない場面もありましたが、処理の内容を確認しながら修正することで、通知の表示や非表示の仕組みについて学ぶことができました。
また、alert()との違いや、通知の表示タイミング、CSSによる見やすさなど、実装を通してさまざまなことを学びました。
今回の経験を活かし、今後もユーザー目線で使いやすい機能を考えながら実装できるように勉強していきたいです。
最後まで読んでいただき、ありがとうございました。
パレットリンクでは、日々のつながりや学びを大切にしながら、さまざまなお役立ち記事をお届けしています。よろしければ、ぜひ「Organization」のページもご覧ください。
また、私たちと一緒に未来をつくっていく仲間も募集中です。ご興味をお持ちの方は、ぜひお気軽にお問い合わせください。
皆さまと新しいご縁が生まれることを楽しみにしています。