【2026年版】Firebaseの始め方 — プロジェクト作成からリアルタイムDBまで完全ガイド
🎚 難易度 ★☆☆ 初心者向け
⏱ 学習時間の目安 読むだけ10分、プロジェクト作成〜データ取得まで30分
📚 前提知識 javascript-getting-started の基礎知識
✅ このガイドで学べること
- Firebaseプロジェクトの作成と初期設定
- Firestoreの基本的なCRUD操作
- Firebase Authenticationの設定
- Firebase Hostingへのデプロイ
セットアップ手順
# Firebase CLIのインストール
npm install -g firebase-tools
# ログイン
firebase login
# プロジェクトの初期化(Hostingの場合)
firebase init hosting
# デプロイ
firebase deploy
JavaScriptクライアントの基本操作
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc, getDocs, onSnapshot } from 'firebase/firestore';
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';
const app = initializeApp(firebaseConfig); // コンソールから取得した設定
const db = getFirestore(app);
const auth = getAuth(app);
// データ追加
await addDoc(collection(db, 'users'), { name: 'ひよこ', createdAt: new Date() });
// データ取得
const snapshot = await getDocs(collection(db, 'users'));
snapshot.forEach(doc => console.log(doc.id, doc.data()));
// リアルタイム監視
onSnapshot(collection(db, 'messages'), (snapshot) => {
snapshot.docChanges().forEach(change => console.log(change.type, change.doc.data()));
});
// 認証(新規登録)
await createUserWithEmailAndPassword(auth, 'user@example.com', 'password');
よくある詰まりポイント
Q: permission-denied エラーが出る
→ Firestoreのセキュリティルールで読み書きが拒否されています。開発中は一時的にテストモード(全許可)に設定しましょう。本番前には必ず適切なルールを設定してください。
Q: リアルタイム更新が重複して表示される
→ onSnapshot のリスナーをコンポーネントのアンマウント時に解除し忘れていることが原因です。Reactなら useEffect の return で unsubscribe() を呼ぶのを忘れずに。
Q: 無料枠(Sparkプラン)はどこまで使える? → Firestoreは50,000読み取り/日、20,000書き込み/日、1GB ストレージが無料です。個人開発・学習では十分です。超えたらBlaze(従量課金)プランにアップグレードが必要です。
数クリックで始められるのは魅力的!まず何から始めればいいの?
リアルタイムって便利そう!JavaScriptからどうやって使うの?
認証機能はどうやって使うの?ゼロから実装するのは大変そうで…
セキュリティは大丈夫なの?誰でもデータにアクセスできそうで不安…
HostingってVercelみたいにWebサイトを公開できるの?