こんにちは！ともです(@_tomo_engineer)！

最近Vue.jsで簡単なアプリを作成していてデータベースをどうしようかなと考えていました。

そこでBaaS(Backend as a service)というバックエンドを提供してくれるFirebaseに出会い、データベースをFirebaseに任せたいと思いました。

この記事ではFirebase RealTime Databaseを利用して、データの登録・編集・削除について書きたいと思います。

Firebase RealTime Databaseとは

Googleが運営するFirebaseが提供するNoSQL・No Relationshipのデータベースサービスです。

MySQLのようにSQLを発行してデータを絞り込んだり、テーブル間のリレーションを作成することはできません。

データはJSON形式で扱われ、リアルタイムで反映されます。

料金によって制限があります。無料枠でも十分楽しむ事ができます。

Firebase RealTime Database料金表

Firebase RealTime Databaseの有効化

まずはFirebaseのアカウントを作成する必要があります。

アカウント作成とプロジェクトの作成の手順はこちらを参照してください。

次にFirebase RealTime Databaseを有効化します。

左側のサイドバーのDatabaseをクリックしデータベースの作成を行います。

ロックモードとテストモードの選択を迫られます。読み取りと書き込みを行いたいのでテストモードを選択します。

タブにデータ・ルール・バックアップ・使用状況と書いてあります。

ルールでは書き込み・読み込みの許可に関する設定を行えます。今回はテストですので書き込み・読み込みをtrueに設定している事を確認して下さい。

これでtest-projectというプロジェクトのデータベースが完成しました。

こちらのようにデータベースにデータを格納して見ます。

{
   users: {
      abcdef: {
         name: 'tomo',
         country: 'america'
      }
   }
}

上図の場合JSONで表現すると上の表現になります。

JSONですのでkey => valueの関係にあり、ユーザを特定するためのkeyが必要になります。

今回は適当にabcdefというkeyを設定しました。このkeyによりユーザを特定する事ができます。

アプリケーションにFirebaseを追加

Project Overviewの上図の赤枠をクリックします。

こちらのscriptが表示されるので、HTMLの一番下に追加してアプリケーションにFirebaseを追加します。

初期化

// 自身のものを利用して下さい。  
const config = {
    apiKey: "AIzaSyBUB7hCWLmnAE6bFCAgFDzg-Ws1KWjeKVM",
    authDomain: "test-project-3c0e4.firebaseapp.com",
    databaseURL: "https://test-project-3c0e4.firebaseio.com",
    projectId: "test-project-3c0e4",
    storageBucket: "test-project-3c0e4.appspot.com",
    messagingSenderId: "540040576830"
  };
  firebase.initializeApp(config);
// databaseを利用して操作する
  const database = firebase.database()

databaseメソッドにより、databaseを参照するオブジェクトを取得しています。

イベント駆動型データベース

Firebaseはイベント駆動型(イベントドリブン)データベースです。

ある条件を満たした場合、イベントが発生し処理が実行されます。

例えば、データベースの内容が変更されたという条件を満たした場合、変更した場合に対応する処理を実行させる訳です。

例えばMySQLの場合、データに変更があった場合私たちにその変更を伝えてくれません。

しかしFirebase RealTime Databaseは変更があれば私たちに伝えてくれます。

データの変更を監視する

データの監視のイベントには次の２つが利用できます。

usersを監視するには次の様にコードを書きます。

// valueイベントで監視
database.ref('users').on('value', snapshot => console.log(snapshot.val()));

// child_addedイベントで監視
database.ref('users').on('value', snapshot => console.log(snapshot.val()));

両者のイメージ図を作成してみました。

どちらのイベントでもデータの監視をできるのですが、データベースに変更があった場合に返ってくるものが違います。

が返ってきます。つまり、上のコードで言うとコールバック関数のsnapshotと言う変数にデータが格納されています。

この２つは用途によって選択する所ですが、変更点のデータのみ欲しい場合の方が多いのではないでしょうか。

もしES6のアロー関数の書き方が分からない方は次の記事にして下さい。

登録：pushメソッド

新しくレコードを追加したい場合はpushメソッドを利用します。

database.ref('users').push({name: newName, country: 'japan'})

pushメソッドにJSON形式でデータをセットする事でusersに新しいレコードを追加することができます。

登録：（その他）

database.ref('who/am/I').set('alex')
refメソッドの引数に『スラッシュ』を入れる事でデータを追加する階層を深くすることができます。

上がその結果で『スラッシュ』に階層を設定し、setメソッドでデータを登録できている事が分かります。

またchildメソッドも利用する事ができます。

database.ref('who').child('am').child('i').set('tomo')

スラッシュではなく『childメソッド』により階層を設定することもできます。

更新：update

次の様にデータベースに格納されている事を考えます。

Firebase RealTime DatabaseはJSON形式ですので、まずkeyを参照し、データを上書きします。

countryをjapanに変更するには次の様に書きます。

database.ref('users').child('-LRf1PVkwUIA5FakLojR').update({country: 'japan'});

これによりnameはそのままに、countryだけを変更する事ができます。

削除：remove

次の様にデータベースに格納されている事を考えます。

このユーザのIDは『-LReyNSJ3rS9gi2tFfNk』となっています。

よってこのデータを削除したい場合は

database.ref('users').child('-LReyNSJ3rS9gi2tFfNk').remove();

この様にIDの階層を指定してremoveメソッドを実行します。

まとめ

Firebase RealTime DatabaseのCRUD処理について書きました。

無料枠でも十分遊べますし、この機会にFirebaseを利用してみては如何でしょうか。