この記事はただの集団 Advent Calendar 2019の5日目の記事です。
( 内容が薄くて大変申し訳ありません )

ざっくりFirestore + Vue.jsの使い方

フロントエンドでも簡単にサーバーサイド込みで実装できると噂のFirebaseを
いじってみたので簡単にですがFirebaseのサービスの一つFirestore についてまとめてみました。

● Firestoreについて

Firestore は Realtime Database の進化版のようなものです。
ドキュメント指向のいわゆる NoSQL と言われるタイプのDBで、
MongoDBとかDynamoDBと同じカテゴリに入るやつです。

● 開発環境

• Mac : Mojave ~ Catalina
• Node.js : v10.17.0 (nodebrewでバージョン管理)
• yarn : v1.19.1 (brewでインストール)
• Vue CLI : v3.12.1 (globalにインストール)
• Firebase CLI : v7.8.1 (globalにインストール)

■ 初期設定

社内の勉強会で使用した資料ですが、下記を参考に初期設定。

■ Firebaseパッケージをインストール

terminal

# firebaseパッケージをインストール
$ yarn add firebase

# authとか使うときに便利らしいのでとりあえずいれる
$ yarn add firebaseui

■ Firebaseパッケージをインポートする

/src/plugins/firebaseConfig.js

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/storage";
import "firebase/auth";

// ↓は各自異なる値になると思います
const firebaseConfig = {
  apiKey: "hogehoge",
  authDomain: "hoge.firebaseapp.com",
  databaseURL: "https://hoge.firebaseio.com",
  projectId: "hoge",
  storageBucket: "hoge.appspot.com",
  messagingSenderId: "123456789",
  appId: "hogefuga"
};

export default firebase.initializeApp(firebaseConfig);

/src/plugins/firestore.js

// initializeしたものをimportする
import firebase from "@/plugins/firebaseConfig";
export default firebase.firestore();

/src/plugins/cloudStorage.js

// initializeしたものをimportする
import firebase from "@/plugins/firebaseConfig";
export default firebase.storage();

● Firestoreを試す

あくまでサンプルなので、誰でも全件データが編集削除できるザル仕様になってます。
コード自体も簡略化していますので、そのままだと動かない可能性が・・・

■ Create

src/views/Create.vue

<template>
<div class="create">
  <input v-model="inputData.name" type="text">
  <button @click="create">送信</button>
</div>
</template>
<script>
import Firebase from 'firebase/app'
import db from '@/plugins/firestore'
export default {
  data () {
    return {
      inputData: {
        name: '',
      }
    }
  },
  methods: {
    create () {
      db.collection('records')
        .add({
          name: this.inputData.name,
          createBy: this.$store.state.user.uid,
          createAt: Firebase.firestore.Timestamp.now(),
          updateAt: Firebase.firestore.Timestamp.now()
        })
        .then(docRef => {
          alert(`Document written with ID: ${docRef.id}`);
        })
        .catch(error => {
          alert(`Error adding document: ${error}`);
        });
    }
  }
}
</script>

■ Read

/src/views/Read.vue

<template>
  <div class="read">
    <ul>
      <li v-for="(record, index) in records" :key="index">
        {{ record.data.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import Firebase from 'firebase/app'
import db from '@/plugins/firestore'
export default {
  data () {
    return {
      records:[]
    }
  },
  methods: {
    read () {
      // とりあえず全件取得。
      db.collection('records')
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            this.records.push({
              id: doc.id,
              data: doc.data()
            })
          })
        })
    }
  },
  created () {
    this.read()
  }
}
</script>

↓取得条件を含めるとこんな感じで書けるらしい。

/src/views/Read.vue

<script>
// 前略
read () {
  db.collection('records')
    .where('createBy', '==', this.$store.state.user.uid)
    .then(querySnapshot => {
      querySnapshot.forEach(doc => {
        this.records.push({
          id: doc.id,
          data: doc.data()
        })
      })
    })
}
// 後略
</script>

■ Update

/src/views/Update.vue

<template>
  <div class="update">
    <input v-model="recordId" type="text">
    <input v-model="editedData.name" type="text">
    <button @click="delete">更新</button>
  </div>
