Photosynthesic blog

Nuxt.js と Firebase その2 : Cloud Firestore を使う

2019-01-19

ちょっと楽しくなってきた。

こんにちは、みみです。Firebase歴0ヶ月です。

前回の記事(Nuxt.js と Firebase を使ってWebアプリを作ってみる:インストール編 – Photosynthesic blog)で、開発開始って書いたけど、最後にもう一つ大事なもののインストールを忘れていました。

スポンサーリンク

Nuxtのディレクトリで、

npm install --save firebase

してfirebaseをNuxtにインストールします(今なら5.7.2 がダウンロードされます)。これで本当に準備完了。

データベース Cloud Firestore を使う

まずはデータベースの使い方から触ってみましょう。Firebaseには2種類のデーターベースがあって(データベースを選択: Cloud Firestore または Realtime Database  |  Firebase)Cloud Firestore がイチオシらしいのでそっちを使ってみました。

前回作ったplugins/firebase.jsをfirestoreが使えるように書き足します。

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

if (!firebase.apps.length) {
    firebase.initializeApp({
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        storageBucket: "<BUCKET>.appspot.com"
    })
}

const db = firebase.firestore()
const settings = { timestampsInSnapshots: true }
db.settings(settings)
export default db

Version 4.13.0 – April 19, 2018 のアップデートでTimestamp のクラスが追加されて?timestampsInSnapshotsの設定を入れないとエラーが出るようになっています。最初入れてなくて長々としたエラー文にびっくりしました。(参照:Firestore の Timestamp の仕様変更による警告と、その対処 – Qiita , Interface: Settings  |  Firebase

Firestoreからデータを取得する

似非エンジニアなので、これくしょんとどきゅめんと、すなっぷしょっと、とかよく分からん上に教科書の記載がちょっと古いので迷う迷う。手探り状態です。まあそれが楽しいのかも。

取り敢えず、コレクション全部を取ってきて一覧するスニペット。projectsというコレクションを取得して一覧表示。

get()は何も返してくれないみたいなので、v-ifで判別するのが良いのかな、と。

サブコレクションの使いどころがさっぱり分からないし、今のところFirestoreの良さみたいなものがイマイチ分かりませんが、まるっと無料でスタート出来るのはやっぱり凄い。

結局はデータ構造をしっかり考えなきゃならないのはどんなdbでも一緒なのかな。データ構造を考えることってコンテンツを考えることに繋がるから、当然と言えば当然なのかも知れない。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter