Firebase SDKの使い方・注意点等について書く。
インストール
scriptタグで直接CDNから読み込むのが一番かんたん。
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
バンドルしてしまう場合は
npm install --save firebase
でnpmからインストール
準備
Firebase Consoleから新規プロジェクトを作成
コンソールから設定を取得
npmの人は// Initialize Firebase以下をコピー
ここまでで、こんな感じになります。
index.html
<!doctype html> <html> <head> <script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyD8BQ8oDDcXEmZgEWNz1KYLhBWIZDCR8aw", authDomain: "test-proj-509cf.firebaseapp.com", databaseURL: "https://test-proj-509cf.firebaseio.com", storageBucket: "test-proj-509cf.appspot.com", messagingSenderId: "107396821085" }; firebase.initializeApp(config); </script> </head> <body> </body> </html>
使う
firebaseは主にfirebaseオブジェクトのメソッドから操作する。
データベースを参照する
const databaseRef = firebase.database().ref('production/messages');
refの引数は参照する階層になる。
データベースに値が追加されたら通知する。
databaseRef.on('child_added', snapshot => { const value = snapshot.val(); const key = snapshot.key(); });
child_addedキーでref以下の階層に値が追加された場合に通知が飛ぶ。
通知の引数になるsnapshotから値を取得する場合はval()メソッドで値を取得する。
もし自身のパスが取得したければ、key()で取得できる。
データベースから値が削除されたら通知する。
databaseRef.on('child_removed', snapshot => { const value = snapshot.val(); const key = snapshot.key(); });
データベースの値が変更されたら通知する。
databaseRef.on('child_changed', snapshot => { const value = snapshot.val(); const key = snapshot.key(); });
データベースの値が移動したら通知する。
databaseRef.on('child_moved', snapshot => { const value = snapshot.val(); const key = snapshot.key(); });
最初に接続した時にDBに値があれば、child_addedかvalueに通知が来る。
全てのイベントを通知する。
databaseRef.on('value', snapshot => {...});
値を追加する
基本
const newRef = databaseRef.push(); newRef.set({foo: 'bar'});
pushで新たなエントリーを生成し、setで値を設定する。
push(value: any, onComplete: () => void)
ユニークキーを生成して、そのキーで新たなエントリーを生成する。
valueを指定した場合は後述するsetも同時に行われる。
キー生成の詳細については The 2120 Ways to Ensure Unique Identifiers
set(value: any, onComplete: () => void)
現在のロケーションに値をセットする。
フィルターをかける
フィルター系で注意したいのは、firebaseは複数のフィルターを組み合わせられないという点
なので、データ構造は十分考慮する必要があるし、場合によってはjavascript側で並べ替えることも考慮した方がいい。
順序を変える。
sqlのorder by的なもの
databaseRef.orderByChild('createdAt').on(...);
databaseRef.orderByKey().on(...);
databaseRef.orderByValue().on(...);
orderByChild(propertyName: string)
指定された子要素のプロパティ値で順序を決める。
多分一番使う気がする。デフォルトで昇順になる。
orderByKey
キーでソートする。
キーに順序をもたせた場合はこれを呼ぶだけでいい。
orderByValue
値でソートする。
プリミティブが直接子要素になっている場合以外に使い道がない気がするが。
値を指定する。
子要素の値を指定してフィルターする。
このメソッドはorderByに影響を受け、orderByの指定があった場合はそのプロパティを比較に使う。
もしorderByの指定がなければ、第二引数で比較する値を指定する。
databaseRef.startAt(Date.now(), 'createdAt'); databaseRef.orderByChild('createdAt').startAt(Date.now()); databaseRef.endAt(Date.now(), 'createdAt'); databaseRef.orderByChild('createdAt').endAt(Date.now()); databaseRef.equalTo(Date.now(), 'createdAt'); databaseRef.orderByChild('createdAt').equalTo(Date.now());
startAt(value: any, propertyName?: string)
値が一致する要素から開始する。
一致しない要素は全てスキップされる。
endAt(value: any, propertyName?: string)
値が一致したら終了する。
一致するまでは全ての要素が流れる。
equalTo(value: any, propertyName?: string)
値が一致した要素のみを流す。
件数を制限する
databaseRef.limitToFirst(1000).on(...) databaseRef.limitToLast(1000).on(...);
limitToFirst(value: number)
指定した件数を先頭から取得する。
limitToLast(value: number)
指定した件数を最後尾から取得する。
注意点・Tips等
Firebaseのイベントで気をつけなければいけないのは、初回に繋いだ瞬間全ての値が流れてくること。
キャッシュ等をしていて、差分からの値が欲しければ、最後の値をstartAt()に渡してイベントをスキップするような実装にする必要がある。
また、valueとchild_addedを一緒に指定すると、valueとchild_addedの両方に値が流れるので注意。
基本的にはvalueは使わず、child_added/moved/changed/removedをちゃんと使い分けたほうがよい。
