Nuxt.jsでFirebaseのRealtimeDatabaseを簡単に触ってみる

とある案件でNuxt.jsからFirebaseのRealtimeDatabaseを利用することとなり、少し触ってみました。

RealtimeDatabaseとは

詳細の説明は省きますが、簡単に概要だけ説明しますと、FirebaseのRealtimeDatabaseは、NoSQLのクラウド型Databaseです。

全ての接続されたアプリケーションとデータを同期しており、オンラインになったタイミングで最新版を同期する仕組みでデータを保っています。

公式説明

RealtimeDatabaseを試してみる

Firebaseの接続

接続方法については別の記事で紹介しておりますので、そちらを参考ください。

参考記事

Nuxt.jsからRealtimeDabaseに接続する

import firebase from '~/plugins/firebase'

export default {
  methods: {
        solve: function () {
            var db = firebase.database();
            db.ref('results/')
                .set('test')
                .then(() => {
                  # 成功したらリダイレクト処理
                    this.$router.push("/path_to_other_page");
                }).catch(() => {
                    window.alert('エラーです。運営に問い合わせをお願いします。');
                })
            }
        }
    }
}

これだけでデータを保存することができます。

注意が必要なのは、非同期処理が行われるため、しっかりと制御しなければデータが保存されずにリダイレクトが走ってしまったりします。

そのため、.thenを用いて、非同期を制御し、保存に成功したらリダイレクトするようにしております。

まとめ

Nuxt.jsからFirebaseのRealtimeDatabaseを簡単に触ることができました。

データベースを自前で構築していくよりも簡単に試せて、かつ無料枠で利用できるため、ある程度の規模のアプリケーションであれば十分利用できるものだと思います。