Madogiwa Blog

主に技術系の学習メモに使っていきます。

javascript: Cloud Firestoreのはじめ方とCRUD系クエリMEMO🔥

開発 JavaScript

ちょっとCloud Firestoreを触ってみたので、はじめ方とCRUD系のクエリのサンプルとか次触る時に忘れそうなのでメモしておきます✍
※サンプルコードはjavascriptです🙇‍♂️

Cloud Firestoreとは？

Cloud FirestoreとはFirebaseのキーバリューストアです📦

Cloud Firestore は、Firebase と Google Cloud Platform からのモバイル、ウェブ、サーバー開発に対応した、柔軟でスケーラブルなデータベースです。 https://firebase.google.com/docs/firestore/?hl=ja

Realtime Databaseとの違いは下記のようです👀
(私はあまりわかってません😇)

Realtime Database は従来からある Firebase のデータベースです。リアルタイムのクライアント間同期が必要なモバイルアプリのための、効率的でレイテンシが低いソリューションです。 Cloud Firestore は、Firebase のモバイルアプリ開発用の新しい主力データベースです。直感的な新しいデータモデルで、Realtime Database をさらに効果的にしています。Cloud Firestore は、Realtime Database よりも多彩で高速なクエリと高性能なスケーリングが特長です。

Cloud Firestoreをとりあえず使ってみる

使い方は簡単で下記の手順で画面でポチポチするだけでCloud Firestoreを立ち上げることができました🙌

  1. Firebase Consoleから新しいプロジェクトを作成
  2. Databaseからデータベースの作成をクリック
  3. 表示されたモーダルでセキュリティルールを設定し有効にするをクリック(動作確認で使ったので、今回はテストモードで作成しました。)

あとは、公式ドキュメントの通りにFirebaseをアプリに導入しました🔥

$ npm install firebase --save

var firebase = require("firebase");
// configの情報は、Project Overviewのアプリを追加にあるWeb等のアイコン押下時に表示されるPopupから設定
var config = {
  apiKey: "hoge",
  authDomain: "sample-project-zzzzz.firebaseapp.com",
  databaseURL: "https://sample-project-zzzzz.firebaseio.com",
  projectId: "sample-project-zzzzz",
  storageBucket: "sample-project-zzzzz.appspot.com",
  messagingSenderId: "99999999999"
};
// configの内容で初期化
firebase.initializeApp(config);

// firestore管理用のobjectを生成
var db = firebase.firestore();

詳しい始め方は、下記の公式ドキュメントを参照してください👀

firebase.google.com

firebase.google.com

CRUD系のクエリMEMO

とりあえず基本的なCRUD系のクエリの発行方法をメモしておきます。

データ追加

.set: 1件のデータを追加する

// docRef: 登録パスを設定
var docRef = db.collection('users').doc('alovelace');

// .setの引数に値をobject形式で設定
var setAda = docRef.set({
  first: 'Ada',
  last: 'Lovelace',
  born: 1815
});

データの取得

.get: collectionに紐づくデータのリストを取得する

// collection('collection_name').get()でPromiseが返却される
db.collection('users').get().then((snapshot) => {
  // .idでid、.data()でプロパティを取得出来る
  snapshot.forEach((doc) => { console.log(doc.id, doc.data()); });
}).catch((err) => { console.log(err); });

.doc(docRef): ドキュメントを取得する

// .docにdocRefを渡すと該当するドキュメントを取得出来る。
db.collection("collection_name").doc(docRef)

データの削除

.delete: ドキュメントを削除する

// .docで取得したドキュメントに対して.delete()で削除出来る
db.collection("collection_name").doc(docRef).delete()

データの更新

.update: ドキュメントを更新する

// 取得したドキュメントに.updateを呼び出して引数に`key: 値`で更新できます
// Promiseが返却されます
var docRef = db.collection("cities").doc("SF");
docRef.update({ name: 'San Francisco_2' }).then(() => {
  console.log('updated')
}).catch(e => { console.log(e) })

おわりに

今回はCloud Firestoreの始め方と、基本的なCRUD系のクエリを整理してみました✍
ちょっと触ってみた感じですが手軽に始められて、割と扱いやすい感じに見えたので、 個人サービスで登録時にそこまでデータの加工等が必要ないサービスであれば、 フロントエンド + Cloud Firestoreの構成でも良さそうな気がしました👀！