Firebase を使った簡単 CRUD 操作

CRUDとは

CRUD とは、アプリケーションにおける主要四機能のイニシャルです。

Create（生成）、Read（読み取り）、Update（更新）、Delete（削除）を意味してます。Todo リストを思い浮かべるとイメージがつきやすいですね。

Firebase設定

まず、Firebase を使えるようにするために適当なファイルを作成してこれを記述して頂きます。

import firebase from 'firebase';

const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
};
const firebaseApp = firebase.initializeApp(config);
export const db = firebaseApp.firestore();

config の値は、firebase のウェブ設定画面から見れるためそちらからコピペ等で代入してください。

そして、今回は firebase firestore を使うため予め db という定数で firestore を export しておきましょう

実践

Create(生成)

仮に、{task:"レポートおわらせる",completed:false}というような、Todo を作るとします。その場合の firebase を使ったコードはこうなります。

db.collection("tasks").add({
	task:"レポートおわらせる",
	completed:false
})

tasks というコレクションに、{task:"レポートおわらせる",completed:false}というドキュメントを挿入します。

コレクションとは、RDB(my sql)でいうところのテーブル(table)であり、ドキュメントとはロウ(row)のことを指します。

Read(読み取り)

Create が出来ましたね。しかし、これを読み取ることが出来ないと作った意味がありません。ユーザーからそれが見えるように Read の機能を持たせましょう。

const taskDatas=[]

db.collection("tasks").get().then((querySnapshot) => {
    querySnapshot.forEach((doc)=> {
		const taskData=doc.data()
		taskDatas.push(taskData.task)
    });
});

まず、taskDatas という名前の配列を受け取る定数を定義します。これは後に取得したデータを入れるのに用います。

そして、先ほど副作用的に作成した tasks コレクションから get メソッドでドキュメントをすべて受け取ります。

それを、定数 querySnapshot を引数としてとり、forEach 分を使ってドキュメントを一つづつ取り出します。

定数 doc で受け取りますが、これはそのままでは使えないため doc.data()で使えるようにします。

あとはそれを Array.push 等で最初に作った配列に挿入して setState 等すれば Read の機能が使えるようになるという訳です。

Update(更新)

ここまで、生成と読み取りの機能を作り、最小限の機能は作りました。しかし、completed キーがずっと false のままではかわいそうですよね。

達成次第で true にしてあげましょう。

db.collection("tasks").doc(ドキュメントのID).update({
	completed:true
})

では早速解説していきましょう。

これも、最初はまず tasks コレクションを開いてあげます。そしてドキュメントを指定するわけですが、ここではドキュメントの ID というものが必要になってきます。

ドキュメントの ID とは、先ほど Read の機能を作成した際に doc.data()をした同じスコープにdoc.idを設定することでそのドキュメント ID を設定することが出来ます。

これを関数の引数などとして渡してあげれば先に進めます。

そして、update メソッドを使い completed キーを true に変更します。

これで更新できるようになりました。あとは Delete(削除)だけです！走り抜けましょう！

Delete(削除)

急用が入ったときや、必要なくなった時はタスクを削除する必要がありますね。ということで最後の機能は Delete(削除)です。

db.collection("tasks").doc(ドキュメントのID).delete()

一行!

まとめ

いかがだったでしょうか。

このように、firebase を使用すると最低限の機能が短く、直感的にコーディング出来るわけです。

小さなプロジェクトの時はバックエンドを全て firebase で代替しても良いかもしれませんね。