Firebaseを使ってみた 〜第三章 Firestoreからデータを取得する 〜

React Hooksを使いチャットボットアプリを作成しています。

この章ではFirestoreに保存した中から初期データを取得するまでを行います。

第一章　サービスをデプロイする
第二章　Firestoreにデータを保存する
第三章　Firestoreからデータを取得する

Firestoreを使う準備の流れ

[1. config.jsファイルを作成する](#menu1) [2. エントリポイントを作成する](#menu2) [3. 初期データを取得する](#menu3) [4. まとめ](#menu4)

1. config.jsファイルを作成する

srcディレクトリ配下に「firebase」ディレクトリを作成し、その中に「config.js」ファイルを作成します。 Firebaseのページに移り、「プロジェクトを設定」画面へ遷移します。 

の下部にあるFirebase SDK snippetの構成にチェックを入れ、下に記載してあるコードをコピーしconfig.jsファイルに貼り付けます。

貼り付けた内容を他の画面で使うので、exportしておきます。

firebase/config.js

const firebaseConfig = {
  apiKey: "******",
  authDomain: "******",
  databaseURL:"******",
  projectId: "******",
  storageBucket: "******",
  messagingSenderId: "******",
  appId: "******",
  measurementId: "******"
};

export default firebaseConfig

こちらの内容はGitHubなどに公開して問題ない内容のようですが、firestoreのセキュリティ設定をしておかないと簡単に書き込みをされてしまうので注意してください。（セキュリティ設定に関してはこちら）

2. エントリポイントを作成する

firebaseディレクトリ配下に「index.js」ファイルを作成し以下記述をします。

firebase/index.js

import firebase from 'firebase/app'        //firebaseを読み込み
import 'firebase/firestore'                //firebaseの中のfirestoreを読み込み
import firestoreConfig from './congfig'    //先ほど作成したconfigファイルを読み込み

firebase.initializeApp(firesbaseConfig);   //firebaseを初期化
export const db = firebase.firestore();    //初期化したfirebaseのfirestoreを使う

3. Firestoreからデータを取得する

Firestoreからデータを取得していきます。まず、先ほど作成したdbをインポートします。

src/App.jsx

import { db } from './firebase/index'

useEffectを使い、ページ読み込み時に全データを取得するようにします。
async,await付きの即時関数で記述していきます。（即時関数について参考記事）

src/App.jsx

import React, {useState, useEffect} from 'react'
import { db } from './firebase/index'

const App = () => {
 const [dataset, setDataset] = useState({});

  useEffect(() => {
    (async () => {
      const initDataset = {};
      await db.collection('[チャットボットのjsonファイルで設定したキー]').get().then(snapshots => {
        snapshots.forEach(doc => {
          const id = doc.id
          const data = doc.data()
          initDataset[id] = data
        })
        setDataset(initDataset)
      })
    })()
  },[])

ここで行っていることは以下です。

• collectionにアクセスし、データ(doc)を取得（データはsnapshotsに全て格納される）
• snapshotsの中身をforEachで回し、id,dataを取り出す
• 取り出したidをキーにinitDatasetの中にデータを格納する

あとは任意の場所でinitDatasetからidをキーにデータを取り出して使います。

4. まとめ

この章ではエントリポイントを作成し、Firestoreに格納したデータを取得しました。

今回初めて使ったみたのですが、記述すべき内容が把握できればとても簡単にできることがわかりました。手軽にバックエンド環境を用意したい方にはお勧めです！