🦃

Firebaseで新着順に並び替えたり数値やデータでフィルタリングしたりする方法

2023/05/24に公開

CSS

概要

個人開発でFirebaseを使っていた際に新着順に並び替える必要があり、ドキュメントで何とか理解したが分かりにくかったのでまとめます✨

自分が初心者だからこそ、初心者に伝わりやすい記事を書けるかなと思っています

(もし気が向いたら、今回作った個人開発のQuickURLもチェックしてみてください🙇)

並び替えの方法

まず前提としてFirebaseにおいては受信したデータを並び替えるのではなく、先に並び替えたリクエストのqueryを作成してから受信します

const sampleRef = collection(db, "sampleCollection");

まずはこのようにしてコレクションをしていしたRefを作成します
この時点で特定のDB内の特定のコレクションを参照しています

普通はこのままこのコレクションからデータを受信するのですが、並べ替えが必要な場合は受信前にqueryというものを作成して並べ替えをするそうです

実際にこの形の一例として公式ドキュメントに示されている例は以下↓

const q = query(citiesRef, orderBy("name", "desc"));

この例の場合だと
「citiesRefというコレクションの中のドキュメントをnameのアルファベット順で並べる」
ということになります

つまりorderByの第一引数に「並べ替えの基準となるフィールド名」第二引数に「数値順や追加順などのルール」を入れるだけ。非常に簡単です

const q = query(listsRef, orderBy("並べ替えの基準となるフィールド名", "数値順や追加順などのルール"));

あとは実際にこれで取得したqでデータを受信すれば、希望の並べ替えが行われたデータが受信できます！(以下は一例)

getDocs(q).then((snapshot) => {
  snapshot.docs.forEach((doc) => {
    console.log(doc.data());
  });
});

並べ替えの順番

並べ替えの順番には「上から順」と「下から順」があります
orderByの第二引数にascをいれるかdescを入れるかで変えることができ

並べ替えの対象が"文字列"ならA-Zで「上から下から」
並べ替えの対象が"数値"なら「大きい順小さい順」

という風になっています

ドキュメントへの追加順で並べ替える

ここまでで並べ替え方自体は分かりましたが、並べ替えるのにはその指標が必要です

ドキュメントへの追加順では、そもそもドキュメントを作成する際に指標をフィールドに追加しておかなければなりません

なので、ドキュメントを追加する際に「serverTimestamp()」という関数を使って値を格納しておきます

    addDoc(collection(db, "lists"), {
      example1: example1,
      example2: example2,
      example3: example3,
      example4: example4,
      createdAt: serverTimestamp(), //ここで追加した時間を記録しておく！
    });

このようにしておいたのちに、実際にqueryにおいて…

const exampleRef = collection(db, "exampleCollection");
const q = query(listsRef, orderBy("createdAt", "desc"));

こうすれば「追加した順」でリクエストするqを手に入れられます！

まとめ

今回はFirebaseにおいての並べ替えについてまとめました

基本的な並べ替えを知るにあたって分かりやすいと思ってもらえてれば幸いです

もし何かアドバイスやご指摘がありましたらお気軽にコメントお願いします！

概要

並び替えの方法

並べ替えの順番

ドキュメントへの追加順で並べ替える

まとめ

Discussion