テーブルを操作してみる

色々と調べて見た結果公式ホームページを見るのが近道でした。 とりあえず公式通りに修正してテーブル操作を行いました。

前提条件

前回の続き。データベースにアクセスが可能である。

前回からの修正内容

initializeApp(firebaseConfig);

export const auth = getAuth ();
export const storage = getFirestore();

を以下に変更

const app = initializeApp(firebaseConfig);
export const auth = getAuth ();
export const db = getFirestore(app);

上記の変更に伴ってApp.jsも変更

//import {storage} from './firebase';<-これを
import {db} from './firebase';//<-に変更

テーブルを追加してみる。

公式ページのコードをそのまま使用しました。ボタンイベントとして設定したためボタンをクリックすると登録されるようにしました。

  const btne = async(e)=>{
    const doecRef = await addDoc(collection(db, "users"),{
      first : "ada",
      last: "lovelace",
      born: 1815
    });

  }

そうするとuserテーブルが生成されて中身も追加されていました。

データの取得

大きく分けてcollectionを使うか、使わないかの2種類の方法があるみたい。

//collectionを使わない方法
const decref = await doc(db, "hoge","hoge2","hoge3")
const decsnap = await getDoc(docRef);
console.log(docsnap.data());

直接パス？連続で指定することでデータを読み取ることができる。

collectionを使う方法
const docs = await collection(db, "hoge")
cosnt de = doc(hoget,"hoge2")
const totalc = collection(de,"hoge3");
getDocs(totalc).then((decsnap)=>{
  console.log(decsnap.data());
})

こう見てみるとcollectionってとても面倒な気がする. ではどういう時にこのcollectionを使えばいいのか？

コレクション？

まず適当にデータを作ってみました。 PATHがCities -> LA -> zip >mfHofeYYudyPGYf013qz->その中address,phone,zipcodが入っています。

const docRef = await doc(db, "cities", "LA","zip","mfHofeYYudyPGYf013qz");
const docSnap = await getDoc(docRef);
console.log(docSnap.data());

chromのコンソール画面を見てみると無事に表示できました。

const fcollection = await collection(db,"cities");
const fdoc= await(fcollection,"LA");
const scollection = await collection(fdoc,"zip");
getDocs(scollection).then((docSnap)=>{
  docSnap.docs.forEach((doc)=>{console.log(doc.data())});
})

コレクションを使うと長いな...別の方法がありそうですけどちょっと大変ですね。

どちらを使えばいいのか

1.firebaseのプロジェクトの作成

プロジェクトを作成します。すでにある方は飛ばしてください。 1.プロジェクトの作成

2.アナリティクス設定 今回不要なので無しにします。

3.firebaseconfigの確認 登録にconfig情報が表示されますがその後はここで確認することができます

Reactで使う

firebase npm install

1.firebaseモジュールをインストールします。

npm install --save firebase

2.firebase用のjsを作成 firebase.jsとしていますが、なんでもいいです。 3.firebaseのimport 先ほど作成したfirebase.jsに情報を記入します。と言ってもコピペするだけで使用できますが...

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyB1b3GUOQuGEIOPNDENIO",
  authDomain: "hooooooooooooooooooghwioaeio",
  databaseURL: "https://ddddddd",
  projectId: "accountDDDDDD",
  storageBucket: "accountdddddd",
  messagingSenderId: "11111111111",
  appId: "1:11111111111:web:4490gji429g-jpss"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

4.firestore databseを使用する ここが少し大変だった。firebase v8 とv9があり、2022年5月の現時点ではデフォルトではv9になっています。 今回v9を使用しています

import { initializeApp } from "firebase/app";
import {getFirestore} from "firebase/firestore";//<-これを追加
//import {getAuth} from "firebase/auth"必要であれば


//const app = initializeApp(firebaseConfig); <-これを以下のように変更
initializeApp(firebaseConfig);

//export const auth = getAuth ();必要であれば
export const storage = getFirestore();//<-これを追加。

reactの下準備が終わりました。結構長い。

firestore Databaseの追加

ここでテスト用にデータを追加しました。左のコレクション名と右のフィールドを主に使用するので意識しておいてください。 私の場合コレクションをsampleに設定しました。

reactで実際に読み込む

App.jsにコードを書き書きしていきます。 1.import

import * as React from "react"
import { useState } from 'react';
import { Routes, Route, Link } from 'react-router-dom';
//ここから
import {storage} from './firebase';//上で作成したfirebase.jsのexport storageをimportする
import {collection,getDocs} from "firebase/firestore";//これがデータを取得するために必要になります。

2.取得 実際に必要な処理は

• 1.firebaseのconfig情報をもとにコレクションにアクセスする。
• 2.getDocsでqueryを取得する
• 3.forechで中身のdataを取得する。

それではコードの中身を。先ほどのApp.jsファイルの中です。

  const btne = async(e)=>{
   const  oec = await collection(storage,"sample");
   getDocs(oec).then((querySnapshot)=>{
     querySnapshot.docs.forEach((doc)=>{console.log(doc.data())});
   })
  }

     //............
     //どこかにボタンを追加しておきます。
     <button onClick={btne}>hotoke</button>

こうするとデータを取得できます。実際にコンソールで見た場合はこんな感じです。

実際に使用する時は

firebaseConfigをローカル環境にします ・ローカル環境に追加するときはルートディレクトリ（.gitignore、srcフォルダーがある場所）に .envファイルを追加 .envファイルの一部

REACT_APP_FIREBASE_API_KEY="AIzaSyB1b3GUOQujTkmMqTlrjXWWALXsQE7Wb0E"

実際に困った事

まずv8とv9の取得方法が違い、調べてもv8が多くヒットしてしまったので使い方が分からなかった。 また、collection(storage,"sample")で中身を見ても正常に取れているか、正常なのか異常な帰り値なのか判断できなかった。

  const btne = async(e)=>{
   const  oec = await collection(storage,"sample");
   console.log(oec)
  }

そしてfirebase databaseとrealtime databseがあるのでどっちの説明をしているのかを探しづらかった。

おまけ

プロジェクトの削除はここでできます。