メインコンテンツまでスキップ

第12章：Webアプリ登録：SDKの“名札”を作る🏷️🌐

この章でやることはシンプル！ Firebaseに「このWebアプリ、うちのプロジェクトの子ですよ〜」って登録して、**Web用の設定（firebaseConfig）**をもらいます🙌✨ これがないと、次章（SDK導入＆初期化）で「つながった！」ができません⚡

（※ 2026-02-15時点の公式手順ベースで構成しています）(Firebase)

今日のゴール🎯✨​

  • Firebase ConsoleでWebアプリを登録できる✅
  • firebaseConfig（設定オブジェクト）をコピーして保管できる✅
  • 後から迷子にならずにもう一度configを取り直せる✅ (Google ヘルプ)
  • configの各項目を「だいたい何者か」説明できる✅ (Firebase)

1) まずイメージをつかもう🧠🗺️​

Web App Registration Metaphor

  • Firebaseプロジェクト＝“建物”🏢
  • Webアプリ登録＝“部屋の名札を作る”🏷️
  • firebaseConfig＝“その名札に書かれた情報”🪪

登録すると、Firebase側が「このWebアプリ（appId）は、このプロジェクトに所属ね！」って覚えてくれます🙂 そして私たちは、その“名札情報（config）”をコードに貼って初期化して使います（次章でやるよ）(Firebase)

2) 手を動かす：Firebase ConsoleでWebアプリを追加🏗️🌐​

Web App Registration Flow

手順（迷わない版）🧭​

  1. Firebase Consoleで対象プロジェクトを開く👀

  2. 画面中央あたりの「アプリを追加」的なところで、Web（</>）アイコンを押す🌐

    • すでに何かアプリが登録済みなら「Add app（アプリを追加）」からWebを選べます🧩(Firebase)

  3. アプリのニックネームを入力（例：myapp-web-dev）✍️

    • これは自分用のラベルで、動作には直接関係しないよ🙂

  4. 「Register app（登録）」を押す✅

  5. すると次の画面で、Firebase SDKの導入手順といっしょに firebaseConfig（設定オブジェクト） が出てくる✨(Firebase)

  6. その場で firebaseConfigをコピーして、いったん安全に保管📝🔐

  7. 「Continue to console」的なボタンでコンソールへ戻る🏁

💡この章は「登録＆config取得」までがゴール！ npm install や initializeApp は次章でやるよ⚡

3) configを“なくさない”保管ルール🗃️🧯​

Config Safekeeping

最低限、これだけやればOK👌

  • ① コピペしたfirebaseConfigをメモ帳に保存（まず最優先）📝
  • ② “どのプロジェクト用か”がわかるように プロジェクトIDも一緒にメモ🧷
  • ③ 後から取り直せるルートも覚える（次の章で説明）🧭

Firebase公式も「登録するとconfigオブジェクトが手に入る」前提で説明してます(Firebase) そして、configを手でいじるのは基本おすすめしない（必要なキーが欠けると不具合の元！）とも書かれてます(Firebase)

4) いつでも取り直せる：config再取得の最短ルート🧭🔁​

Config Retrieval Path

「どこに置いたか忘れた😇」は、あるあるです。大丈夫！

Firebase Console → 歯車（Project settings）→ General → Your apps → 対象のWebアプリ → Firebase SDK snippet → Config ここで いつでもconfigを再表示してコピーできます✅(Google ヘルプ)

5) firebaseConfigの中身を“超ざっくり”理解しよう🧩✨​

Anatomy of firebaseConfig

コンソールで出てくるのは、だいたいこんな形👇（値はダミーです）

export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "012345678901",
  appId: "1:012345678901:web:abcdef1234567890",
  measurementId: "G-XXXXXXX", // 出ないこともある（Analytics有効時など）
  // databaseURL: "https://YOUR_PROJECT.firebaseio.com", // RTDB使うとき等
} as const;

