はじめに

私がはじめてデータベースに触れたのはFirebaseである。
ネットゲームのようにDBはネット上に存在することが当たり前だと思っていたからである。
その中でFirebaseはとても使いやすかった。
そのおかげでJava Script, DBに対する理解度が深まって他の言語に対する抵抗もかなり減る結果になった。
ここでは初心者が簡単にDBを用いたホームページなどを作るとき、基本的な設定がわかるように、書いておく

環境

window 10
node.js 18.12.1
Firebase 8.6.5

基本設定

Firebase

Firebaseにログインし、直感的にわかるように、使ってみる → プロジェクト追加をする

使ってみるをクリックし、プロジェクトを追加する

Authentication

Authentication, Firestore, Hostingの使用設定をしておく

メール、パスワード使用を登録

Firestore Database

物理的に近い場所を選択

Hosting

あとのために、Hostingもやっておきます

環境設定

node js を最新バージョンでダウンロードする

ここでは
node js 18.12.1 を使用した

ここからはVSCODE

Terminal

npm install -g firebase-tools@9.23.1
firebase login
firebase init

Firebase init

? Please select an option: Use an existing project 
? Select a default Firebase project for this directory: for-qiita-e3ffb (先ほど作ったプロフェクトを選択)
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
? What file should be used for Firestore Rules? firestore.rules (エンター)
? What file should be used for Firestore indexes? firestore.indexes.json (エンター)

生成後の画面

新しいindex.htmlを生成し、必要な情報だけを残した
Firebase 8Vの方が個人的に扱いやすいため、Versionは8.6.5にした

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- まだ情報量が多い V8を使用 -->
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
  
</body>
</html>

アプリ設定

ウェブで利用できるように設定しておく

メインの画面で丸いアイコンのwebをクリック

名前を適当に入れて登録、Firebase Hositingの設定はしてない

script タグから firebaseConfigの中のapikey, authdomain などの情報をコピーする

以下のようにapikeyの情報を貼り付ける。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>

    Hello brothers 

    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>

    <script>
      const firebaseConfig = {
        apiKey: "your key",
        authDomain: "your key",
        projectId: "your key",
        storageBucket: "your key",
        messagingSenderId: "your key",
        appId: "your key",
      };

      firebase.initializeApp(firebaseConfig);
    </script>
  </body>
</html>

データの設定

ルール変更

読み込みにはデータに対する権限のルールがある
デフォルト設定では権限が全員に対してfalseになっているので、trueに変えておく
将来的にこ個人情報を扱うことになると、より詳細な設定が必要になるかも

設定前

設定後

データの読み込み

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>

    Hello brothers 


    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>

    <script>
       const firebaseConfig = {
        apiKey: "your key",
        authDomain: "your key",
        projectId: "your key",
        storageBucket: "your key",
        messagingSenderId: "your key",
        appId: "your key",
      };

      firebase.initializeApp(firebaseConfig);
    </script>

    <script>
        const db = firebase.firestore();
        db.collection('test').get().then((snapshot)=>{
          snapshot.forEach(doc => {
            console.log(doc.data())
          });
        })

    </script>
  </body>
</html>

firebase serve

開発者ツール → コンソール

問題なくFirestoreからデータを読み込めた

終わりに

ここではFirebaseと生のHTMLの組み合わせによる環境構築をまとめた
最近ではReact, Vue などが主流ではあるが、昔ながらの生のHTMLも魅力がある。何よりも簡単な初期設定、緩いルール、とりあえずは動くシステム、それとFirebaseの組み合わせなら、入門としてはとても良い練習、遊びになると思う