Firebase入門｜認証・データベース・ホスティングを一気に学ぶ

関連記事：Web開発の技術マップ

Firebaseは、Googleが提供するBaaS（Backend as a Service）です。認証、データベース、ホスティング、ストレージなどのバックエンド機能をすぐに使えるため、個人開発やプロトタイピングで広く利用されています。

Firebaseの主要サービス

セットアップ

npm install firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project',
};

const app = initializeApp(firebaseConfig);

Authentication（認証）

メール・パスワード認証やGoogleログインを簡単に実装できます。

Node.js入門も参考にしてください。

import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';

const auth = getAuth();

// ユーザー登録
async function signUp(email, password) {
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  return userCredential.user;
}

// ログイン
async function signIn(email, password) {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  return userCredential.user;
}

Googleログイン

import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';

async function signInWithGoogle() {

[Flutter入門](/articles/flutter-nyumon)も参考にしてください。

  const provider = new GoogleAuthProvider();
  const result = await signInWithPopup(auth, provider);
  return result.user;
}

Cloud Firestore（データベース）

ドキュメント指向のNoSQLデータベースです。

import { getFirestore, collection, addDoc, getDocs, query, where } from 'firebase/firestore';

const db = getFirestore();

// データの追加
async function addPost(title, content) {
  await addDoc(collection(db, 'posts'), {
    title,
    content,
    createdAt: new Date(),
  });
}

// データの取得
async function getPosts() {
  const snapshot = await getDocs(collection(db, 'posts'));
  return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
}

// 条件付き取得
async function getPublishedPosts() {
  const q = query(collection(db, 'posts'), where('published', '==', true));
  const snapshot = await getDocs(q);
  return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
}

Hosting（ホスティング）

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

ビルド済みの静的ファイルを即座にデプロイできます。SSL証明書も自動で発行されます。

Supabase入門も参考にしてください。

Firebaseの料金体系

無料枠（Sparkプラン）でもかなりの範囲をカバーできます。

個人開発やプロトタイプ段階では、無料枠で十分対応できるケースが多いです。

Firebaseが向いている場面

• 個人開発やハッカソンでの素早い立ち上げ
• 認証機能を手軽に実装したい場合
• リアルタイム機能が必要なアプリ
• バックエンド開発の経験が浅い方の学習

Firebaseの注意点

• 複雑なクエリ（JOINなど）には不向き
• 従量課金のため、アクセスが増えるとコストが上がる
• ベンダーロックインのリスクがある

まとめ

Firebaseは「バックエンドを自分で構築する前に、まず動くものを作りたい」という場面で非常に有効です。認証とFirestoreの基本操作を覚えれば、個人開発の幅が大きく広がります。

あわせて読みたい

• Web開発の技術マップ｜フロントからインフラまで全体像を把握する
• JavaScript入門ガイド
• React Hooks入門ガイド
• Webアプリ ポートフォリオ作成ガイド