モジュールバンドラー無しでCloud Firestoreをさささっと使う（Ver. 10.13.0） 🔥

かつて、Firebase Hosting + Cloud Firestore + Firebase Authenticationを使いつつ、モジュールバンドラー無しのプロトタイプを作ったことがありました。

blog.kimizuka.org

今回もモジュールバンドラー無しで、Cloud Firestoreをさささっと使うプロトタイプを作ってみます。
前回とは違い、Firebase Authenticationを省いたので、よりシンプルなコードになりました。

実装手順

途中までは前回のものと一緒です。

❶ パッケージを用意する

yarn add firebase firebase-tools

❷ package.jsonを編集する

package.json

{
  "name": "update-now",
  "scripts": {
    "login": "firebase login",
    "init": "firebase init",
    "emulate": "firebase emulators:start",
    "deploy": "firebase deploy"
  },
  "dependencies": {
    "firebase": "^10.13.0",
    "firebase-tools": "^13.15.2"
  }
}

❸ Firebaseのコンソールからプロジェクトをつくり、Cloud Firestoreを有効にする

ルールはテストモードで開始する
ロケーションは近いところを選ぶ

firebase.google.com

❹ Firebaseプロジェクトを初期化する

初期化

yarn run init

初期化後、❸で作成したプロジェクトに紐付けます。

必要なものを有効化

◉ Firestore: Configure security rules and indexes files for Firestore
◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◉ Emulators: Set up local emulators for Firebase products

必要なエミュレータを有効化

◉ Firestore Emulator
◉ Hosting Emulator

いろいろ選択肢が出てきますが、基本的にEnterを連打でOKです。

❺ コードを書く

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "emulators": {
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 3000
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>update-now</title>
    <script defer src="/__/firebase/10.13.0/firebase-app-compat.js"></script>
    <script defer src="/__/firebase/10.13.0/firebase-firestore-compat.js"></script>
    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
  </head>
  <body>
    <script type="module">
      const app = firebase.app();
      const db = firebase.firestore();

      (async () => {
        const updateRef = db.doc('develop/update');

        await updateRef.set({ value: `${ new Date().toLocaleString() }` });

        const { value } = (await updateRef.get()).data();

        console.log(value);
      })();
    </script>
  </body>
</html>