目次

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;

Firebaseにデータを作成

Firestore Database と Realtime Database がありますが、今回は、Firestore Databaseを使用します。

データベースの作成をクリックします。

本番環境モードで開始するを選択し、次へをクリックします。

有効にするをクリックします。

コレクションを開始をクリックします。

コレクションIDを入力し次へをクリック

ドキュメントIDは自動で設定し、フィールドと値を入力し保存をクリックします。
同様のユーザデータを複数用意しておきます。

動作確認(とりあえずyarn start)

タイトル通り、yarn startしてみます。

が、何も表示されません。

いろいろ調べました。そして、環境を何度も作りなおしました。
processis not definedっていうエラーが。。。
Firebaseの環境変数が読み込めてない。っていうか、そのエラーでレンダリングする項目も読み込まれてません。

んで、解決策は

yarn add dotenv

の後、

npm install --save dotenv

で出来ました。よく分かりません。

プロジェクトにdotenvモジュールを持ってきて、インストールしてって感じなんでしょうか。。。

動作確認(再度チャレンジ)

yarn start!!!!

ダメです。今度は、こんなエラーが出てました。

Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions.

これはググったらすぐ分かりました。

Firestoreのルールタブのとこに記載されているルールのwrite: if falseをwrite: if trueにしたら

表示できたぁ！

Firestoreにデータを追加

追加してみてください。
自動的にブラウザで表示していたデータが増えてますよね？