まずはコードをご紹介:
例として、Vue.js と Firebase を組み合わせて使用していると仮定して、以下に記載します。
Vue.js 以外のフロントエンドフレームワークを使用されている方は、適宜そのフレームワークの記法に置き換えてください。
(.vue ファイルの、 mounted: 内に記述することを想定しています。)
const me = this; const db = firebase.firestore(); const sinceAtDate = firebase.firestore.Timestamp.fromDate(new Date('2019/01/01 00:00:00')); const recentAtDate = firebase.firestore.Timestamp.fromDate(new Date('2020/01/01 00:00:00')); const sampleRef = db.collection('foo').orderBy('time').startAt(recentAtDate).endAt(sinceAtDate).limit(8); let dataValue; sampleRef.onSnapshot((snapshot) => { me.args = []; snapshot.forEach((doc) => { dataValue = doc.data(); me.args.push({ key: doc.id, value: dataValue }); }); });
startAt(), endAt() で範囲を指定した参照ができる
上記の例では、Cloud Firestore から取得する情報について、このコードの5行目で使用するために、
startAt() で「ここから」を、endAt() で「ここまで」を、
冒頭の3、4行目で定義しています。(これはつまり、クエリの範囲を定義しています)
そして5行目では Firebase を javascript で扱ったことがある方ならおなじみ、「参照(reference)」を定義しています。
これは、「どの様な条件で、Firestore から情報を取ってくるか」ということを定義しているものです。
collection(‘foo’) に存在する document から ‘time’ という フィールド( type は timestamp型 ) を基準に、startAt() から endAt() で指定した範囲までを、8件取得する、という意味です。
startAt() から endAt() で指定する値には、今回は「日付で情報を取得したい」ため、3、4行目でDateオブジェクトを生成する形にて、指定しています。
この時もし、出力する際の昇順/降順をこの時点で変えておきたいなら、startAt() と endAt()に指定する値を逆にした上で、orderBy(‘time’, ‘asc’) または orderBy(‘time’, ‘desc’) とします。(もちろん出力時に配列をjavascript側で逆にしても同じ事は一応可能。その場合は Vue.js なら computed: 内にその処理を書いておけば反映されます)
そして、Timestamp.fromDate(); を使用して、Firestore が日付として認識できる型に変換しています(これが重要な部分)。
この辺りの、データ取得の際に指定できるクエリについては、
Firebase公式の以下ページに詳しく書かれていますので、一読をお勧めします。
Cloud Firestore でのデータの並べ替えと制限
こうして定義した参照(reference)に合致するデータを取得して、配列に格納しているのが8行目以降になります。
冒頭にも記載した通り、Vue.jsを使用している場合であればこの args という配列に、指定した通りの情報が格納されているので
これを template 内で v-for するなりして展開してあげれば、表示が可能になるという事です。
もちろん、Vue.js を使っているのなら言うまでもないのですが、あらかじめ data() {} 内に args: [] として、配列を定義しておくことをお忘れなく。
... export default { data() { return { args: [], } }, mounted: function() { ...
Firebase は Google が提供している強力なプラットフォーム
シングルページアプリケーションやPWA(Progressive Web Apps)を制作する際などに、大活躍してくれる存在、Firebase。
今回は、そのFirebaseプロダクトの中に存在する、Cloud Firestore を扱う際の、情報取得方法の一例についてご紹介しました。
当サイトでは今後も、Firebase や Vue.js に関する記事を更新していく予定です。
※この記事は随時、内容の修正、更新を行う可能性があります。