【Firebase×React】Firebaseで楽々Web開発チュートリアル

ー　PlayGround-AdventCalendar2024 七日目　ー

PlayGround一年生、たくみです！

PlayGroundでは、バックエンドのコースを受講しています。

アドベントカレンダーということで、この記事では、受講中のコース関連の事を書いてみたいと思いました！

という事で、今回のカレンダー記事では、Firebaseでスコアボードを作った話をします。

フロントエンド専門の方におすすめのプラットフォームですので、フロントエンドエンジニアの方は必読です！

Firebaseとは

Firebaseは、バックエンドを簡単に実装できる、Google社保有のBaaSです。

2012年にFirebase社が、mBaaS(mobile Backend as a Service)として公開し、2014年にはGoogle社に買収されたことで、Google社が管理することになりました。

BaaS(Backend as a Service)というのは、バックエンド機能をサービスとして提供するものです。

バックエンド機能のイメージは、ウェブサイトの裏で働くもの。

例えば、グーグル認証やデータベース処理は全てFirebaseに任せてしまうことができます。

GoogleCloudとは何が違うの？

Google社が管理しているGoogleCloudでも、同様の機能が提供されています。

開発環境を統合管理するならば、GoogleCloudの同等機能を使うだけで良いのでは？とも考えられます。

Firebaseはそもそもフロントエンドエンジニア向けのBaaSです。

そのために、セットアップが異様なまでに簡単なことが利点です。

例えば、GoogleCloudにおいて認証機能を扱うには初期設定を済ませた後、このドキュメントを読んで設定を行わなければなりません。

一方、Firebaseで認証機能を扱うには、初期設定を済ませた後、このドキュメントを読んで設定をします。

Firebaseは初心者向けの簡単なガイドが貼られていて、実際に始めるための操作も簡略化されたものが用意されています。

セットアップが簡単なこと、転じて小規模プロダクトやPoCを始める時にスピードスタートを決められることが、Firebaseの利点ではないでしょうか。

筆者環境

MacBookAir(M2)

バージョン：Sequoia 15.1

Firebaseの使い方

Firebaseは大きく分けて、構築、分析、実行の三つの面の機能を提供しています。

構築にはユーザー認証、Webページの公開、データベースの運用を含む機能が

分析にはイベント監視を含む機能が

実行にはABテストやパフォーマンス管理を含む機能が提供されています。

ここでは、使う頻度が高い認証機能、データベース機能と公開機能を扱うことにしました。

最終目標は、「ゲームのスコアボードを作ること」です。

そもそもFirebaseはネット上にあるサービス。

なのでFirebaseを使うには、FirebaseSDKを用いてサーバーとやり取りをしなくては行けません。

FirebaseSDKは、公式から使いやすいものが提供されていました。

今回はこちらを扱います。

Firebaseのセットアップ

これらを元に、Firebaseのセットアップを進めます。

ここからはお使いのPCに、以下のソフトウェアがインストールしていることを前提に進みます。

・Node.js - v20.12.2

まだインストールされていない方は、

より、Nodeをインストールしておいてください！

実際にFirebaseSDKを使うには、先んじてFirebaseで設定を行う必要があります。

こちらのページからログイン後、コンソールに飛びます。

まず、プロジェクトを作ります。

作ったプロジェクトで各機能を扱うために、設定をします。

Webアプリを追加します。Hosting(Webサイト公開機能)も設定しておきます。

ここで一旦、ローカル環境内に戻って、firebase-toolsをインストールします。

$npm install -g firebase-tools

インストール出来たら、作業用ディレクトリに移動して、firebaseSDKをインストールします。

$npm install firebase

現時点で、ディレクトリ構造は

• 作業用ディレクトリ
  • node_modules
    モジュール群
  • package-lock.json
  • package.json

ブラウザに戻って、コンソールに進み構築タブからデータベースを開きます。

