『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】

#はじめに
前回の記事では__『電卓』__の実装をしました。
その後以下の面白い記事と動画を見つけたので、早速参考にしてLINE風のChat機能の一部分を実装してみました！

- [React & Firebaseで簡単なChatアプリを作ってみた](https://qiita.com/kazushikawamura/items/58ea222b3cc289882d79)
- [Firebaseあればサーバーサイドエンジニア要らない説](https://www.youtube.com/watch?v=kF17GxocNFY)

一気に全部書くとすごく長くなりそうなので__【準備編】__、__【Component編】__、__【状態管理編】__の３部構成にして記事を書きたいと思います。今回は__【準備編】__です！

前回の記事
[『React』+『Redux』でiPhoneに入ってるような電卓を作ってみよう！](https://qiita.com/micropig3402/items/d1221652cdc6a4efccbe)

次回の記事
[『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【Component編】](https://qiita.com/micropig3402/items/3431c998df582a441fa5)

#完成品

![ezgif.com-optimize (7).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/08df1f21-5939-5590-46a2-27b7cc5717dd.gif)


#準備編

##恒例のcreate-react-app
terminalで以下のコマンドを入力しましょう！

```terminal
$ create-react-app chat
$ cd chat
$ yarn start
```

はい！これでReactを用いてアプリケーションを作る準備ができました！

<img width="665" alt="スクリーンショット 2019-05-15 10.01.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/1dcde7e2-da4c-67b4-e8e8-e59de94c9c59.png">

`create-react-app`がわからない人はこちらの記事へ

- [ReactでHelloWorldをしてみよう！](https://qiita.com/micropig3402/items/b90afc78f439f9bec81a)

##必要なパッケージのインストール
今回必要なパッケージは

- redux
- react-redux
- @material-ui/core
- @material-ui/icons
- firebase

です。

Material-UIはマテリアルデザインをReactアプリケーションに導入することができるUIコンポーネントです。Material-UIを使うことで、手軽にGoogleのマテリアルデザインを踏襲したアプリケーションを作ることができます。
<img width="1024" alt="スクリーンショット 2019-05-29 23.35.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/87ce1fc9-deb0-b628-d6d1-ae5337a54ef6.png">

早速インストールしましょう！

```terminal
yarn add redux react-redux @material-ui/core @material-ui/icons firebase
```

##Firebase
<img width="1034" alt="スクリーンショット 2019-05-29 23.35.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/cf686384-ec05-d903-07f4-ff3b754e4095.png">

Firebaseとは、すばやく高品質のモバイルアプリを開発することができるプラットフォームで、開発に役立つ数多くの機能が用意されています。今回は__『Hosting』__と__『Realtime Database』__を使用しました！

###気になる使い方
[https://firebase.google.com/?hl=ja](https://firebase.google.com/?hl=ja)にアクセスしGoogleのアカウントでログインしコンソール画面に移動します。<img width="770" alt="スクリーンショット 2019-05-29 23.46.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/f74a04ca-fe4d-5e53-fa65-30f140d8aefd.png">

プロジェクトの追加を押して、自分の好きなプロジェクト名を入力しましょう！<img width="588" alt="スクリーンショット 2019-05-29 23.49.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/5b47f459-1cc1-e926-3d76-98dea981375b.png">

これでプロジェクトが完成しました！<img width="1021" alt="スクリーンショット 2019-05-29 23.50.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/20da4669-0a87-56d0-49ba-6423f868fd29.png">

ウェブアプリを追加するために、アプリに好きなニックネームを入力します。
<img width="773" alt="スクリーンショット 2019-05-29 23.52.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/7c204554-0913-00b8-5aa8-1329fb78eb3f.png">

これで[SDK](https://www.elite-network.co.jp/dictionary/sdk.html)が入手できます。

###Firebase Realtime Databaseとの紐付け
`firebase/config.js`を作成し、Firebaseとの接続情報を記載します。

```react:src/firebase/config.js
export const firebaseConfig = {
  apiKey: "****************",
  authDomain: "****************",
  databaseURL: "****************",
  projectId: "****************",
  appId: "****************",
  storageBucket: "****************",
  messagingSenderId: "****************"
};
```

`firebase/index.js`でデータベース参照用のインスタンスを作成します。
このファイルをインポートすることで、どこからでもデータベースにアクセスすることができます。

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

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

これにて準備完了です！

#次回は

__『Material-ui』__を使ってComponentを作成し、アプリケーションの見た目を整えていきます！


#リファレンス
- [React & Firebaseで簡単なChatアプリを作ってみた](https://qiita.com/kazushikawamura/items/58ea222b3cc289882d79)
- [Firebaseあればサーバーサイドエンジニア要らない説](https://www.youtube.com/watch?v=kF17GxocNFY)
- [mBaaSの大本命グーグルのFirebaseを試してみた！基本編](https://www.apps-gcp.com/mbaas-firebase/)
- [【React】Material-UIでReactアプリケーションをマテリアルデザイン化する](http://rennnosukesann.hatenablog.com/entry/2018/05/21/235627)