Firebaseの始め方 — 認証とFirestoreルールをそろえてデータを保存する

ひよこ

Firebaseって、サーバーを書かずにアプリが作れるの？

ペンギン先生

認証、データ保存、Hostingなどを組み合わせられるGoogleの開発基盤だよ。この入門では、ブラウザでログインして「自分のメモ」を保存する小さなWebアプリを作るんだ。保存先はCloud Firestore。Firebaseには別製品のRealtime Databaseもあるので、名前を区別しよう。

ひよこ

何を用意すれば始められる？

ペンギン先生

Googleアカウント、ブラウザ、Node.jsとnpmを用意するよ。コンソールでプロジェクトとWebアプリを作り、設定情報をコピーする。Analyticsは今回の保存・取得には必須ではないよ。下の手順ではViteを使い、npmで入れたSDKをブラウザ向けにまとめるんだ。

ひよこ

まずはテストモードで全部許可すればいい？

ペンギン先生

クラウドのFirestoreで全許可にすると、他人もデータを読んだり書き換えたりできるんだ。この例は最初に本番環境モードの拒否ルールで作り、ログインした本人の文書だけを許可するルールへ変えるよ。権限を試したいときはLocal Emulator Suiteも使える。

ひよこ

ログイン画面も作るの？

ペンギン先生

今回は匿名認証で、画面にメールアドレスを入力せずにユーザーIDを取得するよ。「匿名」は誰でも他人のデータに入れるという意味ではないんだ。ログインを待ってから、そのIDと同じ名前の文書を読む・書くようにするよ。

ひよこ

認証できたら、それだけでデータを守れるの？

ペンギン先生

Authenticationは「誰か」を確認し、FirestoreのSecurity Rulesは「どのデータに何をしてよいか」を判定するんだ。文書のパスに入れたユーザーIDと、リクエストのユーザーIDが一致するときだけ許可する。アプリの画面でボタンを隠すだけではアクセス制御にならないよ。

ひよこ

保存と取得はどこを見ればいい？

ペンギン先生

下の例は同じusersコレクションの自分の文書へsetDocで保存し、getDocで読み戻すよ。操作結果は画面に表示する。全利用者の一覧取得ではないので、他の人の文書を集めるクエリも必要ないんだ。

ひよこ

permission-deniedが出たら、どう直すの？

ペンギン先生

全許可に戻す前に、接続先プロジェクト、認証機能の有効化、ログイン完了、文書パス、公開済みのルールを順に確認しよう。匿名ユーザーも別のユーザーの文書には入れない。下のルールは本人の文書を分ける学習例で、本番では入力項目・値や運用上の制限も設計するよ。

ひよこ

そのまま無料で公開できる？

ペンギン先生

Hostingには静的サイト向けの無償枠があるけれど、製品ごとに枠や課金条件が違うよ。今回はビルド済みの静的ファイルだけを公開する。Next.jsのサーバー処理をそのまま置けるわけではないんだ。匿名認証の利用者はブラウザの保存データを消すと同じIDへ戻れない場合があるので、大事なデータにはアカウント連携も考えよう。

この入門で作るもの

ブラウザで匿名ログインし、自分だけのメモを保存・取得します。Firestoreはデータベース、Authenticationは本人の識別、Security Rulesはデータへの許可・拒否を担当します。サーバーの管理を任せられても、権限や料金の設計はアプリ側の仕事です。

クラウドのデータベースを全許可にする手順は使いません。 実データを扱わずにルールを試す場合は、公式のエミュレーター手順を使ってください。

1. コンソールで接続先を用意する

1. Firebaseコンソールで学習用プロジェクトを作成します。Analyticsの追加は任意です。
2. Webアプリを登録し、表示された firebaseConfig を控えます。
3. Authenticationのログイン方法で「匿名」を有効にします。
4. Firestore DatabaseでStandard editionのデータベースを作成します。この例は既定の (default) データベースを使います。利用地域を確認し、初期のSecurity Rulesは**本番環境モード（クライアントからの読み書きを拒否）**にします。
5. Firestoreの「ルール」を次の内容へ変更し、公開します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth != null
                         && request.auth.uid == userId;
    }
  }
}

この例で許可するのは /users/本人のUID という文書です。他人の文書や別のコレクションは許可しません。本番では許可するフィールド・値の検証、匿名アカウントの扱い、利用量の監視なども必要です。

