Vue.jsとFirebaseでリアルタイムデータアプリを構築する

作成日 2025.03.04
Vue.js
Vue.js

Vue.jsとFirebaseを組み合わせることで、リアルタイムデータを扱う強力なアプリケーションを構築できます。FirebaseのデータベースとVue.jsのリアクティブなUI機能を活用し、動的で即時性のあるWebアプリケーションを作成します。

1. Firebaseとは
2. プロジェクトのセットアップ
3. Firebaseプロジェクトの作成
4. Firebase設定をVueプロジェクトに追加
5. データベースへの接続
6. 認証機能の追加
7. データのリアルタイム同期
8. Firestoreとの統合
9. 認証済みユーザーごとのデータ管理
10. デプロイとホスティング
11. エラーハンドリング
12. アプリの最適化
13. Firebaseルール設定
14. まとめ

Firebaseとは

FirebaseはGoogleが提供するバックエンドサービスで、リアルタイムデータベース、認証、ホスティングなどの機能を提供します。

プロジェクトのセットアップ

Vue CLIを使ってVue.jsプロジェクトを作成し、Firebase SDKをインストールします。

npm install -g @vue/cli
vue create vue-firebase-app
npm install firebase

Firebaseプロジェクトの作成

Firebaseコンソールで新しいプロジェクトを作成し、Webアプリを追加してFirebase設定情報を取得します。

Firebase設定をVueプロジェクトに追加

Firebaseの設定情報をVueプロジェクトに追加します。

// src/firebase.js
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  databaseURL: 'your-database-url',
  projectId: 'your-project-id',
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

export { database };

データベースへの接続

Firebaseのリアルタイムデータベースに接続し、データを読み書きします。

// src/components/RealtimeData.vue
<template>
  <div>
    <h3>リアルタイムデータ</h3>
    <input v-model="newData" placeholder="データを入力" />
    <button @click="addData">追加</button>
    <ul>
      <li v-for="item in dataList" :key="item.key">{{ item.value }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onValue, push } from 'firebase/database';
import { database } from '../firebase';

export default {
  data() {
    return {
      newData: '',
      dataList: [],
    };
  },
  created() {
    const dataRef = ref(database, 'items');
    onValue(dataRef, (snapshot) => {
      const data = snapshot.val();
      this.dataList = data ? Object.entries(data).map(([key, value]) => ({ key, value })) : [];
    });
  },
  methods: {
    addData() {
      const dataRef = ref(database, 'items');
      push(dataRef, this.newData);
      this.newData = '';
    },
  },
};
</script>

認証機能の追加

Firebase Authenticationを使用してユーザー認証を追加します。

// src/components/Auth.vue
<template>
  <div>
    <h3>ログイン</h3>
    <input v-model="email" placeholder="メール" />
    <input v-model="password" placeholder="パスワード" type="password" />
    <button @click="login">ログイン</button>
  </div>
</template>

<script>
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    login() {
      const auth = getAuth();
      signInWithEmailAndPassword(auth, this.email, this.password)
        .then(() => alert('ログイン成功'))
        .catch((error) => alert(error.message));
    },
  },
};
</script>

データのリアルタイム同期

データが変更されるたびに自動的にUIが更新される仕組みを構築します。

Firestoreとの統合

Firestoreデータベースを使う場合のサンプルコードを紹介します。

// Firestore設定
import { getFirestore, collection, addDoc } from 'firebase/firestore';

const db = getFirestore();

async function addData() {
  await addDoc(collection(db, 'items'), { text: '新しいデータ' });
}

認証済みユーザーごとのデータ管理

認証ユーザーごとにデータを分けることで、セキュリティを強化します。

デプロイとホスティング

Firebase Hostingを使用してアプリケーションをデプロイします。

npm install -g firebase-tools
firebase login
firebase init
firebase deploy

エラーハンドリング

リアルタイムデータ取得時や認証時のエラー処理を追加します。

try {
  // コード...
} catch (error) {
  console.error('エラー:', error.message);
}

アプリの最適化

データベースの読み取り/書き込みの回数を減らし、パフォーマンスを向上させます。

Firebaseルール設定

セキュリティルールを構成し、不正アクセスを防ぎます。

// Firebaseコンソール → Database → Rules
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

まとめ

Vue.jsとFirebaseを組み合わせることで、リアルタイム性の高いアプリケーションを短期間で構築できます。認証やデータベース管理、ホスティングまでを一元化できるため、効率的な開発が可能です。