それぞれの意味はこんな感じ🙂👇

  • apiKey：Firebase/Googleの各サービスにリクエストを送るときの“宛先判定に使われるキー”🔑

    • “完全な秘密鍵”ではないけど、運用上は雑にばらまかないが安心🙆‍♂️
    • Firebase公式でもAPIキーの扱い・ベストプラクティスを説明しています(Firebase)

  • authDomain：主に認証（Auth）のためのドメイン🌐

    • 認証のリダイレクトなどで関係してくることがあります(Firebase)

  • projectId：プロジェクトの“本名”みたいなもの🪪（Firestore等で超重要）(Firebase)

  • storageBucket：Storage（ファイル置き場）のバケット名📦

  • messagingSenderId：主にFCM（通知）系の識別子📣

  • appId：この“アプリ登録”に対して発行される固有ID🆔（アプリを区別する本体）(Firebase)

  • measurementId：Analyticsを使う場合に出てくるID📊（出ないなら無理に探さなくてOK）(Firebase)

  • databaseURL（出る/出ない）：Realtime Databaseを使う時に必要になることがあるURL🏊‍♂️

    • 公式でも「Realtime Database URLを指定してね」と書かれています(Firebase)

✅超大事：configは“魔法の秘密鍵セット”ではなく、プロジェクトとアプリを紐づけるための設定って感覚がちょうどいいです🙂 そして、公式は「特に apiKey / projectId / appID（appId） は壊さないでね」って注意してます(Firebase)

6) 🤖AIと一緒に爆速理解：Gemini CLI / Antigravity の使いどころ💬⚡​

AI Explaining Config

この章は「理解」と「迷子回避」が勝ちなので、AIがめちゃ役立ちます✨

そのままコピペでOKな質問例🧠📝​

  • 「firebaseConfigの各キー（apiKey/authDomain/projectId/appId…）を、初心者向けに1行ずつ説明して」
  • 「Firebase ConsoleでWebアプリのconfigを“後から”取り直す最短手順を、メニュー名つきで教えて」(Google ヘルプ)
  • 「measurementIdが出ないのは何が原因？ 出ないと困るケースは？」(Firebase)
  • 「Realtime Databaseを使うとき databaseURL が必要になる理由と、URLの見つけ方は？」(Firebase)

MCPの話（“最新情報を取り続ける”最強ルート）🛠️🔥​

  • Firebase MCP serverは、Antigravity / Gemini CLI などのMCPクライアントからFirebase作業を支援できる、と公式が明記してます(Firebase)
  • Antigravity側での入れ方（MCP Servers → Firebase → Install）も公式ドキュメントに手順があります(Firebase)
  • さらに、Google Developer Knowledge MCP serverみたいに「公式ドキュメントを検索して最新根拠を返す」系もあります(Google for Developers)

🔥コツ：「画面のどこ？」「用語の意味は？」をAIに投げて、答えを3行に要約させると迷子が激減します🙂✨

7) よくある詰まりポイント集😵‍💫🧯​

  • Web（</>）アイコンが見当たらない → すでに何かアプリがある可能性大！「Add app」から選ぶ流れになります(Firebase)
  • 違うプロジェクトで登録してた😇 → あるある！コンソール上部のプロジェクト名/IDを必ずチェック👀
  • measurementIdが無い！失敗？ → 失敗じゃないことが多いよ。Analyticsを使う時に出るものなので、出なければ「今は未使用」くらいでOK🙂(Firebase)
  • configをちょっと編集して貼ったら動かない → 公式が「手編集はおすすめしない」って注意してます。まずはコンソールのスニペットをそのまま使うのが安全✅(Firebase)

8) ミニ課題🎒✨​

ミニ課題A（必須）📝​

コピーしたfirebaseConfigを見ながら、各項目を1行で説明してみよう！

  • apiKey：
  • authDomain：
  • projectId：
  • storageBucket：
  • messagingSenderId：
  • appId：
  • measurementId（あれば）：

わからなければAIに聞いてOK🤖💡（**“1行で！”**って指定すると読みやすい）

ミニ課題B（余力があれば）🧪​

Multiple Apps in Project

同じプロジェクトに、もう1つWebアプリを登録してみて👇

  • 「nickname」と「appId」が変わるのを確認👀✨ （※あとで“dev/prod分け”を理解するのにめちゃ効きます）

9) チェック✅（合格ライン）​

  • ✅ Webアプリ登録ができた
  • ✅ firebaseConfigを保管した
  • ✅ configの再取得ルートを言える（Project settings → General → Your apps → Config）(Google ヘルプ)
  • ✅ appIdが「アプリ固有のID」だと分かった(Firebase)

次章の予告🔜⚡​

次はついに、SDKを入れて initializeApp して、画面に「繋がった！」を出します🌱✨ 第13章で一気に気持ちよくいこう〜🚀