developing-firebase

Firebase 開発ガイド

1. Firebaseエコシステム概要

Firebase は Google が提供する BaaS（Backend-as-a-Service）プラットフォーム。3つの柱でアプリ開発を支援する。

柱	主要サービス
Build	Authentication, Firestore, RTDB, Storage, Functions, Hosting
Release & Monitor	Crashlytics, Performance Monitoring, Test Lab, App Distribution
Engage	Analytics, FCM, In-App Messaging, Remote Config, Dynamic Links

サービス選択フロー

データ永続化が必要?
├─ リアルタイム同期・シンプル構造 → Realtime Database
├─ 複雑なクエリ・スケーラブル     → Cloud Firestore ← 基本的にこちら
└─ ファイル（画像・動画等）        → Cloud Storage

ロジック実行が必要?
├─ Firebase イベントトリガー       → Cloud Functions
├─ HTTP API エンドポイント         → Cloud Functions (HTTPS)
└─ スケジューリング               → Cloud Functions (Scheduled)

ユーザー管理が必要?
└─ Firebase Authentication（必須）

Web公開が必要?
└─ Firebase Hosting（CDN + SSL自動）

プロジェクト初期化・SDK設定

Web (JS/TS)

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const app = initializeApp({
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
});

export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

Android (Kotlin)

// build.gradle (app)
implementation(platform("com.google.firebase:firebase-bom:32.7.0"))
implementation("com.google.firebase:firebase-auth-ktx")
implementation("com.google.firebase:firebase-firestore-ktx")

iOS (Swift)

import FirebaseCore
// AppDelegate.swift
FirebaseApp.configure()

---

2. コアサービス早見表

2-1. Authentication（認証方式選択）

方式	SDK呼び出し	主なユースケース
Email/Password	createUserWithEmailAndPassword / signInWithEmailAndPassword	一般的なサインアップ
Google	signInWithPopup(new GoogleAuthProvider())	ワンクリックログイン
GitHub / Twitter / Facebook	signInWithPopup(new GithubAuthProvider())	開発者向け・SNS系
電話番号 (SMS)	signInWithPhoneNumber	モバイル優先アプリ
匿名	signInAnonymously	ゲストユーザー→後でアカウント昇格
カスタム	signInWithCustomToken	既存の認証システム連携

// Email/Password サインアップ例
import { createUserWithEmailAndPassword, sendEmailVerification } from 'firebase/auth';

const { user } = await createUserWithEmailAndPassword(auth, email, password);
await sendEmailVerification(user); // メール認証送信

// ソーシャルログイン（Google）
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
const provider = new GoogleAuthProvider();
const result = await signInWithPopup(auth, provider);

// 認証状態監視
import { onAuthStateChanged } from 'firebase/auth';
onAuthStateChanged(auth, (user) => {
  if (user) {
    // ログイン済み: user.uid, user.email, user.displayName
  }
});

詳細: references/AUTHENTICATION.md — セッション管理・MFA・カスタムクレーム

---

2-2. Database選択（Firestore vs RTDB）

比較軸	Cloud Firestore	Realtime Database
データ構造	コレクション/ドキュメント	JSONツリー
クエリ	複合クエリ・インデックス対応	単純な絞り込みのみ
スケーラビリティ	自動スケーリング	リージョン単一・制限あり
オフライン	✅ Web/iOS/Android	✅ iOS/Android のみ
コスト	読書き回数課金	帯域幅/ストレージ課金
推奨用途	新規アプリ（基本こちら）	リアルタイムチャット・IoT

// Firestore CRUD
import { collection, doc, setDoc, getDoc, updateDoc, deleteDoc, query, where, getDocs } from 'firebase/firestore';

// 作成・更新
await setDoc(doc(db, 'users', userId), { name: 'Alice', age: 30 });
await updateDoc(doc(db, 'users', userId), { age: 31 });

// 読み込み
const snap = await getDoc(doc(db, 'users', userId));
if (snap.exists()) console.log(snap.data());

// クエリ
const q = query(collection(db, 'users'), where('age', '>', 18));
const querySnap = await getDocs(q);
querySnap.forEach(doc => console.log(doc.id, doc.data()));

// リアルタイムリスナー
import { onSnapshot } from 'firebase/firestore';
const unsubscribe = onSnapshot(collection(db, 'messages'), (snap) => {
  snap.docChanges().forEach(change => {
    if (change.type === 'added') console.log('New:', change.doc.data());
  });
});

