前回の記事はこちら: Google Firebaseに入門してみた[0] – すきなものをすきといえるせかいにしたい

実際にFirebaseのデータベースにつないで、読み書きをしてみます。

App側はVue.jsを使うことにしました。Nuxt.jsを考えましたが、薄く軽く作る予定なので、シンプルにVue.jsで作ってみることにしました。

というわけで、インストール。

$ npm i vue-cli

インストールできたら、さっそくinitします。とりあえずデフォルトで良いのでEnterでサクサクすすめます。

$ npx vue init webpack

? Generate project in current directory? Yes
? Project name carbdb
? Project description A Vue.js project
? Author t4traw
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "carbdb".


# Installing project dependencies ...
# ========================

と思ったら、このコマンドでREADME.mdとかpackage.jsonが上書きされていましたorz これは最初にvueもinitしておくべきだったか……。

必要に応じて内容を戻し、とりあえずbuildしてみます。

$ npm run build

そしたら、distディレクトリが作られ、そこにビルドしたモノが入っています。

公開時はこのディレクトリの中を見てほしいので、firebaseのpublicディレクトリをdistに設定します。

~~~省略~~~
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
~~~省略~~~

この状態でdeployしてみます。

$ npm run deploy

デプロイ先のページがこんな感じになっていたら成功です。

Firebaseにつないでみる

Firebaseのコンソールからアプリケーションを追加します。

設定からプロジェクトの設定をクリックし、

今回はWEB Appなのでブラケットのアイコンをクリックします。

適当なニックネームをつけ、Hostingの設定もしておきます。

Firebase SDKの追加が表示されますが、とりあえず『コンソールに進む』をクリックして先に進んでください。

そしたらfirebaseとつなぐためのライブラリをインストールします。

$ npm i firebase

src/main.jsにさきほど作成したappの情報を追加します。

firebaseConfigの値については

ここをまるっとコピーすれば大丈夫なはずです。

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'

Vue.config.productionTip = false

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "carbdbapp.firebaseapp.com",
  databaseURL: "https://carbdbapp.firebaseio.com",
  projectId: "carbdbapp",
  storageBucket: "carbdbapp.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

データベースの読み書きをしてみる

次に、データベースの読み書きをしてみたいと思います。

シンプルなKVSのRealtime Databseを利用します。Cloud Firestoreは別の方法になっているようです。

Realtime Databseを選択し、ruleを変更します。

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

というわけで、文字を書き込み、リアルタイムで表示させてみます。

<template>
  <div>
    <input type="text" v-model="tweetText">
    <button type="submit" v-on:click="submitText()">送信</button>
    <ul>
      <li v-for="tweet in showTweets" v-bind:key="tweet.key">
        {{ tweet.body }}
      </li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'App',
  data () {
    return {
      database: null,
      tweetRef: null,
      tweetText: '',
      tweets: []
    }
  },
  created: function () {
    this.database = firebase.database()
    this.tweetRef = this.database.ref('tweets')

    var _this = this
    this.tweetRef.on('value', (snapshot) => {
      _this.tweets = snapshot.val()
    })
  },
  computed: {
    showTweets: function () {
      return this.tweets
    }
  },
  methods: {
    submitText: function () {
      this.tweetRef.push({
        body: this.tweetText
      })
      this.tweetText = ''
    }
  }
}
</script>

これで送信ボタンを押して見ると

無事データが送信されました。

ハマったり思ったことメモ

何も考えずアロー関数使ったら駄目だった

created: () =>{

}

みたいな感じで何も考えずアロー関数で書いていたのですが、動きませんでした。

参考: 【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita

書き換えて読んで成功してみて「あーなるほど」と思ったのですが、これは最初から「これアロー関数じゃ駄目かな？」と思えるようになりたい。

data returnをしっかり書かないといけない

  data () {
    return {
      database: null,
      tweetRef: null,
      tweetText: '',
      tweets: []
    }
  },

これを最初ちゃんと書かずにtweetTextだけにしていたらうまく動きませんでした。

Cloud Firestoreを使ってみたい

どうもRealtime Databaseより後発なのがCloud Firestoreらしく、どっちはドキュメント指向のNoSQLみたい。

いずれそっちの方も勉強してみたい。