</template>
<script>
import Firebase from "firebase/app";
import db from "@/plugins/firestore";
export default {
  data () {
    return {
      recordId: 'hoge',
      editedData: {
        name: '',
        updateAt: Firebase.firestore.Timestamp.now()

      }
    }
  },
  methods: {
    // 指定されたIDのdataを更新する
    update () {
      db.collection('records')
        .doc(this.recordId)
        .update(this.editedData)
        .then(() => {
          alert('Document successfully updated!')
        })
        .catch(error => {
          console.log('Error updating document: ', error)
        })
    }
  }
}
</script>

■ Delete

/src/views/Delete.vue

<template>
  <div class="delete">
    <input v-model="recordId" type="text">
    <button @click="delete">削除</button>
  </div>
</template>
<script>
import Firebase from 'firebase/app'
import db from '@/plugins/firestore'
export default {
  data () {
    return {
      recordId: 'hoge',
    }
  },
  methods: {
    // 指定されたIDのdataを削除する(物理削除)
    delete () {
      db.collection('records')
        .doc(this.recordId)
        .delete()
        .then(() => {
          alert('Document successfully deleted!');
        })
        .catch(error => {
          console.log('Error removing document: ', error)
        })
    }
  }
}
</script>

おまけ

Cloud Storageも主題として書きたかったのですが、Update,Delete機能が間に合いませんでした。
でも折角なので載せておきます

■ Create

/src/views/CreateStorage.vue

<template>
<div class="createStorage">
  <input type="file" @change="onFileChange">
  <button @click="fileSubmit()">登録</button>
</div>
</template>
<script>
import storage from '@/plugins/cloudStorage'
import db from '@/plugins/firestore'
export default {
  data  () {
    return {
      // uploadするファイルを格納
      file: [],
      // 登録用meta情報
      submitData: {
        filePath: '',
        createBy: this.$store.state.user.uid
      },
    }
  },
  methods: {
    onFileChange() {
      this.submitData.filePath = this.file.name;
    },
    fileInfoRegister(meta_data) {
      db.collection('meta')
        .add(meta_data)
        .then(docRef => {
          console.log(docRef)
        })
        .catch(error => {
          console.log(error)
        });
    },
    fileSubmit() {
      if (this.file.name) {
        // storageのrootディレクトリにファイルを保存する想定
        storage.ref()
          .child(`${this.submitData.filePath}`)
          .put(this.file)
          .then(snapshot => {
            console.log(`Uploaded a file: ${snapshot.metadata.fullPath}`)
          })
          .catch(error => {
            console.error(`${error.code}:${error.message}`)
          })
          this.fileInfoRegister(this.submitData)
          this.submitData = {}
        }
      }
    },
  }
}
</script>

■ Read

/src/views/ReadStorage.vue

<template>
<div class="readStorage">
  <ul>
   <li v-for="(refImgUrl, index) in refImgUrls" :key="index">
      <img :src="refImgUrl">
   </li>
  </ul>
</div>
</template>
<script>
import storage from '@/plugins/cloudStorage'
import db from '@/plugins/firestore'
export default {
  data  () {
    return {
      // dbから取得したもの
      getImgUrls: [],
      // storageからrefで取得したもの
      refImgUrls: [],
    }
  },
  methods: {
    fileRead () {
      db.collection('meta')
        .where('createBy', '==', this.$store.state.user.uid)
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            this.getImgUrls.push({
              id: doc.id,
              data: `${doc.data().parentDir}${doc.data().fileName}`
            })
          })
          this.getImgUrls.forEach(ref => {
            storage
              .ref()
              .child(ref.data)
              .getDownloadURL()
              .then(url => {
                this.refImgUrls.push(url)
              })
              .catch(error => {
                console.log(error)
              })
          })
      })
    }
  }
  created() {
    this.fileRead()
  },
}
</script>

あとがき

FirebaseはJSが読み書きできれば、自分のアイディアを形にできるので触っていてとても楽しいです。
デメリットがあるとすれば、各種rulesファイルの書き方が独特だということでしょうかね。
ちなみにサンプルコードはテストモードで動かしてますので、権限周りのルールは本当にザルです。

今回は題材をFirestoreに絞りましたが、
Cloud Storage のリベンジと Firebase Authenticationでの権限設定
Cloud Functions + Firebase Admin SDKで通知設定なども機会があれば記事を書いて見ようかと思います。