ー PlayGround-AdventCalendar2024 七日目 ー
目次
一 ー Firebaseとは
二 ー Firebaseの使い方
三 ー Firebaseのセットアップ
四 ー Firebaseのセキュリティルール
五 ー Reactのセットアップ
六 ー Firebaseの設定
七 ー Reactの設定
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
- node_modules
ブラウザに戻って、コンソールに進み構築タブからデータベースを開きます。
開いた先で、データベースの使用を開始します。
設定は、リージョンを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
- node_modules
これにてReactのセットアップが出来ました。
今回は、Scoreboardコンポーネントを作り、そこにScoreboardの表示をします。
ScoreBoardにはスコアとランキングを表示したいです。
考えを元にして、Reactコンポーネント(jsx)に直したものがこちらです。
taku072002T(リンク先はGithubリポジトリです。)
認証機能についてはコメントアウトに記述しています。
これまで、Firebaseに裏側を、Reactに表側の動きを任せました。
これをネット上に公開するためにも、Firebaseを使うことができます。
使うには、作業用ディレクトリにおいて、コマンドラインからデプロイを実行します。
$firebase deploy
処理後、表示されたURLを踏めば、無事公開されたことが確認できます！
PlayGround-AdventCalendar2024、明日はDaichiさんの記事です！
参考資料
クラウドエース株式会社
しの
![[神の言語] Lispに触れてみた話](/content/images/size/w300/2024/11/----------2024-11-28-234249.png)
