Home > FIRESTOREに移行したら色々と楽になった話

FIRESTOREに移行したら色々と楽になった話

FIRESTOREに移行したら色々と楽になった話

Fri Dec 07 2018

技術スタック

Nuxt (Vuetify) + Firebase + Netlify

今回SPA(generate)としてデプロイしています。

フロントの話はNuxt.js Advent Calendar 21日目にて。

半年前より制作開始..

DB設計楽チン、ですがどこか無法地帯な印象。より構造化されたFirestoreに移行すると解決することも多々存在したので今回軽く話します。

クエリはEcmaScript構文を駆使すればRealtime DBでも何とかなります。

多彩な型をサポート

Consoleで新たなデータベースを作成するとわかるが、文字列や数値のみならず、バイナリやタイムスタンプ、地理的位置などサポートも多い。

ソート、特に降順で発揮

言われずとも分かる方は分かると思いますが、これがFirestoreを採用すると決定的に楽です。VuetifyのData Tablesにある機能を使って誤魔化していたことはもう過去のもの。

実装を要所で (対比しながら)

初期設定は大差無い。

予めプロジェクトIDなど必要な設定を忘れないようする。

// Realtime DB
const adminDB = Admin.database();

// Firestore
const adminFirestore = Admin.firestore();
adminFirestore.settings({
  timestampsInSnapshots: true
});

インポートの指定先に注意、Firestoreに移行するのでfirebase/firestoreを指定。

この時firebase/appを指定してインポートしないとgRPC関連のエラーに引っ掛かります。

// Realtime DB
import firebase from 'firebase'

// Firestore
import firebase from 'firebase/app'
import 'firebase/firestore'

取得処理

Realtime DBで苦しむ「降順」を楽に実現!

Flamelinkも今後、Firestoreが使えるようになったら、確実に大化けしそうです。

// Realtime DB
tipsRef.orderByChild('time')

// Firestore
tipsCollection.orderBy('time', 'desc').get()
    .then(snapshot => {
      let result = {
        item: []
      }
      snapshot.forEach(doc => {
        // console.log(doc.id + ' ' + doc.data())
        result.item.push({
          id: doc.id,
          data: doc.data()
        })
      })
      commit('setTips', result)
    })

更新処理

個人的にこの箇所が凄く分かり易くなった、という印象。

collectionで指定のデータベースを、documentで指定のキーを特定した上で更新する。

// Realtime DB
let updates = {};
updates['/tips/' + key] = {
    title: data.title,
    url: data.url,
    description: data.description,
    tags: data.tags,
    event: data.event,
    time: data.time
  };
Admin.database().ref('tips').update(updates);

// Firestore
Firestore.firestore().collection('tips').doc(key).set({
    title: data.title,
    url: data.url,
    description: data.description,
    tags: data.tags,
    event: data.event,
    time: data.time
  });

削除処理

nullを指定する、という何とも言えない方法を取っていましたが、

専用のAPIで削除できるようになりました。

// Realtime DB
let updates = {};
updates['/tips/' + key] = null;
Admin.database().ref('tips').update(updates);

// Firestore
Firestore.firestore().collection('tips').doc(key).delete();

コメントを残す

※ 返信が必要な方はメールアドレスも入力してください