開いた先で、データベースの使用を開始します。

設定は、リージョンをAsia-northenに、セキュリティールールをロックモードで指定してください。

今回は認証機能も扱うので、セキュリティルールも細かく設定します。

認証機能(Authentication)についても同じく有効化してください！

これでFirebaseのホームページ上のセットアップは完了です。

ローカル環境に戻って、firebaseにログインします。

$firebase login

ブラウザに飛ばされるので、先ほどFirebaseを有効化したGoogleアカウントでログインしてください。

作業ディレクトリ内で、Firebaseプロジェクトを初期化します。

$firebase init

コマンドを打つと、十字キーで操作可能なUIが表示されます。

スペースキーを押してHostingsとFirebaseStoreをオンにしてください。

エンターを押して、Use an existing ...を選択してください。

すると、色々と設定が出てくるので、全てエンターで承諾してください。

これでローカルのプロジェクトフォルダでFirebaseを利用できるようになりました。

Firebaseのセキュリティルール

データベースに誰もかもが接続出来てしまっては困ります。

なので、Firebaseをアプリで使うには、セキュリティルールの指定が必要です。

まずは認証機能をオンにするためにAuthenticationタブに戻り、Google認証をオンにします。

FirebaseStoreのタブに戻り、ルールを開きます。

すると、ルール文が変更可能なエディタが開きます。

Firebaseで使用可能なルール構文は以下です。

service サービス名{
match サービス中の属性名{
allow ユーザーに許可する操作: if 条件;
}
}

今回の例で言えば、Googleアカウントで認証し、特定のアドレスを持つ人だけがスコアボードを編集できるようにしたいので、このようにします。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow write: if request.auth != null && request.auth.email == "自身のgmailアドレス";
      allow read :if request.auth != null;
    }
  }
}

Reactのセットアップ

上で書いた通り、FirebaseはWebサイトの裏側で動くものだけを代わりにやってくれるものです。

表側で動くものを別途記述しなくてはいけません。

表側で動くものを記述するのがHTMLなどのマークアップ言語です。

マークアップ言語をユーザーに提供する機能を、今回はReactで実現させます。

Reactは、Webサイトの表示をJavaScriptで管理できるフレームワークです。

詳しくは、公式ホームページに譲ります。

公式ホームページに書いていることを参考にして、Reactのセットアップを進めていきました。

$npm create vite@latest
Ok to proceed? (y) :y
? Project name: › vite-project:enter
? Select a framework:React
? Select a variant:Javascript

Done.

$npm i

このとき、Firebase関係のファイルは全てReactのプロジェクトフォルダにつっこみます。

vite-project直下のvite.config.jsの記述にbuild:outDir設定を追加します。

// https://vite.dev/config/
export default defineConfig({
  build: {
    outDir: './public'
  },
  plugins: [react()],
 })

セットアップ時点で、ディレクトリ構造はこのようです。

• 作業用ディレクトリ
• vite-project
  • node_modules
    モジュール群
  • public
  • src
  • firebase.json
  • firestore.rules
  • firestore.indexes.json
  • .firebaserc
  • package-lock.json
  • package.json

これにてReactのセットアップが出来ました。

今回は、Scoreboardコンポーネントを作り、そこにScoreboardの表示をします。

ScoreBoardにはスコアとランキングを表示したいです。

考えを元にして、Reactコンポーネント(jsx)に直したものがこちらです。

(リンク先はGithubリポジトリです。)

認証機能についてはコメントアウトに記述しています。

これまで、Firebaseに裏側を、Reactに表側の動きを任せました。

これをネット上に公開するためにも、Firebaseを使うことができます。

使うには、作業用ディレクトリにおいて、コマンドラインからデプロイを実行します。

$firebase deploy

処理後、表示されたURLを踏めば、無事公開されたことが確認できます！

PlayGround-AdventCalendar2024、明日はDaichiさんの記事です！

参考資料