firebase

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

前置き

便利な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アカウントを作成してください🌟

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

3. プロジェクト名を入力

下に表示されているsample-6a560が
プロジェクトIDになります。

4. Google アナリティクスの有無を選択

なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択

5. アカウントを選択

Default Account for Firebaseを選択

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

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

まずはここから!
Firebase

1. 「使ってみる」を押す

ログインしていない場合はログイン
そもそもアカウントがない場合は
Googleアカウントを作成してください🌟

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

3. プロジェクト名を入力

下に表示されているsample-6a560が
プロジェクトIDになります。

4. Google アナリティクスの有無を選択

なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択

5. アカウントを選択

Default Account for Firebaseを選択

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

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

7. DBの種類を選択、作成

Cloud Firestoreを選択!

8. セキュリティルールを選択

テストモードで読み取りと書き込みを
許可しておきましょう!

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


Step2: Appの作成

🍒RDB版と全く同じです。
ウェブアプリにfirebaseを追加していきます!

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

2. アプリのニックネームを入力

Firebase Hostingの設定は今回はなしで⭕️

3.「コンソールに進む」を押す

コードはいつでも確認できるので飛ばしてOK

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


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


Step4: firebaseと連携する

🍒RDB版と全く同じです!
plugin/firebase.jsを作ります🌟

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

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

この画面の下にある…

ここです!

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


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

現在のDBには何もありません。
導入編RDB版でRDBは作成済みのため、
sample-6a560が表示されていますが
Cloud Firestore内にはデータがありません。

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

画像に alt 属性が指定されていません。ファイル名: picture_pc_7518be32077333da6ec3679c2a3dbae8-1024x226.png

コード

) pages

setの場合

) pages

表示

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

解説

  • 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にしてみてください〜!


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

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

コード

) pages

methodsのgetDataを追加し、
template内でdivで表示させます。

表示

解説

分かりやすくdivで表示させましたが
実際あまり使わないと思うので
pushを使ってdataで表示に変更します🌟

) pages

-firebase
-, ,

© 2024 aLiz Nuxt