// Android (Kotlin) Firestore
val db = Firebase.firestore
db.collection("users").document(userId)
  .set(hashMapOf("name" to "Alice", "age" to 30))
  .addOnSuccessListener { Log.d("TAG", "DocumentSnapshot written") }

詳細: references/DATABASE.md — データモデリング・トランザクション・インデックス設計

---

2-3. Cloud Storage（ファイル管理）

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

// アップロード
const storageRef = ref(storage, `images/${userId}/profile.jpg`);
const snapshot = await uploadBytes(storageRef, file);
const downloadURL = await getDownloadURL(snapshot.ref);

// 削除
await deleteObject(ref(storage, `images/${userId}/profile.jpg`));

// iOS (Swift)
let storageRef = Storage.storage().reference().child("images/\(uid)/profile.jpg")
storageRef.putData(imageData, metadata: nil) { metadata, error in
  storageRef.downloadURL { url, error in /* use url */ }
}

詳細: references/STORAGE-AND-HOSTING.md

---

2-4. Cloud Functions（トリガー種別）

トリガー種別	記述例	主なユースケース
HTTP	onRequest	REST API・Webhook
Firestore	onDocumentCreated / onDocumentUpdated	データ変換・通知送信
Auth	beforeUserCreated / onUserDeleted	プロファイル初期化・クリーンアップ
Storage	onObjectFinalized	画像リサイズ・ウイルススキャン
Pub/Sub	onMessagePublished	非同期処理パイプライン
Scheduled	onSchedule	定期バッチ処理

// functions/src/index.ts
import { onRequest } from 'firebase-functions/v2/https';
import { onDocumentCreated } from 'firebase-functions/v2/firestore';
import { onSchedule } from 'firebase-functions/v2/scheduler';
import * as admin from 'firebase-admin';

admin.initializeApp();

// HTTP トリガー
export const api = onRequest({ region: 'asia-northeast1' }, (req, res) => {
  res.json({ message: 'Hello from Firebase!' });
});

// Firestore トリガー（新規ユーザー作成時）
export const onUserCreated = onDocumentCreated('users/{userId}', async (event) => {
  const userId = event.params.userId;
  const data = event.data?.data();
  // ウェルカムメール送信等の処理
});

// スケジュールトリガー（毎日午前2時）
export const dailyCleanup = onSchedule('0 2 * * *', async () => {
  // 期限切れデータのクリーンアップ
});

詳細: references/FUNCTIONS.md — 環境変数・エラーハンドリング・デプロイ設定

---

2-5. Hosting（デプロイフロー）

# セットアップ
npm install -g firebase-tools
firebase login
firebase init hosting  # public dir, SPA rewrite設定

# デプロイ
firebase deploy --only hosting

# プレビューチャンネル（PR確認用）
firebase hosting:channel:deploy preview-branch

// firebase.json
{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{ "source": "**", "destination": "/index.html" }],
    "headers": [
      { "source": "**/*.@(js|css)", "headers": [{ "key": "Cache-Control", "value": "max-age=31536000" }] }
    ]
  }
}

詳細: references/STORAGE-AND-HOSTING.md — カスタムドメイン・リライト・CI/CD統合

---

3. Security Rules設計原則

共通パターン

パターン	用途	ルール例
認証必須	すべての操作で認証要求	request.auth != null
所有権チェック	自分のデータのみ操作	request.auth.uid == userId
ロールベース	カスタムクレームで権限管理	request.auth.token.admin == true
データ検証	書き込みデータのバリデーション	request.resource.data.age is int

Firestore Security Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ヘルパー関数
    function isAuthenticated() {
      return request.auth != null;
    }
    function isOwner(userId) {
      return request.auth.uid == userId;
    }
    function isAdmin() {
      return request.auth.token.admin == true;
    }

    // ユーザープロフィール: 本人のみ読み書き
    match /users/{userId} {
      allow read: if isAuthenticated() && isOwner(userId);
      allow write: if isOwner(userId) && request.resource.data.keys().hasAll(['name', 'email']);
    }

    // 投稿: 認証済みユーザーは全員読み取り可、作成者のみ編集・削除
    match /posts/{postId} {
      allow read: if isAuthenticated();
      allow create: if isAuthenticated() && request.resource.data.authorId == request.auth.uid;
      allow update, delete: if resource.data.authorId == request.auth.uid;
    }

    // 管理者専用
    match /admin/{document=**} {
      allow read, write: if isAdmin();
    }
  }
}

