← フレームワーク一覧に戻る

Firebase

BaaSGoogleリアルタイムデータベース認証ストレージホスティング分析

プラットフォーム

Firebase

概要

Firebaseは、Googleが提供するモバイル・Web開発向けの包括的なBaaS（Backend-as-a-Service）プラットフォームです。認証、リアルタイムデータベース、クラウドストレージ、ホスティング、分析機能を統合し、開発者が迅速にスケーラブルなアプリケーションを構築できる環境を提供します。モバイルアプリ開発のデファクトスタンダードとして広く採用され、スタートアップから大企業まで幅広く利用されています。Google Cloud Platformとの深い統合により、エンタープライズレベルの機能とスケーラビリティを実現しています。

詳細

Firebase 2025年版は、モバイルファーストのアプローチでモダンアプリ開発を革新し続けています。15年以上の開発実績とGoogleのインフラストラクチャーを活用し、世界中の数百万のアプリケーションを支えています。リアルタイムデータベース、Cloud Firestore、Cloud Functions、Firebase Auth、Cloud Storage等の豊富なサービス群により、フロントエンド開発に集中できる環境を提供。Machine Learning Kit、Performance Monitoring、Crashlyticsなどの高度な機能により、アプリの品質向上と運用効率化を実現します。また、Flutter、React Native、iOS、Android、Webすべてのプラットフォームで統一されたSDKを提供し、クロスプラットフォーム開発を強力にサポートしています。

主な特徴

  • リアルタイムデータベース: WebSocketベースのリアルタイム同期
  • Cloud Firestore: NoSQLドキュメントデータベース
  • Firebase Auth: 包括的な認証システム
  • Cloud Storage: スケーラブルなファイルストレージ
  • Firebase Hosting: 高速なWebホスティング
  • Cloud Functions: サーバーレス関数実行環境

メリット・デメリット

メリット

  • Googleのグローバルインフラストラクチャーによる高い可用性とスケーラビリティ
  • 包括的なBaaSソリューションによる開発速度の大幅向上
  • リアルタイム機能による優れたユーザーエクスペリエンス
  • 豊富なSDKとドキュメントによる学習コストの低減
  • Google Cloud Platformとの統合によるエンタープライズ対応
  • 無料プランからエンタープライズプランまでの柔軟な価格体系

デメリット

  • ベンダーロックインのリスクとプラットフォーム依存性
  • 大規模利用時の高コストと予測困難な料金体系
  • NoSQLベースのためRDBMS経験者には学習コストが発生
  • 複雑なクエリや集計処理には制限がある
  • カスタマイズ可能性に限界があり独自要件への対応が困難
  • データのエクスポートや移行時の技術的課題

参考ページ

書き方の例

セットアップと初期化

# Firebase CLIのインストール
npm install -g firebase-tools

# Firebaseプロジェクトの初期化
firebase login
firebase init

# Firebase SDKのインストール（Web）
npm install firebase

// Firebase初期化（Web）
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123def456"
};

// Firebaseアプリを初期化
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

console.log('Firebase initialized successfully');

認証システム

import { 
  getAuth, 
  createUserWithEmailAndPassword, 
  signInWithEmailAndPassword,
  signInWithPopup,
  GoogleAuthProvider,
  onAuthStateChanged,
  signOut
} from 'firebase/auth';

const auth = getAuth();
const googleProvider = new GoogleAuthProvider();

// ユーザー登録
async function signUp(email, password) {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    console.log('User registered:', user.uid);
    return user;
  } catch (error) {
    console.error('Sign up error:', error.code, error.message);
    throw error;
  }
}

// メール/パスワードでログイン
async function signIn(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    console.log('User signed in:', user.uid);
    return user;
  } catch (error) {
    console.error('Sign in error:', error.code, error.message);
    throw error;
  }
}

// Googleアカウントでログイン
async function signInWithGoogle() {
  try {
    const result = await signInWithPopup(auth, googleProvider);
    const user = result.user;
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    
    console.log('Google sign in successful:', user.displayName);
    return { user, token };
  } catch (error) {
    console.error('Google sign in error:', error.code, error.message);
    throw error;
  }
}

// 認証状態の監視
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log('User is signed in:', user.uid);
    // ユーザーがログインしている状態
    displayUserProfile(user);
  } else {
    console.log('User is signed out');
    // ユーザーがログアウトしている状態
    displayLoginForm();
  }
});

