[Vue.js & Firebase]Firestoreで日付、期間を指定して情報を取得する方法[Cloud Firestore]

PCを使う人

まずはコードをご紹介:

例として、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 に関する記事を更新していく予定です。

※この記事は随時、内容の修正、更新を行う可能性があります。

この記事をシェアする: