FirebaseのCloud Firestoreは、リアルタイム同期機能を持つNoSQLデータベースとして、チャットや通知、共同編集アプリなどに最適です。Vue.jsと組み合わせれば、双方向通信やリアルタイム反映を簡単に実装できます。この記事では、FirebaseとVue 3(Composition API)を使って、データベースと連動したリアルタイム表示機能の作り方を解説します。
Firebaseの事前準備
まずは以下の手順でFirebaseプロジェクトを準備します:
- Firebase Consoleでプロジェクトを作成
- Cloud Firestore を有効にする
- 「WebアプリにFirebaseを追加」で構成情報(APIキーなど)を取得
Firebase SDKのインストール
npm install firebase
Firebaseの初期化ファイルを作成
// firebase.js
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'your-app.firebaseapp.com',
projectId: 'your-app-id',
storageBucket: 'your-app.appspot.com',
messagingSenderId: 'XXXX',
appId: 'XXXX'
}
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
export { db }
リアルタイム表示用のVueコンポーネント
<template>
<div>
<h2>メッセージ一覧(リアルタイム)</h2>
<ul>
<li v-for="msg in messages" :key="msg.id">
{{ msg.user }}: {{ msg.text }}
</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { db } from '../firebase'
import { collection, onSnapshot, query, orderBy } from 'firebase/firestore'
const messages = ref([])
let unsubscribe = null
onMounted(() => {
const q = query(collection(db, 'messages'), orderBy('createdAt', 'desc'))
unsubscribe = onSnapshot(q, (snapshot) => {
messages.value = snapshot.docs.map(doc => ({
id: doc.id,
...doc.data()
}))
})
})
onUnmounted(() => {
if (unsubscribe) unsubscribe()
})
</script>
データ構造の例(Firestore)
messages
コレクションに以下のようなドキュメントを保存しておくと、リアルタイムで表示されます:
{
user: "山田太郎",
text: "こんにちは!",
createdAt: Timestamp
}
リアルタイム更新の活用例
- チャットアプリのメッセージ表示
- タスク一覧の同時編集
- 管理画面での通知・ログモニタリング
まとめ
Vue.jsとFirebaseを連携すれば、リアルタイムでデータが反映されるUIを簡単に構築できます。特にonSnapshot()
を使った購読処理は、ユーザーの操作に即座に反応するUIを実現する上で非常に強力です。シンプルなチャットから、ダッシュボード、共同作業アプリまで幅広く応用できます。