【Vue.js】Firebaseと連携してリアルタイムデータを表示する方法

FirebaseのCloud Firestoreは、リアルタイム同期機能を持つNoSQLデータベースとして、チャットや通知、共同編集アプリなどに最適です。Vue.jsと組み合わせれば、双方向通信やリアルタイム反映を簡単に実装できます。この記事では、FirebaseとVue 3（Composition API）を使って、データベースと連動したリアルタイム表示機能の作り方を解説します。

Firebaseの事前準備

まずは以下の手順でFirebaseプロジェクトを準備します：

1. Firebase Consoleでプロジェクトを作成
2. Cloud Firestore を有効にする
3. 「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を実現する上で非常に強力です。シンプルなチャットから、ダッシュボード、共同作業アプリまで幅広く応用できます。