// ログアウト
async function handleSignOut() {
  try {
    await signOut(auth);
    console.log('User signed out successfully');
  } catch (error) {
    console.error('Sign out error:', error);
  }
}

// ユーザープロフィール表示
function displayUserProfile(user) {
  document.getElementById('user-info').innerHTML = `
    <h3>Welcome, ${user.displayName || user.email}</h3>
    <p>UID: ${user.uid}</p>
    <p>Email: ${user.email}</p>
    <p>Email Verified: ${user.emailVerified}</p>
    <button onclick="handleSignOut()">Sign Out</button>
  `;
}

データベース操作（Cloud Firestore）

import { 
  getFirestore, 
  collection, 
  doc, 
  addDoc, 
  getDoc, 
  getDocs, 
  updateDoc, 
  deleteDoc, 
  query, 
  where, 
  orderBy, 
  limit,
  onSnapshot
} from 'firebase/firestore';

const db = getFirestore();

// ドキュメントの追加
async function addUser(userData) {
  try {
    const docRef = await addDoc(collection(db, 'users'), {
      name: userData.name,
      email: userData.email,
      age: userData.age,
      createdAt: new Date(),
      isActive: true
    });
    
    console.log('User added with ID:', docRef.id);
    return docRef.id;
  } catch (error) {
    console.error('Error adding user:', error);
    throw error;
  }
}

// ドキュメントの取得
async function getUser(userId) {
  try {
    const docRef = doc(db, 'users', userId);
    const docSnap = await getDoc(docRef);
    
    if (docSnap.exists()) {
      console.log('User data:', docSnap.data());
      return { id: docSnap.id, ...docSnap.data() };
    } else {
      console.log('No such user found');
      return null;
    }
  } catch (error) {
    console.error('Error getting user:', error);
    throw error;
  }
}

// コレクション全体の取得
async function getAllUsers() {
  try {
    const querySnapshot = await getDocs(collection(db, 'users'));
    const users = [];
    
    querySnapshot.forEach((doc) => {
      users.push({ id: doc.id, ...doc.data() });
    });
    
    console.log('All users:', users);
    return users;
  } catch (error) {
    console.error('Error getting users:', error);
    throw error;
  }
}

// クエリによる検索
async function getActiveUsers() {
  try {
    const q = query(
      collection(db, 'users'),
      where('isActive', '==', true),
      orderBy('createdAt', 'desc'),
      limit(10)
    );
    
    const querySnapshot = await getDocs(q);
    const activeUsers = [];
    
    querySnapshot.forEach((doc) => {
      activeUsers.push({ id: doc.id, ...doc.data() });
    });
    
    console.log('Active users:', activeUsers);
    return activeUsers;
  } catch (error) {
    console.error('Error getting active users:', error);
    throw error;
  }
}

// リアルタイム更新の監視
function listenToUsers() {
  const q = query(collection(db, 'users'), orderBy('createdAt', 'desc'));
  
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const users = [];
    querySnapshot.forEach((doc) => {
      users.push({ id: doc.id, ...doc.data() });
    });
    
    console.log('Real-time users update:', users);
    updateUserList(users);
  }, (error) => {
    console.error('Error listening to users:', error);
  });
  
  // リスナーを解除する場合
  // unsubscribe();
  
  return unsubscribe;
}

// ドキュメントの更新
async function updateUser(userId, updates) {
  try {
    const userRef = doc(db, 'users', userId);
    await updateDoc(userRef, {
      ...updates,
      updatedAt: new Date()
    });
    
    console.log('User updated successfully');
  } catch (error) {
    console.error('Error updating user:', error);
    throw error;
  }
}

ファイルストレージ

import { 
  getStorage, 
  ref, 
  uploadBytes, 
  uploadBytesResumable,
  getDownloadURL, 
  deleteObject,
  listAll
} from 'firebase/storage';

const storage = getStorage();

// ファイルのアップロード
async function uploadFile(file, path) {
  try {
    const storageRef = ref(storage, path);
    const snapshot = await uploadBytes(storageRef, file);
    
    console.log('File uploaded successfully');
    
    // ダウンロードURLの取得
    const downloadURL = await getDownloadURL(snapshot.ref);
    console.log('Download URL:', downloadURL);
    
    return { downloadURL, fullPath: snapshot.ref.fullPath };
  } catch (error) {
    console.error('Error uploading file:', error);
    throw error;
  }
}

