Firebase+React+Reduxで多機能チャットを実装しよう【環境準備編】

# Firebase+React+Reduxで多機能チャットを実装しよう【環境準備編】

**ガイド**

- [環境準備編](https://qiita.com/torahack/items/a6a5ca9d92cb805b5de5)　←イマココ
- [リアルタイムチャット~React編~](https://qiita.com/torahack/items/56cd0b3f0c9cefeca61b)
- リアルタイムチャット~Redux編~
- ログイン機能
- チャットルーム選択機能
- チャットルーム設定機能
- [デモページ](https://react-chat-28bf1.firebaseapp.com/)
- [GitHub](https://github.com/deatiger/react-chat)

## TL;DR
FirebaseとReactを使って、メッセージを送り合う簡単なチャットアプリの解説記事はいくつか見かけますよね。

だけど、実務で使うチャットアプリならもっと複雑なはず。

そこで以下7つの機能を持つチャットアプリを実装しました。

1. リアルタイムチャット
2. ログイン機能
3. チャットルームの作成
4. チャットルームの削除
5. チャットルームから退出
6. チャットルームメンバー変更（追加/削除）
7. チャットルーム名とアイコンの設定

デザインは、イケてるアプリ風にできる[Material-ui](https://material-ui.com/)にお任せした。

デモ動画

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">React × Firebaseで作ったチャットアプリのデモ<br><br>Reduxも使ったりと色々詰め込んだので、Qiitaに順次記事をアップしていこうと思います。<a href="https://t.co/9fUVt585tF">https://t.co/9fUVt585tF</a> <a href="https://t.co/uNb4k8IFB7">pic.twitter.com/uNb4k8IFB7</a></p>&mdash; トラハック@正社員Webエンジニア (@torahack_) <a href="https://twitter.com/torahack_/status/1212401990258421762?ref_src=twsrc%5Etfw">January 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## FirebaseとReactで開発するための環境構築
Firebase、React、Reduxを使って開発していくための環境を構築します。
### Node.jsとnpmのインストール
`create-react-app`を使うためには以下のバージョンが必要です。

- Node.js 8.10 以上
- npm 5.6 以上

上記を満たしていない方は、以下記事を参考にインストール or アップデートしておいてください。

[macOSにHomebrewをインストール](https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9)
[Node.js / npm をインストール (Mac環境)](https://qiita.com/PolarBear/items/62c0416492810b7ecf7c)
[Node.jsとnpmをアップデートする方法](https://parashuto.com/rriver/tools/updating-node-js-and-npm)

### React関連モジュールのインストール
Reactの環境をイチから構築するのは面倒です。
そこでcreate-react-appを使います。

#### create-react-app
以下のコマンドでcreate-react-appしてください。

```
npx create-react-app react-chat
```

※npmでグローバルインストールしたcreate-react-appは非推奨になりました。
過去にインストールしたことがある場合は、以下コマンドでアンインストールしておきましょう。

```
npm uninstall -g create-react-app
```

"react-chat"というフォルダが作成されます。
Reactの開発環境が作られています。（簡単すぎて感激）

npm startしてブラウザ画面が表示されることを確認しましょう。

```
npm start
```

<img width="796" alt="スクリーンショット 2019-12-09 15.44.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/c35113c3-327b-2452-9c01-5cbd0dd7f7d3.png">

#### その他モジュールのインストール
Reduxとmaterial-uiに必要なモジュールをインストールします。

```
npm install --save redux react-redux redux-actions immer  @material-ui/core @material-ui/icons
```

### Firebaseとの紐付け
Firebaseとの紐付けを行なっていきます。
#### 1. Firebaseプロジェクトの作成
[Firebase Console](https://console.firebase.google.com/u/0/?hl=ja)からプロジェクトを作成します。
今回は"react-chat"という名前にしました。
<img width="796" alt="スクリーンショット 2019-12-06 16.36.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/efd857c2-36c4-ded2-cb0e-6f6d7643694e.png">
Analyticsを使うかどうか聞かれますが、どちらでも良いです。
使う場合はGoogle Analyticsのアカウントが必要になります。

次へ次へと進めてプロジェクトを作成。
<img width="796" alt="スクリーンショット 2019-12-06 16.37.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/b61d2142-f73c-d266-a2c8-ba6b5fb47b43.png">
プロジェクトが作成されたら、</>マークをクリックしてWebアプリを追加しましょう。
<img width="796" alt="スクリーンショット 2019-12-06 16.54.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/dabbe807-ed64-294b-0381-72f64761a891.png">
アプリ名はなんでも良いです。

「このアプリのFirebase Hostingも設定します。」にチェック。
<img width="796" alt="スクリーンショット 2019-12-06 16.55.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/0391d4ec-9b7a-ebed-1b6d-b61b7b46dfb9.png">

次へ次へと進めてデプロイ完了させてください。

※モジュールインストールやログインなど基本的なところは割愛。
[公式ドキュメント](https://firebase.google.com/docs/web/setup?hl=ja)が詳しいです。

#### 2. configファイルの作成
まず、Firebaseモジュールをインストールします。

```
npm install firebase --save
```

Firebaseコンソールから[歯車ボタン] > [プロジェクトと設定] > [全般]の下部 [Firebase SDK snippet] > [構成]をチェック
で以下のような構成をコピーできます。

firebaseフォルダとconfig.jsファイルを作成してペーストしてください。

```src/firebase/config.js
export const firebaseConfig = {
    apiKey: "YOUR-API-KEY",
    authDomain: "YOUR-PROJECT-ID.firebaseapp.com",
    databaseURL: "https://YOUR-PROJECT-ID.firebaseio.com",
    projectId: "YOUR-PROJECT-ID",
    storageBucket: "YOUR-PROJECT.appspot.com",
    messagingSenderId: "xxxxxxxxxx",
    appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxx",
    measurementId: "G-XXXXXXXXX"
};
```

index.jsファイルを作成して、設定をexportします。

```src/firebase/index.js
import firebase from 'firebase';
import { firebaseConfig } from './firebase/config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const database = firebaseApp.database();
```

#### 3. Firebase init
initする前に、デフォルトリソースロケーションを選択しましょう。
（これ設定しておかないと、後から怒られます。）

設定ボタンから[プロジェクトの設定]をクリックします。
<img width="796" alt="スクリーンショット 2019-12-06 17.40.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/98b0a5e2-3eb9-c333-a994-480cc4032144.png">


<img width="796" alt="スクリーンショット 2019-12-06 17.38.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/d37e9fc4-23ea-2192-a2cc-25c8e80871a6.png">

コンソールで`firebase init`を実行します。

どのプロダクトを使うか選択。
今回はDatabase, Hosting, Storageの3つです。
<img width="796" alt="スクリーンショット 2019-12-06 17.44.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/f172605d-77c2-eecd-3749-994cbf77985f.png">

プロジェクトの選択では、[Use an existing project] > [react-chat]を選択。

基本はEnterで進めていきます。

public directoryは"build"に変更してください。
また、single-page appとして設定しましょう。
<img width="796" alt="スクリーンショット 2019-12-06 17.45.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/1e5d4eaa-9f9c-a73a-753d-6c0d327016c8.png">

これでFirebaseの設定は完了です。

#### 4. Firebase Hostingにデプロイ
ビルドしてデプロイします。

```
npm run build
```

```
firebase deploy
```

Firebase Hostingの公開先URLにアクセスして`npm start`の時と同じ画面が表示されることを確認しましょう。

<img width="796" alt="スクリーンショット 2019-12-09 15.44.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170220/bc1c34e7-dd48-e959-f40a-9af821d6b506.png">

次は[FirebaseとReactとReduxで多機能チャットを実装しよう【メッセージ編】]()です。
（現在編集中）

## 参考記事

[React & Firebaseで簡単なChatアプリを作ってみた](https://qiita.com/kazushikawamura/items/58ea222b3cc289882d79)

[『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】](https://qiita.com/micropig3402/items/5a24f35f68bb6b3c8e81)

[新しい React アプリを作る – React](https://ja.reactjs.org/docs/create-a-new-react-app.html)