Firebase Cloud Firestore を試してみた

イベント管理サービスのデータストレージ、バックエンドサービスとしてお手軽な[Firebase Cloud Firestore](https://firebase.google.com/products/firestore/?hl=ja)を試してみた。

#1.セットアップ
[スタートガイド](https://firebase.google.com/docs/firestore/quickstart?hl=ja)に沿ってDBをセットアップし、HTMLページからJSでデータを取得、登録できるようにする。
##1.0.Googleアカウントを取得する。
Googleアカウントが必要になるので、事前に取得しておきましょう。
##1.1.Cloud Firestore プロジェクトを作成する
###1.1.1.[Firebase コンソール](https://console.firebase.google.com/?hl=ja)を開いて新しいプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/230735/9d43306a-8253-41c0-467b-9bddf66161d7.png)
![image1.png](https://qiita-image-store.s3.amazonaws.com/0/230735/5c53a823-de78-2632-b4ef-e4ddc20a698e.png)
![image2.png](https://qiita-image-store.s3.amazonaws.com/0/230735/2afe736a-d662-b49d-4f9b-cbdcc50e1d0d.png)


###1.1.2.[DataBase] セクションで [データベースの作成] をクリックします。
![image3.png](https://qiita-image-store.s3.amazonaws.com/0/230735/0884cfab-c256-6957-5c25-b6dd9e390553.png)

###1.1.3.セキュリティモードを選択してデータベースを作成します。
![image4.png](https://qiita-image-store.s3.amazonaws.com/0/230735/f845cf96-bc6e-6b85-7569-fe8e0a10f958.png)

データベースができます。
![image5.png](https://qiita-image-store.s3.amazonaws.com/0/230735/51d68b6e-1dfa-b93f-2682-65051f8dd128.png)


#2.Firestoreでデータを登録する
Cloud Firestore データモデルは、柔軟な階層型データ構造に対応しています。
データはドキュメントに格納され、ドキュメントはコレクションにまとめられます。
ドキュメントには、サブコレクションの他に複雑なネスト オブジェクトを含めることができます。


ここでは例として、グループワークのチームを登録したり、
![image6.png](https://qiita-image-store.s3.amazonaws.com/0/230735/ac8f67a9-9c43-61dd-f17b-195019a1fa60.png)



メンバーを登録したりしています。（"belong"フィールドにteamsのドキュメントIDで所属チームを紐づけています。）
![image7.png](https://qiita-image-store.s3.amazonaws.com/0/230735/775e7b21-da36-6e34-f86d-d4585a22bc01.png)




＜データモデルイメージ＞

```javascript:xxx.js

{
    "teams": {
        "${チームID}": {
            "name": "${チーム名}"
        }
    },
    "members": {
        "${メンバーID}": {
            "belong": "${所属チームへの参照}",
            "name": "${メンバー名}"
        }
    }
}
```

#3.Webページでデータを検索する。
##3.1.WebアプリにFirestoreを追加します。
概要ページの「＜／＞」ボタン（WebアプリにFirestoreを追加）をクリックします。
![image8.png](https://qiita-image-store.s3.amazonaws.com/0/230735/cdfcf990-74f3-d7d0-ab82-e45f90e7add5.png)



表示されたスニペットをコピーします。
![3.1_2.png](https://qiita-image-store.s3.amazonaws.com/0/230735/670a225f-4023-79ca-0fa4-a591dd94f74e.png)

下記のようにHTMLに貼り付けます。

```html:xxx.html

<html>
<head>
    <script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: ${APIキー},
            authDomain: ${認証ドメイン},
            databaseURL: ${データベースURL},
            projectId: ${プロジェクトID},
            storageBucket: ${ストレージバケット}, //不要
            messagingSenderId: ${メッセージング用の送信ID} //不要
            };
        firebase.initializeApp(config);
</script>
</head>
</html>
```

##3.2.データを読み取ります。
下記のようにgetメソッドを使ってデータを読み取ります。（同期処理はイケてない・・・）

```html:xxx.html
<html>
<head>
    <script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: ${APIキー},
            authDomain: ${認証ドメイン},
            databaseURL: ${データベースURL},
            projectId: ${プロジェクトID},
            storageBucket: ${ストレージバケット}, //不要
            messagingSenderId: ${メッセージング用の送信ID} //不要
            };
        firebase.initializeApp(config);
</script>
</head>
<body>
    <script>
    // Initialize Cloud Firestore through Firebase
    var db = firebase.firestore();
 
    // チームを取得
    db.collection("teams").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            document.write(`${doc.id}<br/>`);
            document.write(`チーム名:=> ${doc.data().name}<br/><br/>`);
        });
    });
     
    // メンバーと所属チームを取得
    db.collection("members").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            doc.data().belong.get().then((belongObj) => {
                document.write(`${doc.id}<br/>`);
                document.write(`名前:=> ${doc.data().name}<br/>`);
                document.write(`所属:=> ${belongObj.data().name}<br/><br/>`);
            });
        });
    });
    </script>
</body>
</html>
```

#4.Webからデータを登録します。
項番４では、以下のようなモデルを使用します。
<データモデルイメージ>

```javascript:xxx.js

{
    "events": {
        "${ユニークID}": {
            "event_date"  : "${イベント日}",
            "event_name"  : "${イベント名}",
            "update_date" : "${追加日}"
        }
    }
}
```