// 進捗付きファイルアップロード
function uploadFileWithProgress(file, path, onProgress) {
  return new Promise((resolve, reject) => {
    const storageRef = ref(storage, path);
    const uploadTask = uploadBytesResumable(storageRef, file);
    
    uploadTask.on(
      'state_changed',
      (snapshot) => {
        // 進捗の計算
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload progress:', progress + '%');
        
        if (onProgress) {
          onProgress(progress, snapshot);
        }
        
        switch (snapshot.state) {
          case 'paused':
            console.log('Upload is paused');
            break;
          case 'running':
            console.log('Upload is running');
            break;
        }
      },
      (error) => {
        console.error('Upload error:', error);
        reject(error);
      },
      async () => {
        // アップロード完了
        try {
          const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
          console.log('File available at:', downloadURL);
          resolve({
            downloadURL,
            fullPath: uploadTask.snapshot.ref.fullPath,
            metadata: uploadTask.snapshot.metadata
          });
        } catch (urlError) {
          reject(urlError);
        }
      }
    );
  });
}

// ファイルの削除
async function deleteFile(filePath) {
  try {
    const fileRef = ref(storage, filePath);
    await deleteObject(fileRef);
    console.log('File deleted successfully');
  } catch (error) {
    console.error('Error deleting file:', error);
    throw error;
  }
}

// ディレクトリ内のファイル一覧取得
async function listFiles(directoryPath) {
  try {
    const listRef = ref(storage, directoryPath);
    const result = await listAll(listRef);
    
    const files = await Promise.all(
      result.items.map(async (itemRef) => {
        const downloadURL = await getDownloadURL(itemRef);
        return {
          name: itemRef.name,
          fullPath: itemRef.fullPath,
          downloadURL
        };
      })
    );
    
    console.log('Files in directory:', files);
    return files;
  } catch (error) {
    console.error('Error listing files:', error);
    throw error;
  }
}

// 画像アップロードの実装例
async function handleImageUpload(event) {
  const file = event.target.files[0];
  if (!file) return;
  
  // ファイルタイプの検証
  if (!file.type.startsWith('image/')) {
    alert('Please select an image file');
    return;
  }
  
  // ファイルサイズの検証（5MB制限）
  if (file.size > 5 * 1024 * 1024) {
    alert('File size must be less than 5MB');
    return;
  }
  
  try {
    const fileName = `images/${Date.now()}_${file.name}`;
    
    const result = await uploadFileWithProgress(
      file, 
      fileName, 
      (progress) => {
        document.getElementById('progress').textContent = `${Math.round(progress)}%`;
      }
    );
    
    console.log('Image uploaded:', result.downloadURL);
    
    // Firestoreにメタデータを保存
    await addDoc(collection(db, 'images'), {
      name: file.name,
      url: result.downloadURL,
      path: result.fullPath,
      size: file.size,
      type: file.type,
      uploadedAt: new Date()
    });
    
  } catch (error) {
    console.error('Image upload failed:', error);
    alert('Upload failed: ' + error.message);
  }
}

リアルタイム機能

import { 
  getDatabase, 
  ref as dbRef, 
  push, 
  set, 
  get, 
  onValue, 
  off, 
  serverTimestamp,
  remove
} from 'firebase/database';

const realtimeDb = getDatabase();

// リアルタイムチャットの実装
class RealtimeChat {
  constructor(roomId) {
    this.roomId = roomId;
    this.messagesRef = dbRef(realtimeDb, `chats/${roomId}/messages`);
    this.usersRef = dbRef(realtimeDb, `chats/${roomId}/users`);
  }
  
  // メッセージの送信
  async sendMessage(userId, userName, message) {
    try {
      const messageData = {
        userId,
        userName,
        message,
        timestamp: serverTimestamp()
      };
      
      await push(this.messagesRef, messageData);
      console.log('Message sent successfully');
    } catch (error) {
      console.error('Error sending message:', error);
      throw error;
    }
  }
  