Realtime Database Rules

{
  "rules": {
    "users": {
      "$userId": {
        ".read": "auth != null && auth.uid == $userId",
        ".write": "auth != null && auth.uid == $userId"
      }
    },
    "posts": {
      ".read": "auth != null",
      "$postId": {
        ".write": "auth != null && (!data.exists() || data.child('authorId').val() == auth.uid)"
      }
    }
  }
}

Storage Rules

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // ユーザー固有の画像: 本人のみ操作可
    match /images/{userId}/{allPaths=**} {
      allow read: if request.auth != null;
      allow write: if request.auth != null
                   && request.auth.uid == userId
                   && request.resource.size < 5 * 1024 * 1024  // 5MB制限
                   && request.resource.contentType.matches('image/.*');
      allow delete: if request.auth.uid == userId;
    }
  }
}

---

4. 運用・スケーリング

Emulatorスイート活用

# Emulator起動（開発中は必ずローカルで完結させる）
firebase emulators:start --import=./emulator-data --export-on-exit

# Emulator接続（アプリ側）

import { connectFirestoreEmulator } from 'firebase/firestore';
import { connectAuthEmulator } from 'firebase/auth';
import { connectStorageEmulator } from 'firebase/storage';
import { connectFunctionsEmulator } from 'firebase/functions';

if (process.env.NODE_ENV === 'development') {
  connectAuthEmulator(auth, 'http://localhost:9099');
  connectFirestoreEmulator(db, 'localhost', 8080);
  connectStorageEmulator(storage, 'localhost', 9199);
  connectFunctionsEmulator(functions, 'localhost', 5001);
}

Emulator	ポート	用途
Authentication	9099	認証テスト（実際のメール不要）
Firestore	8080	データ操作テスト
Storage	9199	ファイル操作テスト
Functions	5001	トリガー動作確認
Hosting	5000	デプロイ前確認
UI	4000	全体ダッシュボード

パフォーマンス最適化

対策	対象	方法
クエリ絞り込み	Firestore	limit() で取得件数を制限
インデックス	Firestore	複合クエリには firestore.indexes.json で事前定義
オフラインキャッシュ	Firestore/RTDB	enableIndexedDbPersistence()
遅延ロード	Functions	Cold start対策: 最小依存・メモリ設定
CDNキャッシュ	Hosting	静的アセットに長期 Cache-Control を設定

コスト管理

サービス	無料枠（Spark）	注意点
Firestore	読み取り5万回/日、書き込み2万回/日	不要なリスナー解除を徹底
Storage	5GB, 1GB/日ダウンロード	大容量ファイルはCDN経由で配信
Functions	呼び出し200万回/月	無限ループに注意（トリガーの連鎖）
Hosting	10GB/月	静的アセットの圧縮で削減

// Firestore: 不要なリスナー解除
const unsubscribe = onSnapshot(query, callback);
// コンポーネントアンマウント時
return () => unsubscribe();

---

5. リファレンス索引

ファイル	カバー内容	主なトピック
references/AUTHENTICATION.md	認証詳細	Email/Social実装・セッション管理・MFA・カスタムクレーム・匿名→昇格
references/DATABASE.md	Firestore + RTDB	データモデリング・複合クエリ・トランザクション・バッチ・インデックス・RTDB構造設計
references/STORAGE-AND-HOSTING.md	Storage + Hosting	アップロード/ダウンロード・メタデータ・カスタムドメイン・リライト・プレビューChannel
references/FUNCTIONS.md	Cloud Functions	全トリガー詳細・環境変数・シークレット管理・エラーハンドリング・Gen2移行
references/ANALYTICS-AND-MONITORING.md	Analytics + 監視	カスタムイベント・BigQuery連携・Crashlytics・Performance Monitoring
references/MESSAGING.md	FCM + Remote Config	プッシュ通知送信・トピック購読・Remote Config A/Bテスト・Dynamic Links
references/TESTING-AND-DISTRIBUTION.md	テスト + 配布	Test Lab・Emulatorテスト戦略・App Distribution・CI/CD統合
references/EXTENSIONS-AND-ADVANCED.md	拡張機能・応用	Firebase Extensions・AdMob・クロスプラットフォーム固有パターン