PROGRAMMING

Vueのバックエンドにfirebaseを使ってみた

こんにちは。いっせいです。

今日はvueのバックエンドにfirebaseを利用していこうと思います!

firebaseの基本的な設定ができたら、そこからデータを取得できるようにしていきます。

そのあとはチャットルームへ移動できるようにしていきます。

今日の内容
・firebaseの基本的な設定
・firebaseからデータを取得する
・チャットルームの移動設定

今日はこんな感じでやっていこうと思います。

firebaseの基本的設定

firebaseの設定の仕方は下記のページに載っていますので、参考にしてみて下さい。

まずは諸々登録ができたら、以下のようにfirebaseを使う方法が説明されます。

四角で隠されている部分はきちんと保存しておき、ターミナルで以下を実行します。

$ npm install --save firebase

これでfirebaseのパッケージが使えるようになります。

そしたら、plugins/firebase.js というファイルを作成し、以下のように記述します。

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

if (!firebase.apps.length) {
 const config = {
   apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
 }
 firebase.initializeApp(config)
}

const db = firebase.firestore()
export {
 firebase,
 db
}

xxxxxxの部分は、先ほど保存した値を入れます。

それでは上のコードを分解して、理解していきたいと思います。

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

まずは、上の3つのコードですが、何を取得するために必要なのか。

下記のサイトを参考に解説していきます。パッケージについてちゃんと説明してあります。

import firebase from 'firebase/app'はfirebase全般の機能を利用するためのものです。

import 'firebase/auth'はログイン機能を利用するために必要です。

import 'firebase/firestore'はデータベース機能をい使うために必要です。

次は、下記の部分です。

if (!firebase.apps.length) {
 const config = {
   apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
 }
 firebase.initializeApp(config)
}

if (!firebase.apps.length)は、firebase の準備が出来ている場合のみに設定するという意味です。

あとの部分は自分の環境で利用できるようにするため、apikeyなどを読み込ませておきます。

const db = firebase.firestore()
export {
 firebase,
 db
}

const db = firebase.firestore()では、データベースをよく使用するので、dbと定義しておきました。

export {
 firebase,
 db
}

別のファイルでdbfirebaseを使えるようにexportしておきます。

それでは、このfirebaseからデータを取得していきましょう。

firebaseからデータを取得する

ドキュメントの取得

まずはfirebaseで「データベースの作成」ボタンを押して、データベースを作成していきます。

その後、テストモードを選択して「次へ」。

次の画面では、ロケーションに「asia-northeast1を選びます。

それでは、collectiondocumentを作成していきます。

collectiondocumentの説明は下記のページを参考して下さい。ここでは説明を省きます。

collection idは、"channels"にしておきます。フィールドに name と指定し、タイプに string 値に channel1 と指定します。

それでは、このchannelspages/index.vueで取得してみます。

<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase' // 追加


export default {
  components: {
    Messages,
    ChatForm,
  },
}
</script>

{ db }は先ほどplugins/firebaseで定義した部分ですね。const db = firebase.firestore()

それでは、mountedというfunctionを使って。channelsのデータを取得します。

moutedとは、簡単にいうと

画面読み込み時に実行されるfunctionのことです。詳しくは下記のページに書いてあります。

それでは、mountedchannels collectionのデータを取得していきます。

<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase'


export default {
  components: {
    Messages,
    ChatForm,
  },
   mounted () {
    db.collection('channels').doc('4Mgz8ScuOjUFegWJXFA7').get()
      .then((doc) => {
        console.log('doc.id: ', doc.id)
        console.log('doc.data(): ', doc.data())
    })
  }
}
</script>

db.collection('channels').doc('4Mgz8ScuOjUFegWJXFA7').get()

上のコードでは、データベースのコレクションIDドキュメントIDを指定しています。

db.collection(コレクションID).doc(ドキュメントID)こんな感じになりますね。

僕のだとこんな感じになります。

get()では、ドキュメントの値を取得しています。

      .then((doc) => {
        console.log('doc.id: ', doc.id)
        console.log('doc.data(): ', doc.data())
    })

.then((doc) =>では、get()の実行が成功した際に、引数に取得したい値を設定することで、その後の処理結果を格納することができます。

この場合は、docに取得したい値がありますので、docを引数に指定します。

console.log('doc.id: ', doc.id)では、ドキュメントIDが出力されるようになります。

console.log('doc.data(): ', doc.data()では、ドキュメントが出力されるようになります。

それでは、実際にどうなっているのか見てみましょう。

検証のconsoleで確認すると以上のようにできました。

検証のコンソールとは下記のことです。

複数のドキュメントの取得

次に複数のドキュメントを取得できるようにしましょう。

firebaseでのデータの取得の仕方は、下記のページを参考にしました。

上記のページでは、下のように複数の値を取得しています。

db.collection("cities").get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
    });
});

これを元に当てはめるとこんな感じになります。

  mounted() {
    db.collection('channels')
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach(function (doc) {
          // eslint-disable-next-line
          console.log(doc.id, ' => ', doc.data())
        })
      })
  },
}

これも上から解説していきます。

指定するのはcollectionだけで大丈夫です。ドキュメントは全て取得するので、ドキュメントのIDは指定する必要がありません。

querySnapshotとは複数のドキュメントの情報をもつ、スナップショットのことです。

そしてquerySnapshotdocに格納し、一つずつ出力できるようにしています。

console.log(doc.id, ' => ', doc.data())

これでドキュメントIDとドキュメントが出力されます。

'=>'の部分は必要なのかどうかがわかりませんが、firebaseで取得する時はこういう風にするとしておきましょう。

consoleで見るとこんな感じです。

layouts/default.vue に上のコードを移し、HTMLに表示できるようにしていきます。

HTML に表示するために data を作成し、doc の内容を datachannels にいれておくようにします。


export default {
  data () {
    return {
      channels: []
    }
  },
  mounted () {
    db.collection('channels').get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          this.channels.push(doc.data())
        })
      })
  }
}

 前回説明しましたが、javascript では data の値は this で取得できます。さらに this を使うことで値を変更することもできます。

それでは、HTMLに表示できるようにします。

<template>
  <div class="app-layout">
    <div class="sidebar">
      <p>チャンネル一覧</p>
      <p v-for="channel in channels">{{ channel.name }}</p>
    </div>
    <div class="main-content">
      <nuxt />
    </div>
  </div>
</template>

上のように書くことによって、channels の値にあるすべての値を書き出すことができます。

これでHTMLに反映されるようになりました。

まとめ

今日はfirebaseからデータを取得する作業をやりました。

次回はメイン機能となるチャット機能についてやっていきます!

最後まで読んでくださり、ありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.