過去バージョン

Firebase プロジェクト作成からアプリ連携までの流れ

Firebase は Google が提供するモバイル / Web 向け BaaS（Backend as a Service）です。Authentication（認証）、Firestore（DB）、Cloud Storage、Hosting、Cloud Functions などをコード少なめで利用できます。

本ページでは、Firebase コンソールでプロジェクトを作成し、Web アプリに紐づけるまでの初期セットアップ手順をまとめます。

1. Firebase コンソールでプロジェクトを作成

Firebase コンソールにアクセスし、Google アカウントでログインします。「プロジェクトを追加」ボタンを押します。

プロジェクト作成時の入力項目

プロジェクトの作成が完了すると以下のようなダッシュボード画面が開きます。

2. Web アプリを追加する

ダッシュボード中央に並ぶアイコンから、ターゲットとなるプラットフォームを選びます。Web アプリの場合は「」マーク（Web アイコン）をクリックします。

登録時の入力項目

• アプリのニックネーム — コンソール表示用。後から変更可
• Firebase Hosting も設定する — サイトを Firebase でホスティングするならチェック（後から有効化も可能）

3. firebaseConfig をコピーする

登録後、以下のような firebaseConfig オブジェクトと SDK 読み込みスクリプトが表示されます。これを Web アプリに貼り付ければ連携完了です。

firebaseConfig の中身

const firebaseConfig = {
  apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "my-project.firebaseapp.com",
  projectId: "my-project",
  storageBucket: "my-project.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abcdef0123456789abcdef",
  measurementId: "G-XXXXXXXXXX"
};

4. Web アプリに組み込む（モジュール版・v9 以降）

現在の Firebase Web SDK はモジュラー API（v9 以降）が推奨です。npm でインストールするか、CDN（type="module"）で読み込みます。

npm install firebase

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getAnalytics }   from "firebase/analytics";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

export const app       = initializeApp(firebaseConfig);
export const analytics = getAnalytics(app);

CDN（compat なし）の例

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";
  const firebaseConfig = { /* ... */ };
  const app = initializeApp(firebaseConfig);
</script>

5. 主要サービスの有効化

プロジェクト作成と SDK 連携が終わったら、左メニューから利用したいサービスを順に有効化します。

6. セキュリティルールは必須

Firestore / Realtime Database / Storage はセキュリティルール（Security Rules）で守ります。テストモードのまま放置すると全世界から読み書き自由になり、データ流出・破壊につながります。

// Firestore セキュリティルール例
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // ログイン済みユーザーのみ自分の文書を読み書き
    match /users/{uid} {
      allow read, write: if request.auth != null
                        && request.auth.uid == uid;
    }

    // 公開記事は誰でも読める、書き込みは作者のみ
    match /posts/{postId} {
      allow read: if true;
      allow create, update, delete:
        if request.auth != null
        && request.auth.uid == resource.data.author;
    }
  }
}

API キーの扱いについて

Firebase の apiKey は公開前提の識別子であり、漏れても直ちに侵害されるわけではありません。重要なのは：

• Security Rules で必ずアクセス制御をかける（最大の防御線）
• Google Cloud コンソールで API キーに HTTP リファラ制限をかける
• サーバ側の処理はFirebase Admin SDK + サービスアカウントキーで行う（こちらは絶対に公開禁止）

7. 動作確認（最小のサインイン例）

import { getAuth, signInAnonymously } from "firebase/auth";

const auth = getAuth(app);
signInAnonymously(auth)
  .then((cred) => console.log("signed in as", cred.user.uid))
  .catch((err) => console.error(err));

よくあるトラブル

関連

• Firebase Authentication — メール / Google / Twitter 等の認証
• Cloud Firestore — NoSQL ドキュメント DB
• Firebase Hosting — 静的サイトホスティング
• Firebase Security Rules — アクセス制御
• Firebase CLI — ローカル開発・デプロイ