  // メッセージのリアルタイム監視
  listenToMessages(callback) {
    onValue(this.messagesRef, (snapshot) => {
      const messages = [];
      snapshot.forEach((child) => {
        messages.push({
          id: child.key,
          ...child.val()
        });
      });
      
      // タイムスタンプでソート
      messages.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
      callback(messages);
    });
  }
  
  // ユーザーのオンライン状態管理
  async setUserOnline(userId, userName) {
    try {
      const userRef = dbRef(realtimeDb, `chats/${this.roomId}/users/${userId}`);
      await set(userRef, {
        name: userName,
        online: true,
        lastSeen: serverTimestamp()
      });
      
      // ユーザーがオフラインになったときの処理
      const offlineRef = dbRef(realtimeDb, `chats/${this.roomId}/users/${userId}/online`);
      await set(offlineRef, false);
      
    } catch (error) {
      console.error('Error setting user online:', error);
    }
  }
  
  // オンラインユーザーの監視
  listenToOnlineUsers(callback) {
    onValue(this.usersRef, (snapshot) => {
      const users = [];
      snapshot.forEach((child) => {
        const userData = child.val();
        if (userData.online) {
          users.push({
            id: child.key,
            ...userData
          });
        }
      });
      callback(users);
    });
  }
  
  // リスナーの停止
  stopListening() {
    off(this.messagesRef);
    off(this.usersRef);
  }
}

// チャットの使用例
const chat = new RealtimeChat('room123');

// メッセージの監視開始
chat.listenToMessages((messages) => {
  console.log('New messages:', messages);
  displayMessages(messages);
});

// オンラインユーザーの監視開始
chat.listenToOnlineUsers((users) => {
  console.log('Online users:', users);
  displayOnlineUsers(users);
});

// ユーザーをオンラインに設定
chat.setUserOnline('user123', 'John Doe');

// メッセージ送信
document.getElementById('send-button').addEventListener('click', () => {
  const messageInput = document.getElementById('message-input');
  const message = messageInput.value.trim();
  
  if (message) {
    chat.sendMessage('user123', 'John Doe', message);
    messageInput.value = '';
  }
});

デプロイメントと本番運用

# Firebase Hostingでのデプロイ
firebase init hosting
firebase deploy

# 特定のサービスのみデプロイ
firebase deploy --only hosting
firebase deploy --only functions
firebase deploy --only firestore:rules

# Cloud Functionsのデプロイ
firebase init functions
cd functions
npm install
cd ..
firebase deploy --only functions

# セキュリティルールの設定
firebase deploy --only firestore:rules,storage

// Firestore セキュリティルールの例（firestore.rules）
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ユーザーは自分のドキュメントのみアクセス可能
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    
    // 公開投稿は認証済みユーザーなら読み取り可能、作成者のみ編集可能
    match /posts/{postId} {
      allow read: if request.auth != null;
      allow write: if request.auth != null && 
        (resource == null || resource.data.authorId == request.auth.uid);
    }
    
    // チャットメッセージは参加者のみアクセス可能
    match /chats/{chatId}/messages/{messageId} {
      allow read, write: if request.auth != null && 
        request.auth.uid in get(/databases/$(database)/documents/chats/$(chatId)).data.participants;
    }
  }
}

// Performance Monitoring の設定
import { getPerformance, trace } from 'firebase/performance';

const perf = getPerformance();

// カスタムトレースの作成
const customTrace = trace(perf, 'data_loading');
customTrace.start();

try {
  // データ読み込み処理
  const data = await fetchImportantData();
  customTrace.putAttribute('data_size', data.length.toString());
  customTrace.putMetric('items_loaded', data.length);
} catch (error) {
  customTrace.putAttribute('error', error.message);
} finally {
  customTrace.stop();
}

// Analytics イベントの送信
import { getAnalytics, logEvent } from 'firebase/analytics';

const analytics = getAnalytics();

// カスタムイベントの送信
logEvent(analytics, 'user_engagement', {
  action: 'button_click',
  page: 'home',
  user_id: currentUser.uid
});

// Eコマースイベントの例
logEvent(analytics, 'purchase', {
  transaction_id: 'T12345',
  value: 25.42,
  currency: 'USD',
  items: [{
    item_id: 'SKU123',
    item_name: 'Example Product',
    category: 'Electronics',
    price: 25.42,
    quantity: 1
  }]
});