【2026年版】Firebaseの始め方 — プロジェクト作成からリアルタイムDBまで完全ガイド


Firebaseの主要サービス構成 Web アプリ Mobile アプリ Firebase Firestore DB NoSQL ドキュメント型 Authentication メール/Google/GitHub Hosting 静的サイト / SPA Cloud Functions サーバーレス実行 Security Rules でアクセス制御 response Google が管理するバックエンドインフラ — 自前サーバー不要
Firebaseの主要サービス構成
🎚 難易度 ★☆☆ 初心者向け
⏱ 学習時間の目安 読むだけ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(従量課金)プランにアップグレードが必要です。

ひよこ ひよこ

Firebaseってよく聞くけど、何ができるものなの?AWSとは違うの?

ペンギン先生 ペンギン先生

FirebaseGoogleが提供するBaaS(Backend as a Service)で、バックエンドのインフラを自分で構築せずにアプリが作れるサービスだよ。データベースFirestore)・認証(Authentication)・ホスティング・クラウド関数などが揃っていて、特にスタートアップや個人開発者に人気があるんだ。AWSはより低レイヤーな設定が必要だけど、Firebaseダッシュボードから数クリックで始められるのが特徴だよ。

ひよこ ひよこ

数クリックで始められるのは魅力的!まず何から始めればいいの?

ペンギン先生 ペンギン先生

まずconsole.firebase.google.comでGoogleアカウントを使ってプロジェクトを作るよ。「プロジェクトを追加」からプロジェクト名を入力して、Google Analyticsの設定を選んで数分待てば完成だよ。次にWebアプリを追加してSDKの設定情報(apiKey・authDomainなど)をコピーしておこう。あとは「npm install firebase」でSDKインストールすれば準備完了だよ。

ペンギン先生 ペンギン先生

ここで実際にFirebaseコンソールを開いてみてね。console.firebase.google.comにアクセスして「プロジェクトを追加」を押してみよう。プロジェクト名を入力してCreateを押せば2〜3分でFirebaseプロジェクトが作成されるよ!(試してみて)

ひよこ ひよこ

Firestoreってどんなデータベースなの?MySQLとは違うの?

ペンギン先生 ペンギン先生

FirestoreNoSQLドキュメントデータベースだよ。MySQLのようなテーブル・カラム構造ではなく、JSONライクな「ドキュメント」を「コレクション」に入れる形式なんだ。たとえば「users」コレクションに「ユーザーごとのドキュメント(id・name・emailなどのフィールド)」を保存するイメージだよ。リアルタイムリスナーでデータの変更を即座に検知できるのも大きな特徴で、チャットアプリなどに向いてるんだ。

ひよこ ひよこ

リアルタイムって便利そう!JavaScriptからどうやって使うの?

ペンギン先生 ペンギン先生

SDKを使えばシンプルに書けるよ。「import { getFirestore, collection, addDoc, getDocs } from 'firebase/firestore'」でインポートして、「addDoc(collection(db, 'users'), {name: 'ひよこ'})」でドキュメントを追加できるんだ。取得は「getDocs(collection(db, 'users'))」でコレクションの全件を取れるよ。リアルタイム更新は「onSnapshot」で変更を監視できるんだ。

ひよこ ひよこ

認証機能はどうやって使うの?ゼロから実装するのは大変そうで…

ペンギン先生 ペンギン先生

Firebase Authenticationを使えば認証機能をほぼゼロから実装しなくてよくなるよ!コンソールのAuthenticationセクションで「メール/パスワード」「Google」「GitHub」などのプロバイダーを有効にするだけで、「createUserWithEmailAndPassword」「signInWithEmailAndPassword」「signInWithPopup」などの関数が使えるようになるんだ。JWTトークンの管理も全部Firebaseがやってくれるよ。

ひよこ ひよこ

セキュリティは大丈夫なの?誰でもデータにアクセスできそうで不安…

ペンギン先生 ペンギン先生

Security Rulesという仕組みで細かくアクセス制御できるよ。「認証済みユーザーのみ読み書き可能」「自分のドキュメントのみ更新可能」といったルールをFirebaseコンソールやファイルで設定できるんだ。最初のうちはテストモード(全アクセス許可)でも大丈夫だけど、本番リリース前には必ずルールを設定してね。「rules_version = '2'」で始まるFirestoreルールの書き方を覚えておくといいよ。

ひよこ ひよこ

HostingってVercelみたいにWebサイトを公開できるの?

ペンギン先生 ペンギン先生

そうだよ!Firebase Hostingを使えば静的サイトやSPAを無料でホスティングできるよ。「npm install -g firebase-tools」でCLIをインストールして、「firebase login」→「firebase init hosting」→「firebase deploy」の3ステップで公開できるんだ。独自ドメインも無料で設定できるし、SSL証明書も自動で発行されるよ。ReactVueNext.jsのビルド成果物もそのままデプロイできるんだ。

ひよこ ひよこ

SupabaseFirebaseはどちらがいいの?

ペンギン先生 ペンギン先生

どちらもBaaSで似たことができるけど、大きな違いがあるよ。FirebaseNoSQLFirestore)でリアルタイム機能が強力で、Googleエコシステムと相性がいい。SupabasePostgreSQLベースなのでSQLを使いたい人・既存のリレーショナルDB知識を活かしたい人向けだよ。個人開発や小中規模のアプリなら両方試してみて、使いやすい方を選ぶのがおすすめだね。

次に学ぶなら