FirebaseとVue.jsでデータ登録取得機能を構築してみた

![](https://day-journal.com/memo/images/try-050_01.gif)

<br>

![](https://day-journal.com/memo/images/try-050_00.png)

<br>

この記事は、[「Firebase Advent Calendar 2020」](https://qiita.com/advent-calendar/2020/firebase)の6日目の記事です。

### FirebaseとVue.jsでデータ登録取得機能を構築してみました :tada:  

<br>

事前準備

- FirebaseとVue.jsのログイン機能までの設定  
以前書いた記事からの続きで説明します。  
[FirebaseとFirebaseUIとVue.jsで複数プロバイダログイン機能を構築してみた](https://day-journal.com/memo/try-032)  

<br>

## バックエンド

まずは、バックエンドを構築していきます。
以前の記事で、認証機能までを追加したので今回はCloud Firestoreを設定します。 

![画像](https://day-journal.com/memo/images/try-050_02.png)
![画像](https://day-journal.com/memo/images/try-050_03.png)
![画像](https://day-journal.com/memo/images/try-050_04.png)
![画像](https://day-journal.com/memo/images/try-050_05.png)
![画像](https://day-journal.com/memo/images/try-050_06.png)

これだけでバックエンドの構築は完了になります :thumbsup: 

<br>

## フロントエンド
次に、フロントエンドを構築していきます。

実行環境

- node v12.7.0  
- npm v6.13.4  

<br>

src/views

#### Main.vue

```vue
<template>
    <div class='main'>
        <!--メニュー-->
        <Menu></Menu>
        <b-container>
            <b-row>
                <b-col sm='12' class='mb-3'>
                    <h3>ログイン済</h3>
                    <hr>
                </b-col>
                <b-col sm='3' class='mx-auto mb-3'>
                    <b-form-input v-model='id' placeholder='id'></b-form-input>
                    <b-form-input v-model='name' placeholder='name'></b-form-input>
                </b-col>
                <b-col sm='12' class='mb-5'>
                    <b-button variant='primary' v-on:click='postData'>登録</b-button>
                </b-col>
                <b-col sm='3' class='mx-auto mb-3'>
                    <b-table striped hover :items='items'></b-table>
                    <b-form-input v-model='text' placeholder='id'></b-form-input>
                </b-col>
                <b-col sm='12' class='mb-5'>
                    <b-button variant='success' v-on:click='getData'>表示</b-button>
                    <hr>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
    import Menu from '@/components/Menu.vue'
    // Firebase読み込み
    import firebase from 'firebase'

    export default {
        name: 'Main',
        components: {
            Menu
        },
        data() {
            return {
                id: '',
                name: '',
                text: '',
                items: []
            }
        },
        methods: {
            getData: function () {
                const  db = firebase.firestore();
                // データ取得
                db.collection('users').where('id', '==', Number(this.text)).get(
                ).then((querySnapshot) => {
                    querySnapshot.forEach((doc) => {
                        // テーブル表示
                        this.items = [doc.data()];
                    });
                }).catch((error) => {
                    console.log(error);
                    // テーブルリセット
                    this.items = [];
                });
            },
            postData: function () {
                const db = firebase.firestore();
                // データ登録
                db.collection('users').add({
                    id: Number(this.id),
                    name: String(this.name)
                }).then((response) => {
                    console.log(response);
                }).catch((error) => {
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped>
    h3 {
        margin-top: 50px;
        text-align: center;
    }
</style>
```

<br>

Firebaseを読み込みます。

```javascript
// Firebase読み込み
import firebase from 'firebase'
```

<br>

データ取得用の関数を設定します。

```javascript
getData: function () {
    const  db = firebase.firestore();
    // データ取得
    db.collection('users').where('id', '==', Number(this.text)).get(
    ).then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // テーブル表示
            this.items = [doc.data()];
        });
    }).catch((error) => {
        console.log(error);
        // テーブルリセット
        this.items = [];
    });
},
```

<br>

データ登録用の関数を設定します。

```javascript
postData: function () {
    const db = firebase.firestore();
    // データ登録
    db.collection('users').add({
        id: Number(this.id),
        name: String(this.name)
    }).then((response) => {
        console.log(response);
    }).catch((error) => {
        console.log(error);
    });
}
```

<br>

簡易ローカルサーバーで確認してみます。

```shell
npm run serve
```

<br>

ローカルサーバーを立ち上げて、ログインしてみます。データの登録と取得ができるようになっています :bulb: 

![画像](https://day-journal.com/memo/images/try-050_01.gif)  

Firebaseのコンソールで登録できているか確認してみます。

![画像](https://day-journal.com/memo/images/try-050_07.png)  

<br>

#### FirebaseとVue.jsでデータ登録取得機能の構築ができました :thumbsup: 

Firebaseは、Cloud Firestoreを利用することで細かい設定はまだまだあったりはしますが、手軽にデータの登録取得機能も構築できるので、AWS Amplifyと同じくサーバーレスアプリケーションを構築する時にとても便利です :bulb: 

AWS Amplifyでのデータ登録取得機能の記事、「[AWS AmplifyとVue.jsでデータ登録取得機能を構築してみた](https://day-journal.com/memo/try-035)」とも比べてみて頂ければと思います :grinning: 

<br>

Vue.js・Firebaseについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://day-journal.com/memo/tags/Vue-js" target="_blank">tags - Vue.js</a>
<a href="https://day-journal.com/memo/tags/Firebase" target="_blank">tags - Firebase</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>