Vue.jsでのfirebaseの設定と教材備忘録

はじめに

Vue.jsでFirebaseを使う際の設定についてまとめました。

また、Vue.js(Nuxt.js)×Firebaseのチュートリアルをいくつか見つけたのでその備忘録も文末に残しています。

個人的にいろんな教材を漁りましたが、まずは公式ドキュメントに目を通すのが理解を深める近道だと感じました。

✅ゴール
・Firebaseの理解を深める

✅環境
Windows

✅公式
公式ドキュメント
Firebase JavaScript SDKリファレンス
firebase.firestore()
Realtime DatabaseでのJavaScript でのインストールと設定
Cloud Firestore を使ってみる(インストールと設定)

👦慣れるまでは公式ドキュメントから欲しい情報を探しにくい気がします。理由としては、FirebaseがJSのみではなく多言語対応だからです。求めている言語のページを探すのに少し手間がかかります。関連のリンクもないので、わざわざググる必要もあったり。。。ただし、いずれにせよ公式ドキュメントを一度ググりながら目を通すのが吉だと思います。

✅参考教材

※⭐は個人的な優先順位です
💻Vue.js と Firebase ではてなブックマーク風なブックマークサービスを作ってみよう！　・・・⭐
Firestore活用。
💻Vue.js & FirebaseでTwitterライクなSNSアプリを作ってみよう！　・・・⭐⭐
Firestore活用。Vuefireプラグイン活用。
💻【Nuxt.js】アプリ開発基礎編：Nuxt + Vuex + firebaseでシンプルToDoリスト　・・済
Firestore活用。Vuexで処理。
💻Nuxt(Vue.js) × Firebaseでリアルタイムチャットアプリを作ってみよう！　・・・⭐
※まずはVue.jsで慣れるのが先決な気がする。。。
📚Vue.js&Nuxt.js超入門　・・済
Realtime Database&axiosによる実装。Google認証機能の実装などに触れてくれている。とはいえSPAで簡素&発展要素はなし。
📚Nuxt.jsビギナーズガイド　・・ステイ
Realtime Database&axiosによる実装。※取得/投稿機能のみで認証などの説明はなし。Vuexで処理。
📚Vue.jsとFirebaseで作るミニWebサービス　・・ステイ
Realtime Database⇒Firestoreへの移行ガイドが別途配布されている。
axiosは用いずに.refやspliceなど用いてる。　Firestore移行ガイド
📚実践Firestore (技術の泉シリーズ（NextPublishing）)　・・・⭐⭐
かなり深いところまで説明されていそうな感じ。Kindle半額タイミングで買い逃した。。。

VueとNuxtでも微妙にスクリプトが異なるのでまずはVueで慣れるべきな気がする。
※NuxtだとasyncData、VueだとDataにmountedとなる。

Firebase

✅Firebaseとは　公式ドキュメント

BaaS（Backend as a Service）の一種で、ウェルサイトなどのバックエンド機能を提供するクラウドサービス(Google提供)。

メリット：①バックエンド側の開発コストを抑えることができる②Googleアカウントがあれば簡単かつ無料で利用可能。

※ドキュメントは英語表示のGoogle翻訳がおすすめらしい。(日本語だとバージョンが古くなったりする)

✅FirestoreとRealtime Database

Databaseの種類にはCloud FirestoreとRealtime Databaseの2種類がある。

Firestore

Firebase 内で使用できる NoSQL データベース。サーバーレスのWebアプリ開発の実現を可能にする(バックエンドの処理の肩代わりをする)。

✅特徴
・リアルタイムリスナー(データ更新ごとの同期)
・データに型の定義(タイムスタンプなど)ができ、読み取りなどにセキュリティルールを設けることができる。
・コレクション(ドキュメントのまとまりでコレクションのネストも可能)とドキュメントで運用する。※Realtime DatabaseではJSON
・スキーマレスのためどんな形のデータでも追加できてしまう(※セキュリティルール適用のため保つべき)。
・Vuefireでの実装で比較的手軽にできるようになる。
・従来のサーバーサイドAPIのように振舞う(※サーバーサイド言語を介すと逆にメリットが損なわれていしまう仕様)。
・サブコレクションというドキュメントの会要素であるコレクションを作れるので、階層構造を作ることができる。

👉Realtime Databaseの弱点であるデータモデルの改善、クエリの強化で大規模なアプリケーションでも使いやすくされている。

