More than 1 year has passed since last update.

React応用 - PartX2 - FirebaseのFirestoreデータを表示してみる

Posted at 2021-12-17

React + Typescript環境作成

Git Bashを開いて、プロジェクトを作成するディレクトリまで移動し、下記コマンドを入力＆実行します。
(私は、C:\ReactStudyに移動しました。プロジェクト名をreact-firebase-testとしました。)

npx create-react-app プロジェクト名 --template typescript

上記コマンドが終了しましたら、プロジェクトフォルダに移動し、
下記コマンドで初期画面が起動することを確認しておいてください。

npm start

※Reactマークがあり、Learn Reactと書かれた画面です。

各種ツールのインストール

プロジェクトフォルダで下記コマンドを実行していきます。

material-ui/core

npm i @material-ui/core

material-ui/icons

npm i @material-ui/icons

firebase

npm i firebase

react-router-dom

npm i react-router-dom @types/react-router-dom

初期画面の起動確認

再度、npm startで初期画面の起動を確認します。
が、コンパイルエラー画面が出ました。

型を指定してないので、any型になるのでダメダメと言っているようです。
typescriptのコンパイラオプションを設定し切り抜けます。
tsconfig.jsonに"noImplicitAny": falseを追加すれば、
無事、初期画面が起動するかと思います。

Firebaseアカウントの作成

Sparkプラン（無料枠）でアカウント作成しておきます。
Googleアカウントがあれば簡単に作成できるかと思います。

`https://firebase.google.com/pricing?hl=ja`

Firebaseプロジェクトの作成

Firebaseコンソールでプロジェクトを追加をクリック
プロジェクト名を入力し続行ボタンをクリック。※プロジェクト名はReactFirebaseTestとしました。
Googleアナリティクスは有効にせず、プロジェクトを作成ボタンをクリック
ウェブアプリにFirebaseを追加。※アプリのニックネームもプロジェクト名と同じにしました。また、このアプリの Firebase Hosting も設定します。はチェックを付けませんでした。
コンソールにすすむボタンをクリック
プロジェクト概要右横の歯車をクリックしプロジェクトを設定をクリックします。
マイアプリのSDK の設定と構成部分の構成ラジオボタンをクリックします。

ReactとFirebaseの連携(.env)

VSCodeに戻り、Reactプロジェクト直下に.envファイルを作成します。
右辺は、先ほどFirebaseの構成で確認した値を設定します。
※REACT_APP_DATABASE_URLは、下記例に習い、https://プロジェクトID.firebaseio.comとします。プロジェクトIDの部分を変更してください。

REACT_APP_API_KEY=""
REACT_APP_AUTH_DOMAIN=""
REACT_APP_DATABASE_URL="https://プロジェクトID.firebaseio.com"
REACT_APP_PROJECT_ID="プロジェクトID"
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""

ReactとFirebaseの連携(firebase.ts)

Firebaseとの連携を行うソースファイルfirebase.tsをsrcフォルダに作成します。

firebase.ts

import firebase from "firebase/app";
import "firebase/app";
import "firebase/firestore";
import "firebase/auth";

const firebaseApp = firebase.initializeApp({
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  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,
});

export const db = firebaseApp.firestore();
export const auth = firebaseApp.auth();

App.tsxを書き換えます。

App.tsx

// mod start
// import React from "react";
import React, { useState, useEffect } from "react";
// mod end

// add start
import { db } from "./firebase";
// add end

//  del start
// import logo from './logo.svg';
// import './App.css';
// del end

function App() {
  // add start
  const [users, setUsers] = useState([{ id: "", username: "" }]);

  useEffect(() => {
    const unSub = db.collection("users").onSnapshot((snapshot) => {
      setUsers(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          username: doc.data().username,
        }))
      );
    });
    return () => unSub();
  }, []);
  // add end

  return (
    <div className="App">
      {/* add start */}
      {users.map((user) => (
        <h3>{user.username}</h3>
      ))}
      {/* add end */}
      {/* dell start */}
      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> */}
      {/* dell end */}
    </div>
  );
}

export default App;