何がしたいか

Firebase Realtime Database（以下Firebase）の公式ライブラリでは、引っ張ってきたデータを並び替えることができる関数が用意されているが、なぜか降順にソートできるものはない。しかし、データを降順に引っ張ってきて展開したいという場面もあるので、今回はそれを実現する。

実装

今回は下のような形式で複数のデータがFirebaseにpushされていることを考える。

Firebase

data: {
  -M_A1FKQ2m31jaxrkLgd: {
    ...
  },
  -M_A1KuD92gfHlWx9rk-: {
    ...
  },
  -M_A1fq_4HwEICsf4LVe: {
    ...
  }
}

Firebaseにpushされたデータのキーは、pushされた時刻によって生成され、登録された順番に昇順にならぶ仕様になっているので、このままデータを取得すると昇順で取得されてしまう。しかし、前述の通り公式ライブラリには降順に取得してくる関数がないので、データを取得した後にデータを加工する。

取得してきたデータはオブジェクトとして取得されるので、ソートを行う場合には配列に変える必要がある。

firebase.js

/*Firebaseの初期化処理は省略*/
firebase.database().ref('data').once('value', (result) => {
  if (result.val()) {
    const l = []
    Object.keys(result.val()).forEach((key) => {
      const tmpObj = {}
      tmpObj[key] = result.val()[key]
      l.push(tmpObj)
    })
    console.log(l)
  }
})

console

[
  {-M_A1FKQ2m31jaxrkLgd: { ... }},
  {-M_A1KuD92gfHlWx9rk-: { ... }},
  {-M_A1fq_4HwEICsf4LVe: { ... }}
]

上記のようにオブジェクトを一つ一つの要素に分割して、配列に入れることによりソートを行うことが可能となる。

あとは、この配列を降順(逆順)にすればよい。

firebase.js

/*続き*/
const reversedList = l.slice().reverse()

最後に

このように取得してきたオブジェクトとして取得してきたデータを要素ごとに配列に入れることで、これ以外の方法でのソートも行いやすくなるので非常にオススメ。ただ、降順以外のソートは公式のライブラリの方でサポートされているものもあるので、そちらを使った方が良いかもしれない。詳しくは公式のドキュメント参照。

Firebase Realtime Database公式ドキュメント