こんにちは、みみです。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でも一緒なのかな。データ構造を考えることってコンテンツを考えることに繋がるから、当然と言えば当然なのかも知れない。