✅メリット
・リファレンス型で他のコレクションやドキュメントのデータリファレンスを格納でき、リレーショナルなデータ格納ができる。
・read、writeだけでなく、get、list、create、update、deleteごとの設定が可能になった。※ルール内でカスタム関数の定義もできるように。

✅CRUD

~firebase SDKを利用した場合~

取得：get()　参考
追加：set(),add()　参考
更新：update()　参考
削除：delete()　参考

✅補足
※2019年1月にβ版を卒業。
※クセがあって使いにくいと言う方もぼちぼち見かける印象。
※Cloud Functions(SDK経由の関数とバックグラウンド関数の2種類があるサーバーサイドのビジネスロジック実行環境。Admin SDKなど該当。)はなるべく利用しないこと。
⇒(理由)firestoreはクライアントアプリケーションから呼び出すことが原則のため
⇒(影響)経由すると、オフラインモードやリアルタイムリスナーの機能性が損なわれパフォーマンスが落ちる。
⇒(対策)基本はClient SDK(読み取りオペレーション/セキュリティルール)で対処する。

Realtime Database

Realtime DatabaseはURL使えるのでFirebase関数ではなくaxiosで手軽にCRUD実装することが可能。

✅CRUD

~firebase SDKを利用した場合~

参考：ウェブ上でのデータの保存

※全てfirebase.database().ref.onの様にメソッドの前にオブジェクトが付くので、Firestore同様にfirebase.database()を変数dbに代入したほうが使いやすそう。

取得：on()　参考
追加：set(),push(),update()　参考
更新：update()　参考
削除：remove()　参考

~axiosを利用した場合~※この場合のみ

取得：axios.get(URL)
追加：axios.post(URL,データ※変数など定義して)
更新：axios.put(URL,データ)
削除：axios.delete(URL)

※認証・認可の設定がマスト。これに関してはDatabaseルールのread,writeを弄る。

また、firebaseが用意した関数.setなどでCRUDすることもできる。これはFirebaseプラグインをimportすることで使用可能。(複数パターンあるのでややこい。。。)

参考：Nuxt.js + Firebaseのサーバーレス開発 axiosでのDB操作、Vue.js&Nuxt.js超入門、vue.jsとFirebaseでSlackクローン構築(Firebase理解編)

✅一例

DBの入力画面(firebase上)

https://<プロジェクト名>.firebaseio.com/person.jsonにアクセスするとJSONで取得できることがわかる。

さらにhttps://<プロジェクト名>.firebaseio.com/person/taro@yamada.jsonとすると特定のデータに絞って表示できるので、取り出すURLを弄って活用できる。

Vueの場合

Nuxtの場合

👇確認

スクリプト内がNuxtだとasyncData、VueだとDataにmountedとなるので注意。

設定

以下はCloud Firestoreでの方法ですが、Realtime Databaseでも読み替えてすぐできると思います。

✅サイト側の設定

・プロジェクト(データベース)作成
トップの使ってみる
⇒プロジェクト作成
⇒サイドバーの開発からDatabaseを選択
⇒Cloud Firestoreからデータベースの作成(テストモード&ロケーションはasia-northeast1で東京を選択)

・アプリの登録(連携に必要なコードの取得)
プロジェクトの概要の右の歯車をクリック
⇒プロジェクトを設定
⇒マイアプリから</>Webアプリを選択
⇒アプリの登録
⇒アプリ専用の設定情報をコピーして保管(Firebase Consoleからいつでも確認可能)

・Database(データベース機能)
開発からDatabaseを選択
⇒コレクションを開始
⇒フィールド、タイプを設計通りに入力し保存
※サイト上で作成せずともアプリ側から登録すれば自動で反映される。

・Authentication(認証機能)
開発からAuthentcationを選択
⇒ログイン設定
⇒メール/パスワードを有効化
(Googleサインインの場合)
⇒Googleを有効にする
⇒プロジェクトの設定、公開設定欄のサポートメールを登録

・Storage(ファイルストレージ機能)
開発からStorage選択
⇒始める(ロケーションを確認する)
⇒完了

✅プロジェクト側の設定(Firebase SDKの追加)参考

①ライブラリ(Vue.js から Firebase を利用するためのライブラリ)のインストール

npm install --save firebase // package.jsonに追記される

②main.jsへfirebaseの設定情報を追記　参考：Cloud Firestore を使ってみる(公式)、Cloud Firestore でデータを取得する(若干左に内容被る)

