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

「独学で始めたものの、何を次に学ぶべきかが見えず手が止まっている」——プログラミング学習で最も多い挫折ポイントです。 方向感のない学習は時間だけを消費し、現場で通用するスキルまで繋がりにくくなります。 この記事では、Firebase入門について、順序立てて学ぶロードマップを整理しました。

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

無料カウンセリングは30分〜1時間、しつこい勧誘なし。学習ロードマップの相談だけでも活用できます。

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など）には不向き
• 従量課金のため、アクセスが増えるとコストが上がる
• ベンダーロックインのリスクがある

今始めるか、もう少し準備してからか

プログラミング学習は、始めてから軌道に乗るまでに一定の時間がかかります。完璧な環境・完璧な教材を探している間に、早く始めた人は最初の実装を終え、次の壁にぶつかっています。 いきなりスクール契約をする必要はありません。ただし無料カウンセリングや無料体験で自分の学習スタイルに合うか確認しておくのは、選ぶ・選ばない以前の情報収集として有効です。多くのスクールで無料相談は30分〜1時間で完結します。

まとめ

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

あわせて読みたい

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