先日Firebaseを使う機会があったので、その概要をまとめました。

今回の内容は 前編・後編の2部構成です。

ぜひ最後までご覧ください！

Firebaseとは?
機能について
実際に使ってみる
まとめ
おわりに

Firebaseとは?

Firebase は Google が提供するアプリ開発プラットフォームです。バックエンドの処理を自動で担ってくれるため、フロントエンドの開発に集中できます。

これにより、サーバー構築や API 管理の負担を大幅に減らし、効率的なアプリ開発が可能になります。

さらに Firebase は進化を続けています。

2025年4月に発表された「Firebase Studio」は、プログラミング初心者でも AI に「どんなアプリを作りたいか」を伝えるだけで、コードを書かずにアプリを開発できる革新的なツールです。

機能について

Firebaseの基本的な機能として以下があげられます。

データベース
GoogleやApple、電話番号認証などの認証機能（Firebase Authentication）
プッシュ通知（Cloud Functions for Firebase）
分析（Google Analytics）
クラッシュレポートの収集（Firebase Crashlytics）
Webアプリを公開する（Firebase Hosting）

など様々な機能があります。

実際に使ってみる

今回は簡単なToDoアプリを作成します。Firebaseを使ったのは以下の機能です。

データベース（Firestore Databese）
認証機能（Authentication）
レベル機能（Remote Config）

フロント側はReact×TypeScriptで作成しました。ログインすると画面の下部分にやること一覧が表示されるイメージです。

では早速Firebaseを使ってみましょう。まずFirebaseコンソールにアクセスします。

Firebaseコンソール

私は何度か利用したことがあるため、アクセスするとこんな画面が出てきます。

「新しいFirebaseプロジェクトを作成」を押してプロジェクトを作成します。

今回はTechBlogに載せるToDoアプリということでToDo-TechBlogという名前にしました。

プロジェクト作成後、「プロジェクトの設定」→「マイアプリ」から Web アプリを追加し、Firebase とフロントエンドを連携させます。

SDK の設定と構成に表示される手順に従うことで、簡単に連携が完了します。

次にデータベースの構築を行います。

「構築」→「Cloud Firestore」を選択し、「データベースの作成」をクリックします。

今回は以下の設定で作成しました。

エディション：Standard
ロケーション：asia-northeast1（Tokyo）
モード：本番環境

これでデータベースの作成は完了です。

認証機能とデータベースの実装については、以下の公式ドキュメントを参考にしました。

他にも様々な機能の実装方法について書かれているためFirebaseを使う際には必読です。

出典：Firebase ドキュメントより（Creative Commons Attribution 4.0 ライセンス）

JavaScript による Google を使用した認証 | Firebase Authentication

Cloud Firestore を使ってみる | Firebase

続いて、認証機能のセットアップを行います。

「構築」→「Authentication」を選択し、「始める」をクリックします。

今回はGoogle 認証を使用するのでGoogle を選択し、プロジェクトのサポートメールを指定するだけで設定は完了です。

認証機能を簡単に実装すると、以下のようになります。

//SDKのファイルに追加
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from "firebase/firestore";


const db = getFirestore(app);

const auth = getAuth(app);

const provider = new GoogleAuthProvider();

export { db, auth, provider };

  //ログインボタンのonClickに追加
  const handleLogIn = () => {
    try {
      signInWithPopup(auth, provider).then((result) => {
        const user = result.user;
        console.log(user);
      });
    } catch (error) {
      console.error(error);
    }
  };

ログインボタンを押すと、成功時にはユーザー情報が、失敗時にはエラーがコンソールに出力されます。

実際にログインボタンを押すと、Googleのログインダイアログが表示されます。

ログイン機能は完成したので実際に作成したやることをデータベースから読み取りと保存ができるようにしたいと思います。

 //追加ボタンを押したときにToDoを保存する
  const handleOk = async () => {
    await addDoc(collection(db, "toDos"), {
      id: auth.currentUser?.uid,
      toDoName: titleRef.current?.value,
      toDoDate: toDoDateRef.current?.value,
    });

    setToDos((prevToDos) => [
      ...(prevToDos ?? []),
      {
        id: newToDo.id,
        toDoName: titleRef.current?.value || "",
        toDoDate: toDoDateRef.current?.value
          ? new Date(toDoDateRef.current.value)
          : new Date(),
      },
    ]);
  };

//保存されているToDoを読み取り
  const getPosts = async () => {
    const data = await getDocs(collection(db, "toDos"));

    setToDos(
      data.docs.map((doc) => ({
        ...(doc.data() as ToDoType),
        id: doc.id,
      }))
    );
  };

こちらで登録したやることはFirestore Databaseから確認できます。

認証機能とデータベースの実装だけでは少し物足りなかったため、レベル機能を追加しました。

ToDo を 1 件完了するごとにポイントが加算され、一定値に達するとレベルアップする仕組みです。

このレベル機能にはRemote Configを使用しています。

Remote Configを使うことで、アプリの再リリースを行わずに、見た目や動作を変更できます。

今回は以下の項目を定義しました。

1 件達成時に加算されるポイント
レベルアップに必要なポイント数

レベル機能自体はフロントエンド側で定数を定義しても実装できますが、

特定期間のみ獲得ポイントを増やしたい
ユーザーごとに必要ポイントを変えたい

といったケースでは、Firebase 側で条件を追加するだけで対応できるため、動的な変更が必要な場面では非常に便利だと感じました。

最終的な構成です。

src/
├── components/
│   ├── AddToDoDialog.tsx
│   ├── BaseToDo.tsx
│   ├── Calendar.tsx
│   ├── ToDoLevel.tsx
│   └── ToDoLists.tsx
├── styles/
│   ├── AddToDoDialog.scss
│   ├── App.scss
│   ├── BaseToDo.scss
│   ├── Calender.scss
│   └── ToDoLists.scss
├── types/
│   └── toDos.ts
├── Utils/
│   ├── ToDoLevel.ts
│   └── userPoint.ts
├── App.tsx
├── firebase.ts