Webアプリ用の firebaseConfig はクライアントが接続先を知るための情報で、隠すだけではデータを保護できません。サービスアカウントの秘密鍵やAdmin SDKの認証情報をブラウザへ置かないでください。

2. JavaScriptプロジェクトを作る

Node.js 22系の22.12以降、または24系などViteの対応環境を用意し、ターミナルで実行します。

npm create vite@latest firebase-first -- --template vanilla
cd firebase-first
npm install
npm install firebase

index.html のbodyを次のようにします。

<body>
  <label for="memo">自分のメモ</label>
  <input id="memo" value="こんにちは、Firebase！" />
  <button id="save" disabled>保存</button>
  <button id="load" disabled>取得</button>
  <p id="status" role="status">ログイン中…</p>
  <script type="module" src="/src/main.js"></script>
</body>

src/main.js を次の内容に置き換えます。設定情報はコンソールの自分のWebアプリの値へ変更してください。

import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously } from 'firebase/auth';
import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_WEB_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  appId: 'YOUR_WEB_APP_ID',
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const memo = document.querySelector('#memo');
const status = document.querySelector('#status');
const save = document.querySelector('#save');
const load = document.querySelector('#load');

async function start() {
  const { user } = await signInAnonymously(auth);
  const ownDoc = doc(db, 'users', user.uid);
  status.textContent = 'ログインできました。保存してから取得してみよう。';
  save.disabled = load.disabled = false;

  save.onclick = async () => {
    try {
      await setDoc(ownDoc, { memo: memo.value });
      status.textContent = '保存しました。';
    } catch (error) {
      status.textContent = '保存できませんでした: ' + error.code;
    }
  };
  load.onclick = async () => {
    try {
      const snapshot = await getDoc(ownDoc);
      status.textContent = snapshot.exists()
        ? '保存したメモ: ' + snapshot.data().memo
        : 'まだメモがありません。先に保存してください。';
    } catch (error) {
      status.textContent = '取得できませんでした: ' + error.code;
    }
  };
}
start().catch((error) => {
  status.textContent = 'ログインできませんでした: ' + error.code;
});

npm run dev で表示されたローカルURLを開きます。「ログインできました」と出たら保存し、入力欄を変えてから「取得」を押します。保存時のメモが表示されれば、認証→本人の文書への書き込み→読み取りがつながっています。 同じ文書への setDoc は、その文書の内容を置き換えます。

匿名認証は正式な会員登録の代わりではありません。ブラウザの保存データを消した場合や別端末では、以前のメモへアクセスするための同じUIDを引き継げない場合があります。継続利用ではメール等のアカウントとのリンクを検討します。

3. 静的サイトを公開する場合

保存・取得とルールを確認してから、必要ならHostingへ公開します。Firebase CLIを用意して同じディレクトリで実行します。

npm install -g firebase-tools
firebase login
npm run build
firebase init hosting
firebase deploy --only hosting

初期化では作成したプロジェクトを選び、公開ディレクトリを dist にします。この例は単一HTMLなのでSPA用の全URL書き換えは不要です。生成済みの dist/index.html を既定ページで上書きしないでください。今回はHostingだけを配信し、Firestoreルールは先にコンソールで公開しています。

Hostingに置くのはビルド成果物です。Next.jsなどのSSRは、静的エクスポートでよいのか、App Hosting等のサーバー実行が必要かを別途判断します。

つまずいたときに確認すること

権限エラーを解消するために全許可へ変更しないでください。別ユーザーの文書を拒否することも、ルールが働いている大事な結果です。

無料枠と次の一歩

2026年10月9日に確認したFirestore Standard editionの無償枠には、保存1 GiB、文書読み取り50,000回/日、書き込み20,000回/日などがあります。無償枠には対象データベースや機能の条件があり、リアルタイム監視も利用量へ影響します。Firebase全製品が無制限に無料という意味ではありません。公開前は公式の使用量と制限を確認してください。

次はJavaScript入門で非同期処理を確認し、画面を増やすならReact入門へ進めます。SQLのテーブルで考えたい場合はSupabaseとFirebaseの比較も参考になります。

参考資料

• FirebaseをJavaScriptプロジェクトへ追加する
• Firestore Standard editionの開始手順
• Firebase Security Rulesの基本と所有者別アクセス
• JavaScriptの匿名認証
• Firestoreのルールをエミュレーターでテストする
• Firebase Hostingの開始手順
• Firestoreの使用量と制限
• Viteの開始手順