React Native + Firebase で超簡単なチャットアプリを作ってみた‼️ (Firebaseプロジェクト設定編)

# はじめに
**[前回の記事](https://qiita.com/shintaroa/items/ccd0ebe0b41fdce34565)**で環境構築を終え、プロジェクトを開始するところまでやりました！
今回の記事では、Firebase のプロジェクトの設定をし、実際にコーディングに入る準備を終わらせます！

この記事は4部構成の第2回となっております。

1. [環境構築編](https://qiita.com/shintaroa/items/ccd0ebe0b41fdce34565)
2. **Firebaseプロジェクト設定編** ← 本記事
3. [データ書き込み編](https://qiita.com/shintaroa/items/4268c0cc2e10a49f4fce)
4. [データ読み取り編](https://qiita.com/shintaroa/items/c9e446cd220b80d619e2)

全4回をかけて、簡単なチャットアプリを開発します！
↓↓完成イメージです:bangbang:(再掲)

<img width=300 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/4707a209-4275-65c4-71b6-38eef867c751.png" />

# フォルダの構成を考える
このようなフォルダの構成にしました。
プロジェクト直下にsrcという名前のフォルダを作ります。sourceの略です。
srcの下に components, lib, screens, types という4つのフォルダを作ります。

components：コンポーネントの置き場
lib：firebase関連のファイルの置き場
screens：画面の置き場
types：TypeScriptの型定義関連のファイルの置き場

以下のような構成になるはずです。

![スクリーンショット 2020-10-14 14.09.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/2b3f0757-f4b8-70f6-b639-3fbec1fac60a.png)

# Prettierの導入
**Prettier**とは、コードを自動で整形してくれるツールです！
まず、[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)から、VS Code のプラグインをインストールします。

そして、「.prettierrc」という名前のファイルを作成します。
![スクリーンショット 2020-10-14 14.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/5ff70002-b9db-b248-d968-ccdc838af07d.png)

ファイルの中身は以下の通りです。
下記のような設定を記述しています。

- タブはスペース4個分にする
- 末尾にセミコロンを付ける
- 文字列はシングルクオートにする
- オブジェクトの最後の要素の末尾にコンマをつけない


```
{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none"
}
```

最後に、「⌘ + ,」で VS Code の設定を開き、「format on save」と検索し、これを有効にします。
![スクリーンショット 2020-10-14 14.22.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/bf8dfd57-d117-1359-55b9-4bd8b2256bd2.png)

VS Code を再起動すると、ファイルの保存と同時に自動整形が走るようになっているはずです！！

# パッケージのインストール
今回のチャットアプリでは**firebase**を用いますので、**firebase**をプロジェクト内にインストールする必要があります！
プロジェクト内で`expo install firebase`を実行します。

![スクリーンショット 2020-10-14 15.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/0fcde2e2-cfb7-d28b-7bfd-84d3b5872304.png)

# Firebase の準備
Firebase はGoogleアカウントさえ持っていれば**誰でも無料で**使うことができます。
まず、[https://firebase.google.com/](https://firebase.google.com/)にアクセスしてください。

新しいプロジェクトを作成し、任意のプロジェクト名を決めます。
今回は「ChatApp」という名前にしておきました。

![スクリーンショット 2020-10-14 15.29.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/d0a338ee-597f-b2d5-c447-b1ee54dd427d.png)

とりあえず今回はGoogleアナリティクスとの連携はしていません。
![スクリーンショット 2020-10-14 15.30.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/c6c1ca26-ae8d-861a-4875-3110bdcfccc2.png)

プロジェクトの作成が完了すると、ダッシュボードが表示されます。
![スクリーンショット 2020-10-14 15.30.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/407953b6-03fb-1f6e-b422-d999de7ab763.png)

ウェブアプリの追加を選択してください。
こちらもアプリ名を「ChatApp」にしています。
「**アプリの登録**」を押し、そのまま「**コンソールに進む**」を選んでもらって大丈夫です。
![スクリーンショット 2020-10-14 15.34.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/fb15836c-ca15-b417-9d17-ea57facdecf7.png)

今回は**Authentication**と**Cloud Firestore**を使うので、それらの設定もしていきます。

![スクリーンショット 2020-10-14 15.35.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/74806e0e-5838-1332-71b0-62d66fc0512f.png)

## Authentication の設定
Authentication の Sign-in method から、**匿名**を有効にしてください。
![スクリーンショット 2020-10-14 15.39.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/b55dea90-a053-9415-a99e-62049aeba50d.png)

## Cloud Firestore の設定

「データベースの作成」を押します。
![スクリーンショット 2020-10-14 15.41.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/2becd9e8-c42b-a90c-ec9b-2b1219c8f46e.png)

とりあえず、「**テストモードで開始する**」を選択してください。
![スクリーンショット 2020-10-14 15.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/b120f448-1ebd-3816-aa8c-227373bcd80d.png)

ロケーションは**asia-northeast1**を選びましょう。
日本から一番近いサーバーっぽいです。
![スクリーンショット 2020-10-14 15.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316856/9015755a-f4f1-d3c2-3494-01f4627ddba5.png)

これで Firebaseプロジェクト の設定は完了です！！
次回から実際にコードを書いていきたいと思います！！

**次回は今回設定したCloud Firestore 上に、アプリから通じてデータを書き込むという処理を実装します:bangbang:**