【Nuxt.js】firebase導入編(firestore版)：データの追加 取得をしよう

# 前置き

便利なfirebase！
シンプルに導入の仕方を解説していきます😉
簡単なデータの書き込みと取得をしてみます🍒

❓そもそもfirebaseとは
簡単に言うと
オンラインにデータを保存できて
取得もできる優れものです！
自分で1から作るとなると大変ですが
firebaseを使えば簡単ですね🌟
https://firebase.google.com/docs/database

❓どんな時に使うか
例えば、チャットアプリ！
リアルタイムにデータを保存・同期できるので
メッセージを送り合うことが簡単になります💌

例えば、フリマサイト！👕👖
会員情報とその会員が出品した商品が
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を作成

https://firebase.google.com/?hl=ja

まずはここから
**1. 「使ってみる」を押す**
ログインしていない場合はログイン
そもそもアカウントがない場合は
Googleアカウントを作成してください🌟

![step1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/8961944f-b8e9-25a7-cf55-dae91f448623.png)

**2. 「プロジェクトを追加」を押す**

![step2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/4ec0b779-8a45-aa79-b843-364112a4ed55.png)

**3. プロジェクト名を入力**
下に表示されているsample-6a560が
プロジェクトIDになります。

![step3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/1bebbf25-7f04-b193-a74f-ff5d1b9609ce.png)

**4. Google アナリティクスの有無を選択**
なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択

![step4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/2d0743c4-bc82-c16c-5491-702ae50e492f.png)

**5. アカウントを選択**
　Default Account for Firebaseを選択

![step5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ceec8dd8-9051-da9d-f036-d6c063f7107b.png)

これでプロジェクトが完成🎉✨
プロジェクト概要画面へ移行します🌱

**6. サイドメニューのDatabaseを押す**

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/24d372c8-5464-7c24-b416-a2d426249f7b.png)

**7. DBの種類を選択、作成**
　Cloud Firestoreを選択！

![Frame 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f81898ae-8c2f-37f7-4f32-d35f1e3a1ef8.png)


**8. セキュリティルールを選択**
　テストモードで読み取りと書き込みを
　許可しておきましょう！

![Frame 17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/404116ac-da69-12ef-00e0-83561ec20381.png)

これでDatabaseができました🤗🎉

# Step2: Appの作成

ウェブアプリにfirebaseを追加していきます！

**1. ダッシュボードから</>ウェブを選択**

![app1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/e2431389-38c8-5155-06bd-c8d2673329bf.png)

**2. アプリのニックネームを入力**
　Firebase Hostingの設定は今回はなしで⭕️

![app2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c30e2186-11fd-d0fe-f5c9-c0df5f6a3a3c.png)

**3.「コンソールに進む」を押す**
　コードはいつでも確認できるので飛ばしてOK

これでダッシュボードから
アプリが確認できるようになりました🤗

![app4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/e7b4cfdd-8992-d3bc-7b43-7fa15514208c.png)

# Step3: firebaseのインストール

兎にも角にもまずはインストール！！！🤖
https://firebase.google.com/docs/web/setup

referenceのnode.jsタブを見ていきます👀
Nuxtには初めからpakage.jsonがあるので
$npm initは不要ですね！

```bash:ターミナル
$ npm install --save firebase
```

これでpakage.jsonのdependenciesに
firebaseのバージョンが追加されていますね！

```pakage.json
{
 "dependencies": {
   "firebase": "^7.12.0",
   "nuxt": "^2.0.0",
   "vue": "^2.6.11",
   "vue-template-compiler": "^2.6.11"
 },
}
```

# Step4: firebaseと連携する

plugin/firebase.jsを作ります🌟

【plugin/firebase.js】
Step3で見たreferenceの続きです。
・firebaseをimport
・firebase.initializeApp()
　アプリでfirebaseの初期化
・その中にFirebase SDK snippetを貼り付け
　(**Step2**で作成したアプリのコード)

```plugin/firebase.js
import firebase from "firebase/app" 

if (!firebase.apps.length) {
 firebase.initializeApp({
   apiKey: "貼り付け",
   authDomain: "貼り付け",
   databaseURL: "貼り付け",
   projectId: "貼り付け",
   storageBucket: "貼り付け",
   messagingSenderId: "貼り付け",
   appId: "貼り付け",
   measurementId: "貼り付け"
 })
}

export default firebase
```

apiKeyなどの見方は
firebaseプロジェクトダッシュボードの
ここの歯車を押して…

<img width="875" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/056fdd3d-400c-4742-2903-5fbabe89d335.png">

この画面の下にある…

<img width="866" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c9691bef-c115-af72-dfb5-0b08d5741724.png">

ここです！
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/e3d08e15-e830-21d6-9848-774cfe1f7e07.png)

これで準備は整いました🙌

# Step5: DBにinputでデータを追加してみる

現在のDBには何もありません。
　導入編RDB版でRDBは作成済みのため、
　sample-6a560が表示されていますが
　Cloud Firestore内にはデータがありません。
<img width="691" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/fcfee451-71e2-615f-9e2a-3c696df29e76.png">


inputでこのデータを送信してみましょう📤

<img width="620" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c8d84357-8813-cf91-e791-9f59bbddb214.png">

```index.vue
<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>
```

【結果】

Databaseに反映されていますね🤗
consoleに表示されたidとも
バッチリ合っています🌟
(途中で切れていますが合ってます)

![Frame 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ae548d0e-aad6-7cf2-a210-5c98ec89a754.png)

【解説】
・plugin/firebase.jsをimportする

・firebase.firestore().collection('コレクション名')
　databaseのコレクションを指定します。
　今回はusersにしています。

・add
　データの書き込みmethodには
　add, set, updateがあります。
　　add: 追加
　　set: .doc('{id名}')で指定
　　　　既にあるidに上書き
　　　　なければ追加
https://firebase.google.com/docs/firestore/manage-data/add-data

【setの場合】

```index.vue
<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>
```

・.then
　通信が成功した時の処理を書きます。
　ref.idでコレクション内のidを確認できます。

【上手くいかないぞ？】
テストモードではなく
ロックモードになっている可能性があります。
その場合はDatabaseのルールを
trueにしてみてください〜！

<img width="537" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b3696197-4045-84a1-209a-f1c111c39118.png">

# Step6: DBからデータを取得してみる

先ほどのデータを取得してみましょう！📥
idでまとまったデータ全てではなく、
このidのnameだけを取得してみます🌟

![Frame 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/d8132c52-a22d-7419-8923-055017cbe88e.png)

【index.vue】
methodsのgetDataを追加し、
template内でdivで表示させます。

```index.vue
<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>
```

【結果】

![fetch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f636c0e3-1f73-ba2f-e9de-3af5e23b79d8.gif)

【解説】
.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で表示させましょう🌟

```index.vue
<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>
```

**記事が公開したときにわかる様に、
note・Twitterフォローをお願いします😀**
https://twitter.com/aLizlab