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年 |
| S002 | 鈴木 花子 | 2年 |
| S003 | 田中 一郎 | 3年 |
| 特徴 |
|---|
| 行と列で整理し、SQLで操作する |
| 銀行・基幹システム・業務システム向き |
| データの整合性を厳密に保てる |
コレクション > ドキュメント > フィールドの階層構造
| 階層 | 内容 |
|---|---|
| コレクション | students（フォルダ） |
| ドキュメント | S001（1人分のメモ） |
| フィールド | name: "山田 太郎", grade: 1 |
| 特徴 |
|---|
| ドキュメントごとに項目を変えられる柔軟な構造 |
| リアルタイム同期対応。Webアプリ・モバイル向き |
| SQLなしでシンプルなコードで操作できる |
正規化とは、データの重複をなくしてテーブルを分ける設計手法です。「同じ情報は1箇所だけに持つ」のが原則です。
| 学籍番号 | 氏名 | 担任名 | 担任メール |
|---|---|---|---|
| S001 | 山田 太郎 | 佐藤 先生 | sato@school.jp |
| S002 | 鈴木 花子 | 佐藤 先生 | sato@school.jp |
| S003 | 田中 一郎 | 田村 先生 | tamura@school.jp |
担任情報が重複 → 佐藤先生のメールが変わったら全行を修正する必要がある
| 学籍番号 | 氏名 | 担任ID |
|---|---|---|
| S001 | 山田 太郎 | T01 |
| S002 | 鈴木 花子 | T01 |
| 担任ID | 担任名 | 担任メール |
|---|---|---|
| T01 | 佐藤 先生 | sato@school.jp |
| T02 | 田村 先生 | tamura@school.jp |
担任変更は担任テーブルの1箇所だけ修正すれば完了
以下のテーブルにはどんな問題がありますか？
| 注文ID | 商品名 | 顧客名 | 顧客住所 |
|---|---|---|---|
| 001 | ノートPC | 山田 太郎 | 東京都渋谷区1-1 |
| 002 | マウス | 山田 太郎 | 東京都渋谷区1-1 |
| 003 | キーボード | 鈴木 花子 | 大阪府大阪市2-3 |
山田太郎さんが引っ越したら？ → 顧客情報が重複しているため、全行を修正する必要があります。顧客テーブルを分けましょう。
| 口座番号 | 氏名 | 支店名 | 支店住所 | 残高 |
|---|---|---|---|---|
| A001 | 山田 太郎 | 渋谷支店 | 東京都渋谷区3-5 | ¥150,000 |
| A002 | 鈴木 花子 | 渋谷支店 | 東京都渋谷区3-5 | ¥320,000 |
| A003 | 田中 一郎 | 新宿支店 | 東京都新宿区1-2 | ¥80,000 |
渋谷支店が移転したら？ → 支店情報が重複しています。支店テーブル（支店ID・支店名・支店住所）を分離し、口座テーブルには支店IDだけ持たせましょう。
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・サーバー処理が重要な場合）
見た目や機能の違いではなく、"処理をどこでやるか" がポイントです。
CLAUDE.md は AIコーディングツール（Claude Code）にプロジェクトのルールを教える設定ファイル です。
新しいバイトが入ったらまずマニュアルを渡しますよね。AIも同じで、プロジェクトのルールをあらかじめ教えておく必要があります。CLAUDE.md がそのマニュアルの役割を担います。
CLAUDE.md = AIに渡す業務マニュアル。プロジェクトごとに用意することで、AIが的確にコードを書けるようになります。
・AIは毎回ゼロから質問が必要
・プロジェクトのルールを知らない
・一貫性のないコードが生成される
・AIがプロジェクトを初めから理解
・ルールに沿ったコードを自動生成
・チームの一員のように動く
| 項目 | 記載例 |
|---|---|
| プロジェクト概要 | 「学校向け出席管理アプリ。Firebase + Next.js」 |
| 技術スタック | 「TypeScript, Next.js 15, Firestore, Tailwind CSS」 |
| ディレクトリ構成 | 「src/app/ にページ、src/lib/ にユーティリティ」 |
| コーディング規約 | 「関数コンポーネントを使用、日本語コメント推奨」 |
| ビルド・テスト手順 | 「npm run build でビルド、npm test でテスト実行」 |
ファイルをクラウドに保存・共有するサービス。ドキュメントや画像を手軽に管理できます。
| 特徴 | 内容 |
|---|---|
| 保存対象 | あらゆるファイル（文書・画像・動画等） |
| 共同編集 | 同時編集が可能 |
| 履歴管理 | 変更履歴は残るが比較が難しい |
| 用途 | ドキュメント共有・ファイル管理 |
ソースコードの変更履歴を管理・共有するサービス。「誰が・いつ・何を・なぜ変えたか」を追跡できます。
| 特徴 | 内容 |
|---|---|
| 保存対象 | ソースコード（プログラム）が中心 |
| 共同編集 | ブランチで各自が独立して作業 |
| 履歴管理 | 全変更を行単位で記録・比較できる |
| 用途 | コードのバージョン管理・コードレビュー |
Google Driveは「最新のファイルをみんなで共有」するのが得意。GitHubは「コードの変更履歴を厳密に管理し、チームで安全に開発する」ための仕組みです。
| 操作 | たとえ |
|---|---|
| Clone | 会社の資料フォルダを初日にまるごとコピー |
| Pull | 朝出社したら共有フォルダの最新版を確認 |
| Push | 自分の作業結果を共有フォルダにアップロード |
| 情報 | 保存場所 |
|---|---|
| 提案資料 | Google Drive |
| 会議の議事録 | メール / ドキュメント |
| チャットのやりとり | Slack / Chatwork |
| ソースコード | GitHub |
情報が分散 → 引き継ぎ時に「あの資料どこ？」「この判断の経緯は？」が頻発
| 情報 | 保存場所 |
|---|---|
| 提案資料 | GitHub リポジトリ |
| 会議の文字起こし | GitHub リポジトリ |
| 議事録 | GitHub リポジトリ |
| チャットログ | GitHub リポジトリ |
| ソースコード | GitHub リポジトリ |
すべてが1箇所に → 引き継ぎも検索も一発で完了
プロジェクトに関わるすべての情報が1つのリポジトリに集約されるため、「あの資料どこだっけ？」「この仕様の経緯は？」といった情報の抜け漏れが根本的になくなります。営業・企画・開発のすべてのフェーズが途切れなく繋がります。
PC でご覧ください
このスライドはPC画面（横向き）での閲覧を推奨しています。