FirebaseとReactでSNSを作ってみた！　(1)FirebaseとReactを連携させる #TypeScript

はじめに

フロントエンドの知識だけでSNSアプリを作りたい！
けど、どうやったらいいのかわからない・・・。
この記事では、そんな自分がReactとFirebaseを駆使して、自作のSNSアプリを完成させるまでの一連の流れを記していこうと思います。
フロントエンド志望で、ポートフォリオ用アプリを作ることができず悩んでいるかたの一助になれば幸いです。

✅完成後のアプリはこちら → 求人支援アプリ「つぐもん」

使用した技術

React
Redux
TypeScript
Firebase
Tailwind CSS
Reat Router

react-create-appでアプリの雛形をつくる

React,Redux,TypeScriptを使用できるように、create-react-appのRedux+TS templateを使用して、Reactのプロジェクトを作成します。

Redux + TypeScript template

npx create-react-app my-app --template redux-typescript

Tailwind CSSをインストールする

引用元：Install Tailwind CSS with Create React App

Tailwind CSSのインストールにはCreate React App v5.0以上が必須なので、要注意です！

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Firebaseで新しいプロジェクトを作成する

「コンソールへ移動」をクリックします
「プロジェクトを追加」をクリックします

3.　プロジェクト名を入力し、「続行」をクリックします

4.　「続行」をクリックします

プロジェクトが作成されるまで、しばらく待ちます

プロジェクトにFirebaseを追加する

先ほど作成したプロジェクトに移動して「プロジェクトの概要」を表示します
「アプリに Firebase を追加して利用を開始しましょう」の箇所で「ウェブ」のボタンをクリックします
アプリのニックネームを入力して「アプリを登録」をクリックします
「Firebase SDK の追加」の項目で表示されるfirebaseConfigの値は次のステップで必要になるので、どこかにメモしておきます

.envファイルにfirebaseConfigの情報を登録する

先ほどメモしたfirebaseConfigの情報は、機密情報のため、他の人には見えない形にする必要があります。
ここでは.envファイルをプロジェクトフォルダの直下に作って、そこにfirebaseConfigの値を入れ込んでいくことにします。
.envファイルは以下のようなかたちで記述します。

.env

REACT_APP_APIKEY="firebaseConfigの値を入力"
REACT_APP_AUTHDOMAIN="firebaseConfigの値を入力"
REACT_APP_PROJECT_ID="firebaseConfigの値を入力"
REACT_APP_STORAGE_BUCKET="firebaseConfigの値を入力"
REACT_APP_MESSAGING_SENDER_ID="firebaseConfigの値を入力"
REACT_APP_APP_ID="firebaseConfigの値を入力"
REACT_APP_MEASUREMENT_ID="firebaseConfigの値を入力"

(注意1)
　REACT_APP_ と頭につけないとエラーになります！
(注意2)
　.envファイルの情報はプロジェクトの起動時に読み込まれます。なので.envファイルを修正してもエラーが解決しない場合は、修正後の.envファイルが読み込まれていないことが原因かもしれません。.envファイルを修正したら、いったんコンパイルを止めて、もう一度npm startすることをおすすめします！

　なお、上記で入力するFirebaseのAPIやDomainなどは、Firebaseのコンソール画面から以下のとおり確認できます。

Firebaseのコンソールを開き、歯車マークをクリック
歯車マークのとなりにメニューが表示されるので、「プロジェクトの設定」をクリック
SDK の設定と構成の箇所に、APIやDomainなど、設定に必要となる項目が表示されます。
REACT_APP_FIREBASE_DATABASEには、 PROJECT_ID を置き換えた値を入力します。

　　参考【Firebase】ReactプロジェクトでFirebaseを扱う

// 「process.env.*」と記述することで、envファイルを参照するようにしています。

Firebaseをインストールする

引用元　JavaScriptプロジェクトにFirebaseを追加する

npm を使用して Firebase をインストールします。

npm install firebase

2.firebase.tsというファイルを作り、Firebaseの初期設定をおこないます。

src/firebase.ts

// インポート対象のFirebaseApp,Auth,Firestore,FirebaseStorageはTypeScriptの型です
import { FirebaseApp, initializeApp } from "firebase/app";
import { Auth, getAuth } from "firebase/auth";
import { Firestore, getFirestore } from "firebase/firestore";
import { FirebaseStorage, getStorage } from "firebase/storage";

// process.env~で先ほど.envファイルに入力したfirebaseConfigの値を参照しています
const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  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,
};

// NOTE >> Firebaseの初期化を行います。
const app: FirebaseApp = initializeApp(firebaseConfig);
export const auth: Auth = getAuth();
export const db: Firestore = getFirestore(app);
export const storage: FirebaseStorage = getStorage();

Firebaseと連携できたか確かめる

最後に、ReactプロジェクトとFirebaseが連携できたかどうか確認しましょう！
index.tsxとapp.tsxを初期状態から次の状態になるようにコードを書き換えます。

index.tsx

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./app/store";
import App from "./App";
import "./index.css";

const container = document.getElementById("root")!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

app.tsx

import {
  signInWithEmailAndPassword,
  User,
  UserCredential,
} from "firebase/auth";
import React from "react";
import auth from "./firebase";

const App = () => {
  signInWithEmailAndPassword(auth, "test_mail@gmail.com", "testuser").then(
    (credential: UserCredential) => {
      const user: User = credential.user;
      if (user) {
        console.log("アプリにログインしました");
      }
    }
  );
  return <div className="App">App</div>;
};

export default App;

この状態でnpm startして、コンソールにアプリにログインしましたと表示されれば、無事、連携できていることになります！

所感

.envファイルについて、思っていた以上に自分がわかっていないことに気がつきました😅
記事を書いて自分のコードを説明するのはいい復習になりますね。

参考

ReactとFirebaseの初期設定

FirebaseとReactでSNSを作ってみた！ (1)FirebaseとReactを連携させる