導入
「個人でアプリを作ってみたいけれど、サーバー構築やインフラ管理は難しそう」と感じていませんか。バックエンドの実装、データベースの設計、認証の仕組み、デプロイの設定。これらをすべて自前で構築するのは初心者には大きな壁です。そこで役立つのがFirebaseとClaudeCodeの組み合わせです。Firebaseはサーバー管理が不要なBaaS（Backend as a Service）で、認証・データベース・ストレージ・ホスティングがすべて揃っています。ClaudeCodeに指示すれば、その複雑な設定や実装も会話ベースで進められます。本記事では、Firebaseの基礎から、認証・Firestore・Storage・Hostingの活用、デプロイまでを一気通貫で解説します。
結論
ClaudeCodeとFirebaseを組み合わせれば、サーバーを一切管理せずに「ログイン機能つきWebアプリ」をたった数時間で公開できます。Firebaseは無料枠が充実しており、個人開発や検証用なら月額0円で動かせるのが大きな魅力です。ClaudeCodeはFirebaseの公式SDKの使い方を熟知しており、firebase initからfirebase deployまでを順序立てて指示してくれます。具体的には、Firebase Authenticationでメール認証やGoogleログインを実装し、Firestoreでリアルタイムデータベースを構築し、Storageで画像ファイルを保存し、Hostingで静的サイトを公開できます。本記事を読めば、初心者でも「ToDoアプリ」や「写真投稿アプリ」レベルのプロダクトをゼロから作って公開できるようになります。重要なのは、APIキーや設定値を環境変数で管理すること、セキュリティルールを正しく書くこと、そしてClaudeCodeに「やりたいこと」を明確に伝えることです。これらを守ればトラブルを避けられます。
Firebaseとは何か
Firebaseとは、Googleが提供するBaaS（Backend as a Service）です。アプリ開発に必要な機能、つまり認証・データベース・ストレージ・サーバーホスティング・プッシュ通知・解析などをすべてクラウド上のサービスとして提供します。開発者はサーバーを購入したり、OSをアップデートしたり、データベースをバックアップしたりする必要がありません。Firebaseのコンソール画面でボタンを押すだけで、世界中からアクセス可能な環境がすぐに整います。
Firebaseが特に初心者に向いている理由は3つあります。第一に、無料枠（Sparkプラン）が非常に寛大で、Firestoreの読み取り5万回/日、書き込み2万回/日、ストレージ5GBまで無料で使えます。第二に、SDKがJavaScript・Python・iOS・Androidなど主要な言語に対応しており、ドキュメントも豊富です。第三に、Googleアカウントがあればすぐに始められます。
ClaudeCodeとの相性が良い理由は、Firebaseの設定がコード（firebase.json、firestore.rulesなど）で管理できる点にあります。ClaudeCodeはこれらのファイルを生成・修正するのが得意なので、コンソール画面を行き来しなくても多くの操作が完結します。
ClaudeCodeでFirebaseプロジェクトを始める準備
最初の準備は3ステップです。Googleアカウントの用意、Firebaseコンソールでのプロジェクト作成、そしてFirebase CLIのインストールです。
まずはFirebase Consoleにアクセスし、「プロジェクトを追加」をクリックします。プロジェクト名（例: my-first-app）を入力し、Google Analyticsは個人開発なら無効でも構いません。プロジェクト作成後、Web版アプリ（</>アイコン）を登録します。すると以下のような設定情報（Firebase Config）が表示されます。
const firebaseConfig = {
apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "my-first-app.firebaseapp.com",
projectId: "my-first-app",
storageBucket: "my-first-app.appspot.com",
messagingSenderId: "123456789",
appId: "1:123456789:web:abcdef"
};
この情報は環境変数に保存します。クライアント側のFirebase ConfigはGitHubで公開されても問題ない設計ですが、念のため.env.localに格納するのが推奨です。
次にFirebase CLIをインストールします。ClaudeCodeに以下のように指示しましょう。
プロンプト例1: 初期セットアップ
Node.jsプロジェクトのルートで、Firebase CLIをインストールして、Firebaseプロジェクトを初期化したいです。
プロジェクトID は my-first-app です。
Hosting、Firestore、Authentication、Storage の4つを有効にしてください。
手順を順番に教えてください。
ClaudeCodeは以下のようなコマンドを順に提示します。
npm install -g firebase-tools
firebase login
firebase init
firebase initの対話では矢印キーでHosting、Firestore、Storageを選択します。ClaudeCodeはこれらの選択肢の意味も同時に説明してくれるので、迷わず進められます。
Firebase Authenticationで認証を実装する
認証はアプリの根幹です。Firebase Authenticationを使えば、メール認証、Googleログイン、電話番号認証など主要な認証方式をコード数行で実装できます。まずはFirebaseコンソールの「Authentication」→「Sign-in method」で、使用したい認証方式を有効化します。
ClaudeCodeに具体的に依頼してみましょう。
プロンプト例2: メール認証の実装
Next.js（App Router）のプロジェクトで、Firebase Authentication を使ったメール+パスワード認証を実装してください。
要件:
- /signup ページで新規登録
- /login ページでログイン
- ログイン後 /dashboard にリダイレクト
- /dashboard は未ログインだとアクセス不可
Firebase Config は .env.local の NEXT_PUBLIC_FIREBASE_* に格納済みです。
ClaudeCodeが生成する典型的な実装は以下の通りです。
// lib/firebase.ts
import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
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 app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
export const auth = getAuth(app);
// app/signup/page.tsx
"use client";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "@/lib/firebase";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function SignUpPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const router = useRouter();
const handleSignUp = async () => {
try {
await createUserWithEmailAndPassword(auth, email, password);
router.push("/dashboard");
} catch (err) {
console.error(err);
alert("登録に失敗しました");
}
};
return (
<div>
<input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="メール" />
<input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="パスワード" />
<button onClick={handleSignUp}>登録</button>
</div>
);
}
Googleログインに切り替えたい場合は、GoogleAuthProviderとsignInWithPopupを使います。ClaudeCodeに「Googleログインも追加して」と頼めば、わずか数行の追加コードを示してくれます。
Firestoreでデータを保存・取得する
Firestoreはドキュメント指向型のNoSQLデータベースです。RDBのようにテーブル定義をする必要がなく、JSONライクな構造でデータを保存できます。リアルタイム同期機能があり、複数ユーザーの操作が即座に反映されます。
データはコレクションとドキュメントの階層で管理します。たとえばusers/{userId}/todos/{todoId}という構造で、各ユーザーが自分のToDoリストを持つ設計が可能です。
プロンプト例3: ToDoアプリのFirestore連携
Firestore を使った ToDo アプリを実装してください。
要件:
- ログイン中ユーザー専用のコレクション users/{uid}/todos に保存
- title (文字列)、done (真偽値)、createdAt (タイムスタンプ) を持つ
- 追加・一覧・完了切り替え・削除ができる
- onSnapshot でリアルタイム反映
- React + TypeScript
ClaudeCodeは以下のようなコードを返してくれます。
import { getFirestore, collection, addDoc, onSnapshot, doc, updateDoc, deleteDoc, query, orderBy, serverTimestamp } from "firebase/firestore";
import { app, auth } from "@/lib/firebase";
export const db = getFirestore(app);
export const addTodo = async (title: string) => {
const uid = auth.currentUser?.uid;
if (!uid) return;
await addDoc(collection(db, "users", uid, "todos"), {
title,
done: false,
createdAt: serverTimestamp(),
});
};
export const subscribeTodos = (callback: (todos: any[]) => void) => {
const uid = auth.currentUser?.uid;
if (!uid) return () => {};
const q = query(collection(db, "users", uid, "todos"), orderBy("createdAt", "desc"));
return onSnapshot(q, (snap) => {
callback(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
});
};
ここで重要なのがセキュリティルールです。Firestoreはデフォルトで全公開／全拒否のいずれかになっており、適切なルールを書かないと他人のデータを読み書きできてしまいます。firestore.rulesにルールを記述します。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId}/todos/{todoId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}
これで「自分のuidに一致するパスのみ読み書き可能」になります。ClaudeCodeに「Firestoreセキュリティルールも書いて」と依頼すれば、要件に応じたルールを生成してくれます。
Firebase Storageでファイルをアップロードする
画像やPDFなどのバイナリファイルはFirestoreには適していません。代わりにFirebase Storageを使います。Storageは内部的にGoogle Cloud Storage上に構築されており、5GBまで無料で使えます。
プロンプト例4: 画像アップロード機能
Firebase Storage を使った画像アップロード機能を実装してください。
要件:
- ユーザーごとに users/{uid}/avatars/ 配下に保存
- アップロード後、ダウンロードURLを取得して Firestore の users/{uid} ドキュメントに保存
- ファイルサイズ 5MB を超えたらエラー表示
実装は次のようになります。
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { doc, setDoc } from "firebase/firestore";
import { app, auth } from "@/lib/firebase";
import { db } from "./db";
const storage = getStorage(app);
export const uploadAvatar = async (file: File) => {
if (file.size > 5 * 1024 * 1024) throw new Error("ファイルが大きすぎます");
const uid = auth.currentUser?.uid;
if (!uid) throw new Error("未ログイン");
const path = `users/${uid}/avatars/${file.name}`;
const storageRef = ref(storage, path);
await uploadBytes(storageRef, file);
const url = await getDownloadURL(storageRef);
await setDoc(doc(db, "users", uid), { avatarUrl: url }, { merge: true });
return url;
};
Storageにもセキュリティルールがあります。storage.rulesに以下のように記述します。
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /users/{userId}/avatars/{fileName} {
allow read: if true;
allow write: if request.auth != null && request.auth.uid == userId
&& request.resource.size < 5 * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
}
}
このルールは「画像のみ・5MB未満・本人のみ書き込み可能」を意味します。読み取りは全公開なので、プロフィール画像の表示が誰からでも可能です。アクセス制御を厳しくしたいならallow read: if request.auth != null;に変更しましょう。
Firebase Hostingで静的サイトをデプロイする
Firebase HostingはCDN付きの静的サイトホスティングです。Next.jsのSSGビルドや、Reactのビルド成果物をそのままアップロードできます。HTTPS対応、独自ドメイン設定、ロールバックなどがすべて無料です。
firebase.jsonのhostingセクションには次のような設定を書きます。
{
"hosting": {
"public": "out",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{ "source": "**", "destination": "/index.html" }
]
}
}
publicには静的ファイルが出力されるフォルダを指定します。Next.jsでnext build && next exportを実行した場合はoutになります。
デプロイは以下のコマンドだけです。
npm run build
firebase deploy --only hosting
実行後、https://my-first-app.web.appのようなURLが発行され、世界中からアクセスできるようになります。
プロンプト例5: デプロイ自動化
GitHub Actions で main ブランチに push したら自動的に Firebase Hosting にデプロイする
ワークフローを書いてください。
Firebase のサービスアカウント JSON は GitHub Secrets の FIREBASE_SERVICE_ACCOUNT に格納します。
ClaudeCodeは.github/workflows/deploy.ymlを生成してくれます。FirebaseExtended/action-hosting-deployを使う形が一般的です。
サーバー側のFirebase Admin SDKを使う
Next.jsのAPIルートやCloud Functionsで「サーバー側からFirestoreを操作したい」「メール送信時にユーザーを取得したい」といった場面では、Firebase Admin SDKを使います。クライアントSDKと違い、セキュリティルールを完全にバイパスできる強力な権限を持つため、必ずサーバー側でのみ利用します。
// lib/firebaseAdmin.ts
import { initializeApp, getApps, cert } from "firebase-admin/app";
import { getFirestore } from "firebase-admin/firestore";
const app = getApps().length === 0
? initializeApp({
credential: cert({
projectId: process.env.FIREBASE_PROJECT_ID,
clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
}),
})
: getApps()[0];
export const adminDb = getFirestore(app);
FIREBASE_PRIVATE_KEYは秘密鍵そのものなので、絶対にGitHubにコミットしないでください。VercelやCloud RunのSecretsに登録します。ClaudeCodeに依頼するときも、「サーバー側のキーは環境変数で扱って」と明示するとミスを防げます。
実践チュートリアル: 1時間で作る写真共有アプリ
ここまでの内容を組み合わせて、ログイン制の写真共有アプリを作ってみます。
ステップ1. Next.jsプロジェクト作成
npx create-next-app@latest photo-share --typescript --app
cd photo-share
npm install firebase
ステップ2. Firebase初期化
firebase login
firebase init
Hosting、Firestore、Storageを有効化します。
ステップ3. ClaudeCodeに統合実装を依頼
photo-share アプリを実装してください。
- Firebase Authentication（Google ログイン）
- /upload で画像をアップロードして Storage に保存
- アップロードした画像情報を Firestore の photos コレクションに保存（uid, url, caption, createdAt）
- /feed で全ユーザーの投稿を新しい順に一覧表示
- セキュリティルールも生成
- Firebase Config は NEXT_PUBLIC_FIREBASE_* で読み込み
- TypeScript + App Router
ステップ4. 動作確認後、デプロイ
npm run build
firebase deploy
これで世界中からアクセス可能な写真共有アプリが完成します。1時間で動くものを作るのが目標です。
FAQ
Q1. Firebaseは本当に無料で使えますか? A. はい。Sparkプランなら個人開発レベルなら無料で十分です。Firestoreの読み書き、Storage 5GB、Hosting 10GBまで完全無料です。月のアクセスが数千〜数万程度の趣味アプリなら課金は発生しません。ただし、Cloud Functions（Node.jsで関数を動かす機能）は2024年以降、Blazeプラン（従量課金）への登録が必須になっています。
Q2. APIキーをGitHubに公開しても大丈夫ですか? A. クライアント側のFirebase Config（apiKeyを含む）は、設計上公開されても問題ない仕様です。ただしFirestoreやStorageのセキュリティルールが甘いと、そのキーから不正にデータを読み書きされる可能性があります。セキュリティルールを必ず適切に書いてください。一方で、Admin SDKのサービスアカウントJSONは絶対に公開してはいけません。
Q3. Cloudflare Workers と Firebase はどちらが良いですか? A. 認証・データベース・ストレージ・ホスティングを一括で揃えたいならFirebaseが手早いです。エッジでの高速処理や柔軟なルーティングを重視するならCloudflare Workersが向いています。両者は組み合わせて使うこともできます（例: Workersで処理、Firestoreでデータ保存）。
Q4. Firestoreのデータ設計はRDBと何が違いますか?
A. JOINがない代わりに、必要なデータを1つのドキュメント内に持つ「非正規化」が基本です。たとえば投稿に著者名を表示するなら、投稿ドキュメント内にauthorNameを直接保存します。ClaudeCodeに「Firestore向けのスキーマを設計して」と頼むと、適切な構造を提案してくれます。
Q5. デプロイ後にエラーが出たらどう調べますか? A. Firebaseコンソールの「Hosting」→「リリース」で過去のリリースを確認し、ロールバックできます。また、ブラウザの開発者ツールでConsoleエラーを確認し、ClaudeCodeにそのエラーメッセージを貼り付けて相談すれば、原因と修正方法をすぐに教えてくれます。
Q6. ローカルでFirebaseの動作を試したいのですが?
A. Firebase Emulator Suiteを使います。firebase emulators:startでFirestore・Auth・Storage・Hostingをローカルでシミュレートできます。本番データを汚さずに開発できるため、必ず開発初期から導入しましょう。
Q7. ClaudeCodeでFirebaseの設定ミスをどう防げますか?
A. プロンプトで「セキュリティルールも一緒に書いて」「環境変数で管理して」「サービスアカウントは絶対にコミットしないで」と明示することです。また、.gitignoreに*.jsonの中でもサービスアカウント関連を必ず追加してもらいましょう。
まとめ
ClaudeCodeとFirebaseを組み合わせれば、認証付きWebアプリをサーバー管理ゼロで構築できます。Firebase Authenticationで認証、Firestoreでリアルタイムデータベース、Storageでファイル保存、Hostingで世界配信、すべて1つのコンソールで完結します。重要なポイントは、セキュリティルールを必ず書くこと、サーバー側のキーは環境変数で管理すること、Emulator Suiteで動作検証することの3点です。最初の1本を作り終えれば、2本目以降はテンプレートの再利用で大幅にスピードアップします。ClaudeCodeに「やりたいこと」を明確に伝え、生成されたコードのセキュリティ部分は必ず自分で目を通す習慣をつけましょう。