Firebase ラボ

概要

Firebase は Google 提供の BaaS（Backend as a Service）で、認証・リアルタイムDB・ドキュメントDB・ホスティング・サーバーレス関数・分析などを統合的に提供します。Web/モバイル開発で、バックエンド構築・運用を最小化し、素早くプロダクトをリリースできます。

• 主な機能：Authentication / Firestore / Realtime Database / Cloud Functions / Hosting / Storage / Remote Config / App Check / Analytics
• 向いているケース：スピード重視のプロトタイプ〜中規模サービス、クライアント主導のデータアクセス、イベント駆動
• 注意点：ドキュメント設計・セキュリティルール（firestore.rules）の設計、課金設計、ベンダーロックインの検討

基本

プロジェクト構成の基本

1. Firebase コンソールでプロジェクト作成
2. アプリ（Web/iOS/Android）を追加し、設定スニペットを取得
3. 必要なプロダクト（Auth/Firestore/Hosting 等）を有効化
4. ローカルでは Firebase Emulator Suite で統合開発が可能

// npm i firebase
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_APP.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_APP.appspot.com",
  messagingSenderId: "....",
  appId: "...."
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// Google ログイン
const provider = new GoogleAuthProvider();
document.getElementById("loginBtn").addEventListener("click", async () => {
  await signInWithPopup(auth, provider);
});

// Firestore CRUD (例)
document.getElementById("addBtn").addEventListener("click", async () => {
  await addDoc(collection(db, "todos"), { title: "Sample", done: false });
});

document.getElementById("listBtn").addEventListener("click", async () => {
  const snap = await getDocs(collection(db, "todos"));
  const list = snap.docs.map(d => ({ id: d.id, ...d.data() }));
  console.log(list);
});

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 /public/{document=**} {
      allow read: if true;
      allow write: if false;
    }
  }
}

基礎

データ設計の考え方（Firestore）

• ドキュメント指向：正規化し過ぎず、読み取り回数を最適化するための冗長化も検討
• クエリ設計：複合インデックス前提。UI要件から逆算してクエリ→スキーマを決める
• ルール駆動：request.authやresource.dataでの条件分岐を明確に

Emulator Suite の活用

# ローカルで Auth / Firestore / Functions などを起動
firebase init emulators
firebase emulators:start

導入

最小サンプル（Auth + Firestore + Hosting）

1. npm i firebase
2. 上記「基本」の初期化コードを設置
3. Hosting を有効化し、ビルド出力をデプロイ

firebase init hosting
firebase deploy --only hosting

Functions（サーバーレス）

firebase init functions
# TypeScript 推奨。トリガー例：onCall/onRequest/onDocumentWritten など

最新情報

Firebase は更新が活発です。公式の Release Notes / Blog / GitHub をウォッチして、SDK メジャー更新や料金の変更に注意しましょう。

• Firebase Release Notes（Web/JS SDK・CLI 等）
• Firebase Blog（新機能・ベストプラクティス）
• GitHub firebase-js-sdk（Issue/PR で挙動確認）

※ このページは概念・実装指針に焦点。実際の API バージョンや挙動は公式の最新ドキュメントをご確認ください。

応用

よくある構成例

• SPA + Firestore + Auth + Hosting（Jamstack に近い体験）
• Cloud Functions + Firestore トリガーで非同期処理
• App Check + セキュリティルールで不正アクセス対策
• Analytics + Remote Config A/B テスト

発展

大規模化に向けたポイント

• 読み取り最適化：1 画面あたりの読み取り回数・サイズを計測し、キャッシュ・集約を検討
• ルールのテスト：firebase emulators:exec とルールユニットテスト
• 監査：Cloud Logging / BigQuery 連携でモニタリング
• 費用管理：予算アラート、強制上限の検討

Firebase VS Supabase、Appwrite、NHost、Back4App

代表的な BaaS を主観なく俯瞰できるよう、機能・データモデル・自前運用性・課金などの観点で比較します。

関連リンク

• Firebase 公式
• Supabase
• Appwrite
• Nhost
• Back4App

ミニデモ（ブラウザのみ・SDK読み込み不要の疑似UI）

本番では Firebase Web SDK を読み込みますが、ここでは UI の雰囲気だけ体験できます。

// ここにログが表示されます