2019.11追記

　ここに書いてあるのは古い内容で、あまり筋が良くなかったので現在は作業方針を変えています。詳しくは以下の記事をご覧ください。

前回までのあらすじ

　Nuxt.jsで記事編集画面を作りましたが、送信する先がまだありません。

　記事を保存するデータベースをFirebaseに用意します。

Firebaseの基本設定

Nuxt.jsとFirebaseを使って簡単なWebサービスを作る＜導入編＞｜東京のWeb制作会社｜non-standard world株式会社

　Firebaseの初期設定については上記のページを参考にしてください。全部書いてあります。

　大まかにまとめるなら

1. Firebaseのプロジェクトを作成
2. npm install -g firebase-tools
3. firebase login でログイン
4. firebase init hosting でプロジェクトを選択

　という流れです。

Firebase側の初期設定

　Firestoreに移動し、

　テストモードで開始します。

　「コレクションの追加」を選択し、

　posts コレクションを作成。

　適当に中身を設定します。

Nuxt.jsにFirebaseの設定情報を追加

Nuxt で Firebase を使う (Cloud Firestore & Hosthing) – かもメモ

　こちらの記事を参考に、まず環境変数を導入します。

yarn add @nuxtjs/dotenv

　でモジュールをインストールし、

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/markdownit',
    '@nuxtjs/dotenv'
  ],

　dotenvを追記。

.env というファイルを作成し、中身はfirebaseコンソールの埋め込みコードをコピー。

FB_API_KEY = "***"
FB_AUTH_DOMAIN = "***"
FB_DATABASE_URL = "***"
FB_PROJECTID = "***"
FB_STORAGE_BUCKET = "***"
FB_MESSAGING_SENDER_ID = "***"

環境変数をブラウザ上でも参照できるよう、nuxt.config.jsに

  env: {
    FB_API_KEY: process.env.FB_API_KEY,
    FB_AUTH_DOMAIN: process.env.FB_AUTH_DOMAIN,
    FB_DATABASE_URL: process.env.FB_DATABASE_URL,
    FB_PROJECTID: process.env.FB_PROJECTID,
    FB_STORAGE_BUCKET: process.env.FB_STORAGE_BUCKET,
    FB_MESSAGING_SENDER_ID: process.env.FB_MESSAGING_SENDER_ID
  },

　と追記。

plugins/firebase.jsというファイルを作成し、

const firebase = require('firebase/app')
require('firebase/firestore')
require('firebase/storage')
// .env に設定した値を取得
const config = {
  apiKey: process.env.FB_API_KEY,
  authDomain: process.env.FB_AUTH_DOMAIN,
  databaseURL: process.env.FB_DATABASE_URL,
  projectId: process.env.FB_PROJECTID,
  storageBucket: process.env.FB_STORAGE_BUCKET,
  messagingSenderId: process.env.FB_MESSAGING_SENDER_ID
}
if (!firebase.apps.length) {
  firebase.initializeApp(config)
}
export default firebase

firebaseから記事データを取得する

Cloud Firestore を使ってみる | Firebase

　公式ドキュメントが非常に丁寧なので大体のことは書いてありますが……。

　まずyarn add firebaseでプロジェクトにfirebaseをインストールし、

　pages/admin/post/create.vueのscriptタグのすぐ下に、

import firebase from '~/plugins/firebase.js'
const db = firebase.firestore()

export defaultの中に

  mounted() {
    db.collection('posts')
      .orderBy('id', 'desc') // IDの大きい順に並べて
      .limit(1) // 最新の1件のみを
      .get() // 取得
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          console.log(doc.data())
        })
      })
  },

　ここで一度yarn devします。（ホットリロードだとnuxt.config.jsが更新されないので、一度停止してから再起動させます）

　正しく進んでいれば、ページ（/admin/create/）にアクセスした時点で

　このようにテストで登録したデータが取得されます。

　このpostsコレクションに登録した記事の中から、最新10件を取得したり、カテゴリーで絞り込みしたりして、表示していくわけです。

　ようやくちょっとだけブログのイメージが見えてきたのではないでしょうか。

firebaseに記事データを送信する

idを自動で割り振る

　idは最新のidにプラス1すれば良いということにします。WordPressでは投稿以外の画像などの数字も重複しないようになっていましたが、そのためのコレクションを作るのも面倒なので、単純に最新記事のIDにプラス1します。

　data() では仮のIDを設定し、

 data() {
    return {
      id: 0,

　mounted()で取得した数字に1を足して、

        querySnapshot.forEach(doc => {
          this.id = doc.data().id + 1
        })

　 computedのpostの中に

id: this.id

　これでidが割り振られ、最初に登録した仮の記事と同じ情報が揃いました。

　※ちなみにこのIDはfirebaseのデータ名となるIDにも使用します。ドキュメント名とIDを揃えておくと、絞り込みを使わずにIDで直接参照できるようになります。

送信ボタンをクリックした際にデータを送信

        <div class="button is-link" @click="submit()">
          送信
        </div>

　onclickにsubmit() イベントを追加し、methodsに

    submit() {
      db.collection('posts')
        .doc(String(this.post.id))
        .set(this.post)
    }

この状態で

　新規記事を入力し、「送信」をクリックします。

　firebaseのコンソールを確認すれば

　新たなドキュメントが追加され、

　新規作成ページをリロードすれば次に投稿するデータのIDは10000002となります。

　投稿するドキュメントのIDを自動割り振りではなく数字にしているのは、

総括

　インポートのことと画像のことを考えなければもうブログとしてアップできる状態になりました。

　どのブログでも行う手順として共通化できるのは正直ここまでというか、nuxtに慣れている人であればここからは大体自分でできてしまうのではないかという気がしますが、もう少し続けます。

　次は「画像をFirebase Storageにアップロードする」「カテゴリー・タグをFirebaseに保存する」です。