Webサービスは「データ保存・ログイン・ファイル・公開・処理」の5役がそろって初めて動きます。
この5つをひとまとめに提供するのが Firebase です。
Excelやスプレッドシートで手動管理するイメージ
| A列（学籍番号） | B列（氏名） | C列（学年） |
|---|---|---|
| S001 | 山田 太郎 | 1年 |
| S002 | 鈴木 花子 | 2年 |
| S003 | 田中 一郎 | 3年 |
1シートに全情報を並べる。
行が増えると管理が大変になる。
役割ごとにテーブル（シート）を分けて管理
| スプレッドシート用語 | データベース用語 |
|---|---|
| シート名 | テーブル |
| 行（1行分のデータ） | レコード |
| 列（項目名） | カラム |
| ファイル全体 | データベース |
テーブルを分けることで大量データでも
高速・正確に検索・更新できる。
ログイン・ログアウトを管理する仕組み。
「誰がアクセスしているか」を確認します。
| 日常 | Authenticationの役割 |
|---|---|
| 玄関の鍵を持っている | ログイン済みユーザー |
| 合鍵を作る | アカウント登録 |
| 鍵をなくした | パスワードリセット |
| 身分証明書の確認 | 本人確認（2段階認証） |
画像・動画・PDFなどのファイルを
クラウド上に保存する仕組みです。
| 日常 | Storageの役割 |
|---|---|
| Googleドライブへアップロード | ファイルの保存 |
| 共有リンクを発行 | URLで外部公開 |
| フォルダで整理 | パス（階層）管理 |
| 容量を増やす | ストレージ拡張 |
どちらもFirebaseが標準で提供しており、数行のコードで利用を開始できます。
Webサイトをインターネット上に公開する仕組み。
誰でもURLからアクセスできる状態にします。
| 日常 | Hostingの役割 |
|---|---|
| お店の外観・看板 | URLで表示される画面 |
| ショーケースに商品を並べる | HTMLファイルを公開 |
| 改装してリニューアル | デプロイ（更新） |
特定のタイミングで自動的に処理を実行する仕組み。
サーバーを用意せず、必要な時だけ動きます。
| 日常 | Functionsの役割 |
|---|---|
| 注文を受けて厨房に伝える | データ更新時の処理 |
| お客様へ確認メールを送る | 通知メール自動送信 |
| 閉店後の集計作業 | 定期バッチ処理 |
| サービス名 | 提供元 | 特徴 |
|---|---|---|
| Firebase Hosting | Firebase連携が強み。静的サイト向き | |
| Cloudflare Pages | Cloudflare | 高速CDN。独自ドメイン管理も簡単 |
| GitHub Pages | GitHub | 無料で手軽。ドキュメントサイトに最適 |
| Vercel | Vercel | Next.js開発元。動的サイトにも対応 |
GCP（Google Cloud Platform）は工場設備のような巨大インフラ。
FirebaseはGCPの上に載っている「すぐ使える道具箱」です。
大規模になればGCPの機能を直接使うこともありますが、
多くのアプリはFirebaseで十分対応できます。
| 特徴 | メリット |
|---|---|
| セットアップが簡単 | 数時間で環境構築完了 |
| 無料枠が充実 | 小規模なら費用ゼロ |
| 機能がひとまとめ | 複数サービスの管理不要 |
| Googleが運営 | 安定性・セキュリティ高 |
| サービス名 | 役割 | 利用シーン例 |
|---|---|---|
| Analytics | 利用状況の分析 | 「何人が使ったか」「どのページが人気か」を把握 |
| App Check | 不正アクセス防止 | 正規のアプリからのリクエストのみ許可 |
| Messaging (FCM) | プッシュ通知 | スマホへのお知らせ通知を送信 |
| App Hosting | 動的サイト公開 | Next.jsなど動的なWebアプリの公開 |
| 学籍番号 | 氏名 | 学年 | クラス |
|---|---|---|---|
| S001 | 山田 太郎 | 1年 | Aクラス |
| S002 | 鈴木 花子 | 2年 | Bクラス |
| S003 | 田中 一郎 | 3年 | Aクラス |
| 学籍番号 | 氏名 | 担任名 | 担任メール |
|---|---|---|---|
| S001 | 山田 太郎 | 佐藤 先生 | sato@school.jp |
| S002 | 鈴木 花子 | 佐藤 先生 | sato@school.jp |
| S003 | 田中 一郎 | 田村 先生 | tamura@school.jp |
担任情報が重複 → 変更時に全行を修正する必要がある
| 学籍番号 | 氏名 | 担任ID |
|---|---|---|
| S001 | 山田 太郎 | T01 |
| S002 | 鈴木 花子 | T01 |
| 担任ID | 担任名 | 担任メール |
|---|---|---|
| T01 | 佐藤 先生 | sato@school.jp |
テーブルを分割 → 担任変更は1箇所だけ修正すれば完了
Next.jsはWebサービスを作るための「枠組み（フレームワーク）」です。設計図や道具がひとまとめになっており、ゼロから作るより大幅に効率よく開発できます。
建物に例えると：ゼロから家を建てる代わりに「柱・床・屋根がそろったキット」を使うイメージ。
Next.jsを使うことで、設計の手間を省いてサービスの機能開発に集中できます。
あらかじめビルド（組み立て）したファイルをそのまま配信。ブラウザ側でJavaScriptが動くので、見た目や機能は動的サイトと変わらない。
| 仕組み | 説明 |
|---|---|
| 配信方式 | ビルド済みファイルをCDNから高速配信 |
| 処理の場所 | ブラウザ（ユーザーの端末） |
| Firebase連携 | SDK経由でログイン・DB操作も可能 |
| 作り方の例 | Studio等のCMSツール、手作りHTML |
サーバーがリクエストのたびにページを生成して返す。検索エンジン対策（SEO）やサーバー側での処理が必要な場合に使う。
| 仕組み | 説明 |
|---|---|
| 配信方式 | サーバーがリクエストごとにページを生成 |
| 処理の場所 | サーバー（Google Cloud上） |
| 向いている用途 | SEO重視のサービス、サーバー処理が必要な機能 |
| 開発フレームワーク | Next.js（サーバーサイドレンダリング） |
静的サイト：ブラウザだけで完結する → Firebase Hosting（多くのWebサービスはこれでOK）
動的サイト：サーバー側の処理が必要 → Firebase App Hosting（SEO・サーバー処理が重要な場合）
見た目や機能の違いではなく、"処理をどこでやるか" がポイントです。
PC でご覧ください
このスライドはPC画面（横向き）での閲覧を推奨しています。