Realtime Databaseの進化版という噂のFirestoreをVue.jsのプロジェクトで使ってみました。
参考
https://firebase.google.com/docs/firestore/quickstart?hl=ja
https://qiita.com/1amageek/items/8179aebe871beb230194
前提・環境
Vue.js, QuasarFrameworkなどで、Firebaseに作成しているアプリなどがある。
まだの方は、以下の記事など参照にしていただけますと幸いです。
https://qiita.com/yassyskywalker/items/d74ea3b0834145df5473
Realtime Databaseと違うところ
こちらの記事がものすごくわかりやすかったです！
https://qiita.com/1amageek/items/8179aebe871beb230194
要は、Realtime Databaseの進化した形がFirestoreのようです！
これは使うっきゃねー！という感じです！
Vue.jsプロジェクトに、Firestoreを導入する
Firestoreに関しては、ベータ版のため、手動でimportする必要があるようです。
firebaseをnpm installして、main.jsに記入します。
npm install firebase --save
main.js
import Vue from 'vue'
import firebase from 'firebase'
// Firestoreのimport
require('firebase/firestore')
// Firestoreの初期化
firebase.initializeApp({
apiKey: '### FIREBASE API KEY ###',
authDomain: '### FIREBASE AUTH DOMAIN ###',
projectId: '### CLOUD FIRESTORE PROJECT ID ###'
})
var db = firebase.firestore()
Firestoreをつかってみる。
Realtime Databaseと少し違います。よりSQLに近くなったな〜とぼんやり思っています。
コレクション・ドキュメントの追加
usersコレクションを、authuserのUIDを利用して、作成してみます。
参考:
https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja
- collectionにデータを追加するときは、addメソッドを使います。
const db = firebase.firestore()
db.collection("users").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
- ドキュメントID を指定する場合は、docで参照して、setメソッドでデータを追加します。
methods: {
const user = firebase.auth().currentUser
const uid = user.uid
const db = firebase.firestore()
db.collection('users').doc(uid).set(this.newUser)
}
シンプルでわかりやすそうですね!
コレクション・ドキュメントのデータの取得
<script>
methods: {
const user = firebase.auth().currentUser
const uid = user.uid
const db = firebase.firestore()
// collection内のすべてのデータを取得する
db.collection('users').get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`)
})
})
// ドキュメントを指定してデータを取得する
db.collection('users').doc(uid).get().then((doc) => {
if (doc.exists) {
console.log(doc.data())
}
else {
console.log('documentがありません。')
}
})
.catch((err) => {
console.log(err)
})
// whereでドキュメントのフィールドに合致するドキュメントを検索できる
db.collection('users').where('username', '==', 'yassy')
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(doc.id, ' => ', doc.data())
})
})
.catch((err) => {
console.log(err)
})
}
</script>
whereはかなり便利そう！ますますSQLライクになってる気がします。
QuasarFramework(Vue.js) + Firestoreで、ユーザー情報を作成する
Singup.vue
<template lang="html">
<div>
<div class="layout-padding row justify-center background-whitesmoke items-center">
<div class="col-xs-12 col-sm-7 col-lg-5">
<q-card class="q-card-background-white">
<q-card-main>
<div class="row">
<div class="col-sm-10 offset-sm-1 text-center">
<img src="~assets/quasar-logo-full.svg" class="logo-sized">
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-1 text-left">
<h5>新規登録</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-1 text-left">
<p style="font-size: 12px;">新規アカウントの登録をお願いします。</p>
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-1">
<q-field>
<q-input
v-model="username"
float-label="ユーザー名"
color="primary"
type="text"
pattern="^[0-9A-Za-z]+$"/>
</q-field>
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-1">
<q-field>
<q-input v-model="email" float-label="メールアドレス" color="primary" type="email"/>
</q-field>
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-1">
<q-field>
<q-input v-model="password" float-label="パスワード" color="primary" type="password"/>
</q-field>
</div>
</div>
<div class="row" style="padding-top: 20px;">
<div class="col-sm-10 offset-sm-1 text-right">
<q-btn color="primary" style="font-weight: bold;" @click="signUp">新規登録</q-btn>
</div>
</div>
<br>
<div class="row">
<p style="color:#027be3;font-size:12px;"><router-link :to="{ name: 'Login' }">すでに登録済みの方はサインインしてください</router-link></p>
</div>
</q-card-main>
</q-card>
</div>
</div>
</div>
</template>
<script>
import {
QBtn,
QCard,
QCardMain,
QField,
QInput
} from 'quasar'
import firebase from 'firebase'
export default {
name: 'signUpFirestore',
components: {
QBtn,
QCard,
QCardMain,
QField,
QInput
},
data () {
return {
username: '',
password: '',
email: '',
user_uid: '',
newUser: {
name: '',
username: '',
homepage: '',
comment: '',
tel: '',
sex: '',
public: true
}
}
},
methods: {
signUp () {
firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(
(user) => {
console.log('新規auth userの登録成功!')
this.createNewUser(user)
// Emailの確認もつけておく
user.sendEmailVerification().then(
() => {
alert('認証')
},
(err) => {
alert('EmailVerificationでerrが発生しました。', err)
}
)
this.$router.replace('/')
},
(err) => {
let errorCode = err.code
let errorMessage = err.message
alert(errorCode, errorMessage)
}
)
},
createNewUser (user) {
// UserのUIDをPKにして、users テーブルを作成する
const uid = user.uid
const username = this.username
const db = firebase.firestore()
this.newUser.username = username
db.collection('users').doc(uid).set(this.newUser)
.then(() => {
console.log('userコレクションの作成成功!')
})
.catch((err) => {
console.log(err)
})
}
}
}
</script>
<style lang="stylus">
.q-card-background-white
background white
.background-whitesmoke
background whitesmoke
height 100vh
.logo-sized
width 150px
margin 20px
</style>
Firebaseのコンソールで確認して、コレクションにデータが表示されていれば成功です！
usernameの重複をチェックする
firestoreのusersコレクションをチェックして、usernameの重複がないかを確認してから登録します。
methods: {
validateUsername () {
const username = this.username
if (username !== '') {
const db = firebase.firestore()
db.collection('users').where('username', '==', username).get()
.then((querySnapshot) => {
if (querySnapshot.empty) {
console.log('重複するusername無し:', querySnapshot)
this.validation.username = true
}
else {
console.log('重複するusername有り', querySnapshot)
this.validation.username = false
}
})
.catch((err) => {
console.log(err)
})
}
},
}
恐らくもっといい方法がありそうな気がするので、もし何かありましたら、ご教示いただけますと幸いです。
まとめ
個人的に、firestoreは、SQLぽい感覚で指示ができるので、かなり使いやすそうだなと感じました。あとクエリが強力そうなのも嬉しいですね。
今後は、firestore積極的に活用していきたいです！