React で Firestore を使う

まえおき

最近初めて React で Firestore を使ったので、その時の作業メモ。基本的には https://github.com/FirebaseExtended/reactfire に沿って進めていく。

環境

• React: 17.0.1
• TypeScript: 4.15.2
• Firebase はプロジェクト、データ書き込み済み

前提

• Firestore 構築済み(データ登録含む)
  • プロジェクトの登録方法: https://firebase.google.com/docs/web/setup#config-object
  • 今回構築したものは以下の通り
    
• React プロジェクト構築済み
  • ここでは create-react-app しただけ

手順

1. yarn add firebase reactfire
2. プロジェクトのルート直下に .env.local を追加。中にFirestoreとの接続情報を格納。値はFirestoreのプロジェクト設定から const firebaseConfig = ... の中身を記述

   // Firestore
   REACT_APP_API_KEY="apiKeyの値"
   REACT_APP_AUTH_DOMAIN="authDomainの値"
   REACT_APP_PROJECT_ID="projectIdの値"
   REACT_APP_STORAGE_BUCKET="storageBucketの値"
   REACT_APP_MESSAGING_SENDER_ID="messagingSenderIdの値"
   REACT_APP_APP_ID="appIdの値"
   REACT_APP_MEASUREMENT_ID="measurementIdの値"
   

3. App.tsxを以下のように修正

   import './App.css';
   // 使用するメソッド類をimport
   import { collection, doc, getFirestore } from 'firebase/firestore';
   import { useFirestore, FirestoreProvider, useFirebaseApp,   useFirestoreCollectionData } from 'reactfire';
   
   // firestore から値を取得
   function BitcoinPrice() {
     const firestore = useFirestore();
     const bitcoinCollection = collection(firestore, 'bitcoin_ticker');
     const { status, data } = useFirestoreCollectionData(bitcoinCollection);
   
     if (status === 'loading') {
       return <p>Fetching Bitcoin price...</p>;
     }
   
     return (
       <ul>
         { data.map(item => (
           <li>Bitcoin price {item.volume}</li>
         ))
       }
     　　　　</ul>
   　　　　);
   }
   
   function App() {
     const firestoreInstance = getFirestore(useFirebaseApp());
     return (
       <FirestoreProvider sdk={firestoreInstance}>
         <h1>Bitcoin Price!!!!</h1>
         <BitcoinPrice />
       </FirestoreProvider>
     );
   }
   

4. index.tsx

   import { FirebaseAppProvider } from 'reactfire';
   
   const firebaseConfig = {
     apiKey: process.env.REACT_APP_API_KEY,
     authDomain: process.env.REACT_APP_AUTH_DOMAIN,
     projectId: process.env.REACT_APP_PROJECT_ID,
     storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
     messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
     appId: process.env.REACT_APP_APP_ID,
     measurementId: process.env.REACT_APP_MEASUREMENT_ID
   };
   
   ReactDOM.render(
     <FirebaseAppProvider firebaseConfig={firebaseConfig}>
       <App />
     </FirebaseAppProvider>,
     document.getElementById('root')
   );
   

5. yarn build
6. yarn start
   

参考資料

• https://firebase.google.com/docs/web/setup#config-object
• https://github.com/FirebaseExtended/reactfire