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

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

✅完成後のアプリはこちら → [求人支援アプリ「つぐもん」](https://tsugumon-tymtwilight.vercel.app/)

#### 使用した技術
- React
- Redux
- TypeScript
- Firebase
- Tailwind CSS
- Reat Router

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

React,Redux,TypeScriptを使用できるように、create-react-appの[Redux+TS template](https://react-redux.js.org/introduction/getting-started#:~:text=of%20React%20Hooks.-,Using,-Create%20React%20App)を使用して、Reactのプロジェクトを作成します。

```terminal:Redux + TypeScript template
npx create-react-app my-app --template redux-typescript
```

## Tailwind CSSをインストールする 

引用元：[Install Tailwind CSS with Create React App](https://tailwindcss.com/docs/guides/create-react-app)

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

```terminal:Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

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

```terminal:Add the Tailwind directives to your CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Firebaseで新しいプロジェクトを作成する
1. 「コンソールへ移動」をクリックします
![スクリーンショット 2022-11-17 12.48.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/e7a3b1fa-b42c-7912-5352-05bd868f5248.png)

2. 「プロジェクトを追加」をクリックします
![スクリーンショット 2022-11-17 12.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/733e21c7-5959-d0d9-3421-533392180636.png)

3.　プロジェクト名を入力し、「続行」をクリックします
![スクリーンショット 2022-11-17 12.49.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/40f332cf-6701-5f71-82c3-a65efa226282.png)

4.　「続行」をクリックします
![スクリーンショット 2022-11-17 12.49.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/4658d9c7-beea-10e7-99f0-8e4bd2b99e30.png)

5. プロジェクトが作成されるまで、しばらく待ちます
![スクリーンショット 2022-11-17 12.50.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/f05ce4e6-02dc-e098-d182-d195e57bd9c3.png)

## プロジェクトにFirebaseを追加する
1. 先ほど作成したプロジェクトに移動して「プロジェクトの概要」を表示します
1. 「アプリに Firebase を追加して利用を開始しましょう」の箇所で「ウェブ」のボタンをクリックします
![スクリーンショット 2022-11-17 22.40.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/c531f80e-694d-7421-982f-b0ea69dcabbc.png)
1. アプリのニックネームを入力して「アプリを登録」をクリックします
![スクリーンショット 2022-11-17 22.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/3be5c5ea-4266-d335-9b5f-b5112e37a4c5.png)

1. 「Firebase SDK の追加」の項目で表示される`firebaseConfig`の値は次のステップで必要になるので、どこかにメモしておきます
![スクリーンショット 2022-11-17 22.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/cafd13fa-6c64-7bd7-6d7d-509b0c4da2ad.png)

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

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

```typescript:.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のコンソール画面から以下のとおり確認できます。
1. Firebaseのコンソールを開き、歯車マークをクリック
1. 歯車マークのとなりにメニューが表示されるので、「プロジェクトの設定」をクリック
![スクリーンショット 2022-11-17 1.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/c472be36-62eb-3492-d65e-3fb552e49c7b.png)
1. **SDK の設定と構成**の箇所に、APIやDomainなど、設定に必要となる項目が表示されます。
![スクリーンショット 2022-11-17 1.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589104/b32697ee-4a06-8673-8d55-444e9eac8d07.png)
1. `REACT_APP_FIREBASE_DATABASE`には、 PROJECT_ID を置き換えた値を入力します。

　　参考[【Firebase】ReactプロジェクトでFirebaseを扱う](https://qiita.com/nemutas/items/330cab413bccd9b2e096#:~:text=%E8%A8%AD%E5%AE%9A-,%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB,-%E3%81%AE%E4%BD%9C%E6%88%90)



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

## Firebaseをインストールする
引用元　[JavaScriptプロジェクトにFirebaseを追加する](https://firebase.google.com/docs/web/setup)
1. npm を使用して Firebase をインストールします。

```terminal
npm install firebase
```

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

```TypeScript: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`を初期状態から次の状態になるようにコードを書き換えます。
```react: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>
);

```

```react: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の初期設定](https://zenn.dev/masalib/books/2d6e8470732c8b/viewer/214c4e)