// Cloud Firestoreのインスタンスを初期化。
firebase.initializeApp({
apiKey: '### FIREBASE API KEY ###',
authDomain: '### FIREBASE AUTH DOMAIN ###',
projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

var db = firebase.firestore();

//追加。暗黙的にコレクションとドキュメントは作成される。
db.collection("users").add({
  first: "Ada",
  last: "Lovelace",
  born: 1815
})

//取得。
db.collection("users").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
  });
});

※Nuxt.jsの場合は、plugin/firebase.jsを作成

③firebase-tools(ローカルにおけるFirebaseプロジェクトの初期設定)

👉Cloud Functions(CRUD処理ができるAPI)、Firestore、Hostingなどの環境を作成(※Databaseの利用では必要が、認証などに関してはFirebaseのソフトウェアを使うため。)

firebase-toolsのインストール

npm install -g firebase-tools

⇒ログイン(初期化の前に必要)

firebase login
>> 自分のメールアドレスが表示されればOK

⇒firebaseディレクトリを作成して初期化コマンド実行 参考

cd firebase
firebase init

④Vuefireのインストール(任意)

👉リモートとローカルデータベースの同期を常に維持するためのツール(スクリプトを簡潔にしてくれる)。公式

npm install firebase vuefire@next --save　// techpitの教材、Qiitaの記事もこっちだった
npm install vuefire firebase // 公式

その後、main.jsなりに firestorePlugin を、Realtime Databaseを使う場合は rtdbPlugin をインポート。⇒インスタンス生成。

⭐とりあえずVue.js×firebaseに関しては一回公式(Vuefire)を読んどいたほうが良さそう。

【Nuxt.js】firebase導入編(Firestore版)：データの追加 取得をしよう　Firebaseのデータ追加、取得に関してわかりやすいです。

おわりに

調べると結構ややこしい。。。

Realtime DatabaseだとURLからデータをJSONで引っ張ってこれるので、axiosを1度でも使った経験があればFirestoreに比べて理解がしやすいように感じた。

が、基本的には多くの方が後出であるCloud Firestoreを使うことを推奨している(過去のβ版だったころはRealtime Databaseのドキュメント多め)。

Railsなどで開発された既存のWebサービスに対して、フロントエンド部分のみをSPAで差し替えるなどのケースが現場では多いらしい。

参考

~公式~

ウェブでのデータの読み取りと書き込み

~その他~

モダンフロントエンド開発環境からVue.js環境までひと通り作ってみた　環境構築の参考に
Firebase Realtime DatabaseとFirestoreを使い分けていこうなという話　FirebaseのDBには2種類あってその違いについて。基本はFirestoreでよさそう。
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する　認証はGoogleでやるのがおすすめらしい。
光の速さでデプロイ ~ Vue + Firebase hosting ことはじめ ~　デプロイも試しに早くしてみたい。
あなたに最適なmBaaSはどれ？AWS Mobile HUB / Firebase / ニフクラ mobile backend 三社を比較検証！　AWSの選択肢もあることに気付く。
Cloud Firestoreを実践投入するにあたって考えたこと　Qiitaでの人気記事
Amplify vs Firebase 比較してみた
「Vue.js + Go言語 + Firebase 」で始める! Frontend & Backend API 両方で認証するセキュアなSPA開発ハンズオン! APIにGoという選択肢も。。。
Go/Gin/Vue.js/MySQLで超簡単なSPAを開発
社内管理画面を Vue + Go で作る
「Vue.js + Go言語 + Docker」で作る！画像アップロード機能実装ハンズオン

教材備忘録

✅Nuxt.jsでFirebaseを使ってみる

教材：

【Nuxt.js】アプリ開発基礎編：Nuxt + Vuex + firebaseでシンプルToDoリスト

感想：

この教材ではFirebaseでDatabase(collection)のみ実装。

vuexを使うと$emitや親の処理を考えなければいけない手間が省ける点はやっぱりいいなと感じた。

が、まだVuexの理解も個人的には浅いので、Firebaseの理解を深めようとするとごっちゃになりしんどかった。。。ちゃんと理解しようとするとおそらく難易度高め。まずはVuexの理解から。

(Vue.jsではVue,Vuexをimport且つインスタンスを生成してstoreにエクスポートしなければいけないが、その記述がNuxtだと不要なのには驚き。)

