最近Firebaseをベースにしたアプリ作成にハマっています😆
今回はFirebaseの機能の1つである Cloud Firestore を使ったデータを読み書き方法を解説します。
Cloud Firestore とは
Google が提供している Firebase 内で使用できるデータベースシステムの1つです。
Firebase内で提供されているデータベースシステムは2種類ありますが、 Realtime Database の上位互換のような立ち位置のようです。
今回は『あるデータを外部環境に読み書きする』という非常にシンプルな機能があれば問題がなく、LINEのメッセージのような頻繁なデータの読み書きも発生する予定はないため、細かいことを気にせずに Cloud Firestore を採用しました。
ざっくりとRealtime Database と比較したメリットを書きますと、
- Realtime Database はデータの管理がちょっと雑になっているが、Cloud Firestoreは整理されている
- Cloud Firestoreは自動でインデックスを付けてくれるので読み込みが速い
- 自動的にスケールするマルチリージョンソリューションなので管理が楽
- 非カスケードルールなので細かくセキュリティを設定できる
- Cloud Firestore は Realtime Database より料金が安い
などがあります。
自動スケールが何が良いかと言うと、DBを管理しているPCが必要に応じて自動的にスペックアップするというものです。
最初から高いスペックだと必要以上にお金が掛かるし、低いスペックだと急激なアクセス増加に耐えられない…
そういった時のスペック管理を自動でやってくれるということです。
またマルチリージョンなので「日本からのアクセスが多いのにアメリカのサーバーにアクセスしてしまい、無駄に時間が掛かっちゃう」ということも防げます。
「非カスケードルールとはなんぞや？」というとルールの上流で許可されたルールが下流のルールに影響を与えないということです。
Realtime Database ではちょっとした設定ミスで必要以上のデータが流出するリスクが存在するのでデータの保守性を考えると軍配が上がります。
Cloud Firestore でDBを構築しよう
早速Cloud FiresstoreでDBを構築します。
今回の環境の前提となりますが、
- Vue.js アプリケーション
- Firebaseでプロジェクト作成済み
- DBのセキュリティルールはテストモード
で行っていきます。
DBを作成
早速DBを作っていきます。
FirebaseのページのDatabaseからデータベースの作成を選択します。
テストモードで開始を選択して次へを選択します。
ロックモードとの違いは右側に書いているルールの中に『if false』という条件式が含まれているだけです。
if false はどんな条件でもDBの読み書きは実行しないことを表しています。
運用の際はこのif内の条件などを設定してセキュリティを高めていきますが今回は全部許可します。
ロケーションを設定しますが、デフォルトの場所で問題ありません。
ロケーションが決まったら完了を選択します。
コレクションを開始する
コレクションとはRDBでいうテーブルのようなもので、データを入れるための基盤になります。
まずはコレクションの開始を選択して以下の画面を表示します
どのような名前のコレクションを作るかを設定します。
次にドキュメントIDを設定して、フィールドを定義していきます。
画像の通り自動IDを選択すれば問題ありません。
フィールドは値が空白の場合はNULLになるようです。
今回はVue.js側から送ったテキストデータを保存するためだけなのでtextフィールドをstringで定義しました。
アプリケーション側の設定をしよう
いよいよコードを書いていきます！
今回は↑の公式ページを参考に進めます。
まずは今回のコードをすべて最初に記載します。
イメージとしては以下の図のようなものを作ります。
Firebaseモジュールをimportする
このブログの方法を元に開発している場合、npmが使えるはずなのでimportでOKです。
npm install firebase@6.3.4 --save
Firebase と Cloud Firestore の両方を手動で require する必要があります。
const firebase = require(“firebase”);
https://firebase.google.com/docs/firestore/quickstart?hl=ja#set_up_your_development_environment
// Required for side-effects
require(“firebase/firestore”);
公式ページにこのような記載があるのですが、firestoreを別途importはする必要なかったなぁ…🤔
firestoreのインスタンスを保持しておく
// Initialize Cloud Firestore through Firebase
https://firebase.google.com/docs/firestore/quickstart?hl=ja#initialize
firebase.initializeApp({
apiKey: ‘### FIREBASE API KEY ###’,
authDomain: ‘### FIREBASE AUTH DOMAIN ###’,
projectId: ‘### CLOUD FIRESTORE PROJECT ID ###’
});
var db = firebase.firestore();
公式ページにてこのような記載があるのですが、 firebase.initializeApp は別のところで一度行っていたため、今回のコードには含まれていませんでした。すみません…😰
実装をする上でfirebaseの初期化処理は必要です。
firestoreのインスタンスの処理だけは create 内で行っています。
データを保存する
データを保存する処理は先程のコードの以下の2箇所です。
htmlの部分では
- v-model を使い input という変数に入力値を入れる
- v-on:click を使い、submit 関数を実行する
ことがわかります。
jsの部分では、
- 先程作った sample というコレクションを呼び出し
- 先程定義した text というフィールドに input に入れた変数を更に入れて
- collection の add という関数を呼び出し保存して、
- 完了したら then という関数内で inputDocRef に 保存したデータのID（住所のようなもの）を保存（これはデータを呼び出す処理のためにやっているので無くてもOK）
していることがわかります。
これだけで外部のデータベースにデータを保存することができます！
データを読み込む
読み込んだデータを読み込む方法は書き込む方法と流れはほぼ同じです。
コレクションを取得して、関数を実行していきます。
データを取得する方法は複数ありますが、基本的に1件ずつ取得する方の方法を使うようにしましょう。
全件取得してjs側で必要な情報をピックアップする方法でも同じ挙動になりますが、不要なデータをDBから取得することは、「通信量の無駄」「セキュリティの欠陥」になるので本当に必要な情報だけ取得してください。
まとめ
今回はFirebaseのCloud Firestoreを使ったデータの読み書きを紹介しました。
- GUI上でコレクションを構築する
- 必要なモジュールをimport、初期化処理をする
- 実装ではコレクションを呼び出して、add, get関数を使って読み書きできる
で簡単にデータを保存できます！
ここまで読んで頂きありがとうございました！
コメント
Real Time Database ですよね？
read だったりruntime だったりと誤字がたくさん。。
おぉぉ…すみません。
すべて修正しました。ご指摘ありがとうございます。