前置き
便利なfirebase!
シンプルに導入の仕方を解説していきます😉
簡単なデータの書き込みと取得をしてみます🍒
firebaseとは
簡単に言うと
オンラインにデータを保存できて
取得もできる優れものです!
自分で1から作るとなると大変ですが
firebaseを使えば簡単ですね🌟
Firebase Realtime Database
どんな時に使うか?
ex1) チャットアプリ
リアルタイムにデータを保存・同期できるので
メッセージを送り合うことが簡単になります💌
ex2) フリマサイト!👕👖
会員情報とその会員が出品した商品が
DBに保存されていきます。
それを会員はいつでも編集でき、
反映したらすぐ表示が変わるわけです💡
会員自身でデータが作れて編集もできる!
といった感じです🌟
Referenceの読み方
基本的にfirebaseのreferenceは
英語の状態で表示し、
自分でgoogle翻訳で翻訳しましょう📚🔍
言語を日本語にすると
古いバージョンだったりするので、
最新の英語を翻訳していくのがベスト!⭕️
ただいきなり全部英語だと
欲しい情報がどこにあるか分からないので
最初は日本語で表示させて
ある程度検討をつけてから英語にしてます🍬
(英語も理解できるように頑張ろう…💪)
DBの種類と違い
firebaseのDatabaseは2種類あります。
Realtime Database
Cloud Firestore (Realtime Databaseの拡張版🌟)
動作や料金が変わってきます💰
基本は無料で使えます!👌
https://firebase.google.com/docs/database/rtdb-vs-firestore
基本はCloud Firestoreがオススメです💕
具体的な違いはここが参考になります!
https://techblog.kayac.com/rtdb-vs-firestore
Step1: firebaseのDBを作成
🍒1〜6はRDB版と全く同じです。
まずはここから!
Firebase
1. 「使ってみる」を押す
ログインしていない場合はログイン
そもそもアカウントがない場合は
Googleアカウントを作成してください🌟
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_e7d5d1c0f5f5890672cfaece8041dec5-1024x594.png?resize=920%2C534)
2. 「プロジェクトを追加」を押す
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_6b9d79332f45ffee7c3af9a2d9174c4b-1024x408.png?resize=920%2C367)
3. プロジェクト名を入力
下に表示されているsample-6a560が
プロジェクトIDになります。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_b9cd88ad12135ea11f0707b90d9152da-1024x680.png?resize=920%2C611)
4. Google アナリティクスの有無を選択
なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_41a32c29ed7b727bbe08ba9168849ae3-1024x746.png?resize=920%2C670)
5. アカウントを選択
Default Account for Firebaseを選択
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_a89a629fb9b6fa8b7a0c005f04efeccf-1024x668.png?resize=920%2C600)
これでプロジェクトが完成🎉✨
プロジェクト概要画面へ移行します🌱
6. サイドメニューのDatabaseを押す
まずはここから!
Firebase
1. 「使ってみる」を押す
ログインしていない場合はログイン
そもそもアカウントがない場合は
Googleアカウントを作成してください🌟
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_e7d5d1c0f5f5890672cfaece8041dec5-1024x594.png?resize=920%2C534)
2. 「プロジェクトを追加」を押す
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_6b9d79332f45ffee7c3af9a2d9174c4b-1024x408.png?resize=920%2C367)
3. プロジェクト名を入力
下に表示されているsample-6a560が
プロジェクトIDになります。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_b9cd88ad12135ea11f0707b90d9152da-1024x680.png?resize=920%2C611)
4. Google アナリティクスの有無を選択
なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_41a32c29ed7b727bbe08ba9168849ae3-1024x746.png?resize=920%2C670)
5. アカウントを選択
Default Account for Firebaseを選択
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_a89a629fb9b6fa8b7a0c005f04efeccf-1024x668.png?resize=920%2C600)
これでプロジェクトが完成🎉✨
プロジェクト概要画面へ移行します🌱
6. サイドメニューのDatabaseを押す
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_7ee8d593b2d2e782c420a8230c595fe3-1024x367.png?resize=920%2C330)
7. DBの種類を選択、作成
Cloud Firestoreを選択!
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_cb25ce53859a30647cac164ef6956063-1024x402.png?resize=920%2C361)
8. セキュリティルールを選択
テストモードで読み取りと書き込みを
許可しておきましょう!
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_1a302afef35ecb231503f08e3665977b-1024x823.png?resize=920%2C739)
これでDatabaseができました🤗🎉
Step2: Appの作成
🍒RDB版と全く同じです。
ウェブアプリにfirebaseを追加していきます!
1. ダッシュボードから</>ウェブを選択
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_620150c70323ed558911078eb7867777-1024x367.png?resize=920%2C330)
2. アプリのニックネームを入力
Firebase Hostingの設定は今回はなしで⭕️
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_2693b5decf43f13fd1b01eefa8165f7c-1024x729.png?resize=920%2C655)
3.「コンソールに進む」を押す
コードはいつでも確認できるので飛ばしてOK
これでダッシュボードから
アプリが確認できるようになりました🤗
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_41c01d1451b01ad6af7e239ceadcc02e-1024x356.png?resize=920%2C320)
Step3: firebaseのインストール
🍒RDB版と全く同じです!
兎にも角にもまずはインストール!!!🤖
https://firebase.google.com/docs/web/setup
referenceのnode.jsタブを見ていきます👀
Nuxtには初めからpakage.jsonがあるので
$npm initは不要ですね!
terminal
$ npm install --save firebase
これでpakage.jsonのdependenciesに
firebaseのバージョンが追加されます!
) file
1 2 3 4 5 6 7 8 |
{ "dependencies": { "firebase": "^7.12.0", "nuxt": "^2.0.0", "vue": "^2.6.11", "vue-template-compiler": "^2.6.11" }, } |
Step4: firebaseと連携する
🍒RDB版と全く同じです!
plugin/firebase.jsを作ります🌟
Step3で見たreferenceの続きです。
firebaseをimport
firebase.initializeApp()アプリでfirebaseの初期化
その中にFirebase SDK snippetを貼り付け
(Step2で作成したアプリのコード)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import firebase from "firebase/app" import 'firebase/firestore' if (!firebase.apps.length) { firebase.initializeApp({ apiKey: "貼り付け", authDomain: "貼り付け", databaseURL: "貼り付け", projectId: "貼り付け", storageBucket: "貼り付け", messagingSenderId: "貼り付け", appId: "貼り付け", measurementId: "貼り付け" }) } export default firebase |
apiKeyなどの見方は
firebaseプロジェクトダッシュボードの
ここの歯車を押して…
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_27cfd9214639c9b7174f0dab0ba08090-1024x365.png?resize=920%2C328)
この画面の下にある…
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_196ca73fca6d63fd6f6c55c5dbdda8b6-1024x383.png?resize=920%2C344)
ここです!
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_12952cd965ae5fafb362a4f18218c021-1024x996.png?resize=920%2C895)
これで準備は整いました🙌
Step5: DBにinputでデータを追加してみる
現在のDBには何もありません。
導入編RDB版でRDBは作成済みのため、
sample-6a560が表示されていますが
Cloud Firestore内にはデータがありません。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_5842f6eee885927cbf362dfb3a883569-1024x442.png?resize=920%2C397)
inputでこのデータを送信してみましょう📤
![画像に alt 属性が指定されていません。ファイル名: picture_pc_7518be32077333da6ec3679c2a3dbae8-1024x226.png](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_7518be32077333da6ec3679c2a3dbae8-1024x226.png?resize=920%2C203)
コード
) pages
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<template> <div class="page"> <label> <span> お名前: </span> <input type="text" v-model="user.name" > </label> <label> <span> email: </span> <input type="text" v-model="user.email" > </label> <button type="button" @click="submit" > Submit </button> </div> </template> <script> import firebase from '@/plugins/firebase' export default { data () { return { user: { name: "", email: "" }, } }, methods: { submit () { const db = firebase.firestore() let dbUsers = db.collection('users') dbUsers .add({ name: this.user.name, email: this.user.email, }) .then(ref => { console.log('Add ID: ', ref.id) }) }, }, } </script> |
setの場合
) pages
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> import firebase from '@/plugins/firebase' export default { data () { return { user: { name: "", email: "" }, } }, methods: { submit () { const db = firebase.firestore() let dbUsers = db.collection('users').doc('doc名') .set({ name: this.user.name, email: this.user.email, }) }, }, } </script> |
表示
Databaseに反映されていますね🤗
consoleに表示されたkeyとも
バッチリ合っています🌟
(途中で切れていますが合ってます)
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_15559296ac38afc83e5724c66609327a-1024x359.png?resize=920%2C323)
解説
- plugin/firebase.jsをimportする
- firebase.firestore().collection('コレクション名')
databaseのコレクションを指定します。
今回はusersにしています。 - add
データの書き込みmethodには
add, set, updateがあります。
add: 追加
set: .doc('{id名}')で指定
既にあるidに上書き
なければ追加
Add data to Cloud Firestore - .then
通信が成功した時の処理を書きます。
ref.idでコレクション内のidを確認できます。
上手くいかない
テストモードではなく
ロックモードになっている可能性があります。
その場合はDatabaseのルールを
trueにしてみてください〜!
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_0232c47ff20f2a605ce4f6de2d235382-1024x658.png?resize=920%2C591)
Step6: DBからデータを取得してみる
先ほどのデータを取得してみましょう!📥
keyでまとまったデータ全てではなく、
このkeyのnameだけを取得してみます🌟
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_15559296ac38afc83e5724c66609327a-1-1024x359.png?resize=920%2C323)
コード
) pages
methodsのgetDataを追加し、
template内でdivで表示させます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<template> <div class="page"> <label> <span> お名前: </span> <input type="text" v-model="user.name" > </label> <label> <span> email: </span> <input type="text" v-model="user.email" > </label> <button type="button" @click="submit" > Submit </button> <button type="button" @click="getData" > getchData </button> <div id="user.name" /> </div> </template> <script> import firebase from '@/plugins/firebase' export default { data () { return { user: { name: "", email: "" }, } }, methods: { submit () { const db = firebase.firestore() let dbUsers = db.collection('users') dbUsers .add({ name: this.user.name, email: this.user.email, }) .then(ref => { console.log('Add ID: ', ref.id) }) }, getData () { const db = firebase.firestore() let docUsers = db.collection('users').doc('8Ner2tNFSFmXYq3hDYck') docUsers .get() .then(function(doc) { document.getElementById("user.name").innerHTML = (doc.data().name) }) }, }, } </script> |
表示
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_a8ba4503bde4c30692872d1297f55887.gif?resize=795%2C170)
解説
- .doc
idの指定をします!
firebase.firestore().collection('users').doc('{id名}') - doc.data().name
指定したidのdata内、nameを指定しますhttps://firebase.google.com/docs/firestore/query-data/get-data
分かりやすくdivで表示させましたが
実際あまり使わないと思うので
pushを使ってdataで表示に変更します🌟
) pages
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<template> <div class="page"> <label> <span> お名前: </span> <input type="text" v-model="user.name" > </label> <label> <span> email: </span> <input type="text" v-model="user.email" > </label> <button type="button" @click="submit" > Submit </button> <button type="button" @click="getData" > getchData </button> <p>{{ dbData }}</p> </div> </template> <script> import firebase from '@/plugins/firebase' export default { data () { return { user: { name: "", email: "" }, dbData: "", } }, methods: { submit () { const db = firebase.firestore() let dbUsers = db.collection('users') dbUsers .add({ name: this.user.name, email: this.user.email, }) .then(ref => { console.log('Add ID: ', ref.id) }) }, getData () { const db = firebase.firestore() let docUsers = db.collection('users').doc('8Ner2tNFSFmXYq3hDYck') let dbData = [] this.dbData = dbData docUsers .get() .then(function(doc) { dbData.push(doc.data().name) }) }, }, } </script> |