Reactを基本からまとめてみた【21】【Firebase CloudFirestore】

##Firebase CloudFirestore

公式サイト：[Firebase]
(https://firebase.google.com/)

####Firebase CloudFirestoreとは

- googleが提供してるバックエンドで機能するデータベースサービスのこと。
- NoSQLベースのデータベース内の１つ。
- SQLの知識無くても、データベースの作成、データの格納が簡単に行えるので、
データベースの構築時間が大幅に削減できるという便利ツール。

####Firebaseが提供している2つのデータベース

1. Cloud Firestore(新しい方)

- Realtime Databaseよりも後に出た新しいDBで高機能版

2. Realtime Database(古い方)

- 従来からある　Firebase のデータベース

##### ➡︎ 基本的には、『Cloud Firestore(新しい方)』の方を利用するのが良い。

####Firebaseの基本構造(データベース)

#####1.　ドキュメント
- データを格納する
- Javascriptのオブジェクトのように『key-value』でデータを保存する
- 各データには型がある(string, number, booleanなど)
- ドキュメント内にコレクションを作れる(=サブコレクション)

#####2.　コレクション

- 複数のドキュメントを格納する
- コレクション毎に、同じカテゴリのドキュメントを格納する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/73c56610-72d2-eb4b-6b37-b51fef8ca5fd.png)



##Firebase CloudFirestoreの登録

####1. Firebase CloudFirestoreの登録する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/b5674c9c-7b98-36b4-c122-1ece1f54618d.png)

####2. プロジェクトを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/f455d63c-514a-7e3b-5d3d-faec2367c7cc.png)

####3. プロジェクト名を付ける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/791db351-04ff-c7d6-3cea-3e5e27179768.png)

####4. Google アナリティクスを有効にするか選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/5ecdef51-718f-41bc-c680-494716ee5789.png)

####5.新しいアカウントを作成を選択する

① 任意の文字列を入力する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/69d85fd3-1f7f-e39a-7d28-3215f57b980a.png)

② 必要項目を選択、チェックを入れて『プロジェクトを作成』する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/50511077-8182-c031-8b59-712122f830be.png)

③ 準備が整うと以下の画面になるので『続行』する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/479716d1-e77f-2ed1-64c2-e2ba872cbede.png)

## アプリを作成
####1. アプリを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/1e0046a4-df69-172c-4327-74cfc2a8fde6.png)

####2. アプリ名を登録する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/d93b2a53-36e5-9ad7-b145-7a2c61b934c0.png)

####3. SDK出力する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/bd6b6ca6-e0b1-a46d-a80e-53c500432f94.png)

##データベースの設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/78f71e7e-00fa-3970-455b-1613f9b62d69.png)

####1. テストモードで開始する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/617b82e2-7960-dcfe-528e-d00b908e2024.png)

####2. ロケーション設定する

『有効にする』にする。

#####※ Cloud Firestoreのロケーションを 『asia-northeast1(東京)』『asia-northeast2(大阪)』を選択すること。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/f26a0af0-4adc-862e-69bf-9dbd1cd2b0be.png)


##データベースの値設定
『コレクションを開始』して、格納したい値を設定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/976548df-fbe8-bd72-d247-e90fa97a491e.png)

####1.コレクション名を付ける

① 任意の英数文字列を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/affc769c-31a6-07e2-1b8c-f13149f983c5.png)

####2. 格納データを決める

ドキュメントIDは今回自動設定にするので『自動』する。

・ID - 自動生成
・name　- 名前
・address - 所在地

上記3件をデータベースに格納していく設定にしました。

####3. データの見方

UserのID「JuoskBnz3Zt3JayLeVJy」という方のnamaeは「名前」でaddressは「東京都」という情報を見れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/7f059bf2-bf58-4f24-d8b4-a53eba2fc595.png)


####4. データ削除する

管理画面上からコレクションを削除したい場合は、縦3つの丸のアイコンをクリックすることで行える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/65b02167-7bc1-19cc-fec3-d9ee8c4c5d23.png)

削除の確認画面が表示されるので削除したいコレクションのIDを入力する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/1b6b324f-141f-d7d2-f3f2-439656b57a58.png)

##Firebaseプロジェクトにウェブアプリ追加を行う




##参考サイト
[Firebase CloudFirestoreの使い方を初心者が解説してみた]
(https://qiita.com/misa_m/items/0afbd063ff13b49f2729)
[【004】Cloud Firestoreの基本構造を理解する【Firebase】]
(https://www.youtube.com/watch?v=PyT0RN0WB2A)