備忘録：

①プロジェクト作成

$ npx create-nuxt-app nuxt_test

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in nuxt_test
? Project name nuxt_test
? Project description My slick Nuxt.js project
? Author name chobi1125
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

②起動

cd nuxt_test
npm run dev

③Vuexのインストール　参考

npm install vuex --save

store/index.jsの作成、pages/index.vueを編集　※教材通り(※同著者note別記事のVuexのコンポーネントを実装してみた)

④Firebase導入　参考

トップの使ってみる
⇒プロジェクト作成
⇒サイドバーの開発からDatabaseを選択
⇒Cloud Firestoreからデータベースの作成(テストモード&ロケーションはasia-northeast1で東京を選択)
⇒ダッシュボードから</>ウェブを選択
⇒アプリの登録
⇒firebaseのインストール(package.jsonに追加)

npm install --save firebase // ライブラリのインストール。package.jsonに追記される。

⇒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

index.vueを確認用に教材通りに変更し送信。エラー。。。

追記：Firebase側にはデータが反映されてた。

その後進めるもfirebaseが上手く組み込めていない感じは変わらず。

store/sample/index.jsのimportが波打っているのが気になる。翻訳すると解析エラー：キーワード ‘import’は予約されていますとのこと。

~以下はこの教材で躓いた点~

📝1.ESLinterが大量のエラーを吐く

解決策： nuxt.config.jsでbuildModulesされているESLintの記載をコメントアウト

※本質的な解決ではないが、一旦これで開発を進める。

📝2.ESLintによるコードの~~を消せない

解決策：カーソル置くと原因が表示されるのでそれに従う。(以下はインデントを修正したら消えたの図)

✅Vue.js と Firebase ではてなブックマーク風なブックマークサービスを作ってみよう！

感想：

この教材ではFirebaseでDatabase(collection※サブコレクション含)、同期関数、Authentication、Storage、Hosting、セキュリティルールまで実装。Vuefireは用いていない。
個人的にはユーザー情報の編集のロジックが気になる。(最初はサインアップのメアド部分がユーザー名になってる。)

完走できずだった(全てのソースコードないのが痛い)が、深いところまで解説されている教材だったので、実力付けたら再挑戦したい。今回初めてBulmaを使ったけど配色がいい感じだった！

それといい加減@gmail.com使うのやめよう。 example.com example.jp example.co.jpは正式に開発用に使っていいドメインらしい。

中盤のリファクタリング面(Firebase関連をクラスにまとめてビューにインポートさせる方法。これによって依存度が下がり、今後Firebaseから他のAPIに移す際などの変更が楽になる。)は、こんな考え方ができるんだなととても参考になった。

備忘録：

プロジェクト作成

$ vue create pitmark

Vue CLI v3.8.2
┌───────────────────────────┐
│  Update available: 4.3.1  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

起動

npm run serve

サインアップ

サインアップが上手くいくとFirebaseで以下のように登録が確認できます。

Gravatarの活用　公式　教材5-1

ユーザーのアイコン画像を」

npm install --save gravatar

ブックマーク詳細ページの作成　教材7-1

:idで可変するルーティングをrouter.jsに登録。
ロジックはfirebaseからidを取得してそれをidに代入してreturn。

※8章のプロファイルページも同様。さらに認証情報変更、退会機能まで実装でかなり深いところまで解説されてる。
8-3でStorageの活用でアバター写真の変更まで。

✅【Nuxt.js】ちょ〜簡単！TODOリスト

感想：

同じ方の別チュートリアルも試してみた。(こちらはFirebaseの実装しないが、上記チュートリアルを試すにあたりNuxtの復習がてらやってみた。)

このチュートリアル以前の記事もいくつか読ませていただいた。slotは初知りだったので参考になった。

備忘録：

#step2のForm.vueを作成し、Addボタンを押すとこうなる。

pushが未定義。

:key=”todo.id”をList.vueに追記しても変わらない。これは関係なさそう。

解決)step2のForm.vue、dataプロパティのキーがtodoでtodosになっていなかったのが原因だった。

全て終えてProgressbar.vueも加えるとこうなる。

解決)最後のコードのindex.vue記載の@listAddedがそもそもForm.vueでemitしているメソッド名と一致していないことが原因だった。@todoAddedに変更したら動作した◎

👦1回目は挫折したけど、$emit、slotについて学び直して再挑戦したところなんとか完走することができた。