FirebaseでCRUD機能を実装する

#はじめに
Firebaseの機能の1つである、Firestoreを使用して、WebアプリにCRUD機能を実装する機会があったので、その手順を記録しておきたいと思います。
FirestoreはNoSQLのため、SQLなしでDBと通信をすることができます。

#事前準備

![スクリーンショット 2021-05-30 0.23.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/7331bac2-53fe-b1d9-6bbc-ca6ff4833edb.png)


```HTML:index.html
<body>
    <h1>Firestore-test</h1>
    Document名<input type="text" id="document">
    内容<input type="text" id="content">
    <button onclick="add()">追加</button>
    <button onclick="getData()">読み取り</button>
    <button onclick="add()">更新</button>
    <button onclick="deleteData()">削除</button><br>
</body>
```
事前準備として、上記の内容のファイルを作成しておきます。

#Firebaseプロジェクトの作成

通常通りFirebaseのプロジェクトを作成します。
初めての方は[こちらの記事](https://qiita.com/c-shiraga/items/869a296799443e1388ce#firebase%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)の、プロジェクト作成部分を参考にしてみてください。

#Firebaseの設定

##1. プロジェクトにWebアプリを追加

プロジェクト作成後、Webアプリを追加します。
初めての方は、[こちらの記事](https://qiita.com/c-shiraga/items/97a661811d9f5326a071#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%ABweb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E8%BF%BD%E5%8A%A0)を参考にしてください。
今回は、index.htmlに全て記述します。

```HTML:index.html
<body>
    <h1>Firestore-test</h1>
    Document名<input type="text" id="document">
    内容<input type="text" id="content">
    <button onclick="add()">追加</button>
    <button onclick="getData()">読み取り</button>
    <button onclick="add()">更新</button>
    <button onclick="deleteData()">削除</button><br>

    <!-- ここからfirebaseの設定 -->
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>

    <script>
    var firebaseConfig = {
        apiKey: "Your_apiKey",
        authDomain: "Your_authDomein",
        projectId: "Your_projectId",
        storageBucket: "Your_storageBucket",
        messagingSenderId: "Your_messagingSenderId",
        appId: "Your_appId",
        measurementId: "Your_measurementId"
    };
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
    </script>
    <!-- ここまでfirebaseの設定 -->
</body>
```
上記のようになります。

##2. Firestoreの設定

![スクリーンショット 2021-05-29 22.18.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/fb88d0a5-37b8-588d-d12b-d569299b06bd.png)
設定 → プロジェクトの設定を選択
デフォルトのGCPリソースロケーションを「asia-northeast1」に設定します。
※asia-northeast1は東京を示しています。海外等に指定する場合は、任意のものとしてください。
<br>

![スクリーンショット 2021-05-29 22.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/6162e04f-7ccc-7f88-886f-02610fd3bc30.png)
Firestore Database → データベースの作成
<br>

![スクリーンショット 2021-05-29 22.18.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/d144b595-b559-fe40-6966-5ede8b0f9a75.png)
テストモードを選択 → 次へ → 有効にする
※本番で使用する場合は、本番環境を選択してください
<br>

![スクリーンショット 2021-05-29 22.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/ccdf4b5e-26d4-838d-5ee2-293c67a9d9e9.png)
上記画面が出れば、設定完了です。この画面にDBの内容が表示されます

##3. CRUD機能の追加
Firestoreを使用するため、事前に以下のコードを追記します

```HTML
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>
```

```HTML:index.html
<!-- ここからfirebaseの設定 -->
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>
```
index.htmlファイルが上記のようになります。
<br>

```JavaScript
const db = firebase.firestore();
```
全機能に共通している、上記コードも忘れずに記述してください。

###追加、更新機能

```JavaScript
// 追加、更新用のメソッド
    const add = async () => {
        const contentData = document.getElementById('content').value;
        const documentData = document.getElementById('document').value;
        const docRef = db.collection('PostList').doc(documentData);
            await docRef.set({
                content: contentData
            });
    }
```
documentと内容を記述し、Firestoreに追加します。
更新の場合は、documentoを指定すれば良いので、同じ動作で問題ないです。
<br>

###読み取り機能

```JavaScript
    // 読み取り用メソッド
    const getData = async () => {
        const snapshot = await db.collection('PostList').get();
        snapshot.forEach((doc) => {
            console.log(doc.id, '=>', doc.data());
        });
    }
```
コレクション名「PostList」の全データを取得し、コンソールに表示させます。
<br>


###削除機能

```JavaScript
    // 削除用のメソッド
    const deleteData = async () => {
        const documentData = document.getElementById('document').value;
        await db.collection('PostList').doc(documentData).delete();
    }
```
document名を入力することで、そのdocumentを削除できます。
<br>

###完成したHTMLファイル

```HTML:index.html

<body>
    <h1>Firestore-test</h1>
    Document名<input type="text" id="document">
    内容<input type="text" id="content">
    <button onclick="add()">追加</button>
    <button onclick="getData()">読み取り</button>
    <button onclick="add()">更新</button>
    <button onclick="deleteData()">削除</button><br>

    <!-- ここからfirebaseの設定 -->

    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>

    <script>
    var firebaseConfig = {
        apiKey: "Your_apiKey",
        authDomain: "Your_authDomein",
        projectId: "Your_projectId",
        storageBucket: "Your_storageBucket",
        messagingSenderId: "Your_messagingSenderId",
        appId: "Your_appId",
        measurementId: "Your_measurementId"
    };
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
    // ここまでfirebaseの設定

    const db = firebase.firestore();
    
    // 追加、更新用のメソッド
    const add = async () => {
        const contentData = document.getElementById('content').value;
        const documentData = document.getElementById('document').value;
        const docRef = db.collection('PostList').doc(documentData);
            await docRef.set({
                content: contentData
            });
    }

    // 読み取り用メソッド
    const getData = async () => {
        const snapshot = await db.collection('PostList').get();
        snapshot.forEach((doc) => {
            console.log(doc.id, '=>', doc.data());
        });
    }

    // 削除用のメソッド
    const deleteData = async () => {
        const documentData = document.getElementById('document').value;
        await db.collection('PostList').doc(documentData).delete();
    }
    </script>
</body>
```

##4. Firebaseの初期化
おなじみの初期化処理を行います。
初めての方は[こちらの記事](https://qiita.com/c-shiraga/items/869a296799443e1388ce#firebase%E6%A9%9F%E8%83%BD%E3%81%AE%E8%A8%AD%E5%AE%9A)のFirebase機能の設定 → firebase initの部分からやってみてください。
今回はFirestoreも使用するため、FirestoreとHostingを選択してください。
Firestore関連の選択肢は、全てエンターでOKです。

#機能の検証

```
firebase serve
```
を実行し、ローカルサーバーを立ち上げます。

- document名、内容を入力し追加、更新
- 読み取りボタンでコンソールに表示
- document名を入力し削除

上記3つが機能すれば成功です。

#あとがき
今回は、FirestoreでCRUD機能を実装する手順を記述しました。
Firebaseはとても便利なので、これからも色々なアプリを作っていきたいと思います。