Vue.jsでFirebaseのFirestoreにアクセスしてデータを取得する

前回はvue-cli3で環境変数をどう扱うか試したので、続きをやります。

今回参考にしたページ
とりあえずFirestoreにアクセス出来るところまで
コンポーネントにしてみる

今回参考にしたページ

Vue.js + FirebaseでTodoアプリを作る - Qiita Vue.js + Firebaseでポートフォリオを作ろう！ - Qiita firebase - npm

とりあえずFirestoreにアクセス出来るところまで

思い出す意味で、まずは画面を表示させてみる。localhost:8080で画面が表示されることを確認。

$ yarn serve

firebaseのパッケージが必要なのでyarn addします。

$ yarn add firebase

main.js

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

require('firebase/database');

Vue.config.productionTip = false

var app = firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
});

const firestore = app.firestore()
firestore.settings({ timestampsInSnapshots: true })

export default firestore

var db = firebase.firestore();
db.collection("ramens").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

new Vue({
  render: h => h(App)
}).$mount('#app')

.env.local

VUE_APP_FIREBASE_API_KEY=xxxxxxxxxxx
VUE_APP_FIREBASE_AUTH_DOMAIN=xxxxxxxxxxx
VUE_APP_FIREBASE_DATABASE_URL=xxxxxxxxxxx
VUE_APP_FIREBASE_PROJECT_ID=xxxxxxxxxxx
VUE_APP_FIREBASE_STORAGE_BUCKET=xxxxxxxxxxx
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=xxxxxxxxxxx

.env.localに入力する情報はfirebaseのコンソールから取得することが出来る。

env

とりあえずfirestoreからデータを取得してコンソールに表示することは出来た。

console

コンポーネントにしてみる

全部main.jsに書くと当然つらいので、適当にコンポーネントにしてみる

main.js

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

components/Ramens.vue

<template>
  <div id="ramens">
    ramenramenramen
  </div>
</template>

<script>
import firebase from 'firebase'
import 'firebase/firestore'

require('firebase/database');

export default {
  name: 'ramens',
    components: {}
}

var app = firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
});

const firestore = app.firestore()
firestore.settings({ timestampsInSnapshots: true })

// export default firestore

var db = firebase.firestore();
db.collection("ramens").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

</script>

<style>
</style>

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Ramens />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Ramens from './components/Ramens.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    Ramens
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

同様にconsoleに出力された。OK。画面最下部にもコンポーネントにした分が表示されている。

component