データの登録件数が100件を超えてきたので、ランダム表示ページを用意しました。

https://lgtmgen.com/random/

ヘッダーの「ランダム」からアクセスできます。

ランダム表示のロジック

FirebaseのCloud Firestoreにはrandomがないため、自前でランダムロジックを組む必要があります。

にあるようにデータ登録時にrandomカラムを用意してランダムな数字を入れておきます。

 Math.floor(Math.random() * numberOfImages + 1); // numberOfImagesはデータの登録件数

その上でデータを取り出す際にはランダムな数字を生成してその数字にマッチするデータを取り出す処理をしています。

randomにセットされる数字が重複するケース、連番ではないので穴がある数字があるため、取得するデータの合計が10件を超えるまでループさせています。SQLを10回発行していることになるので、画面表示が遅いです。

     const indexs = [];
     while (this.count < 10) {
       const startIndex = Math.floor(Math.random() * this.max + 1);
       if (!indexs.includes(startIndex)) {
         indexs.push(startIndex);
         const imagesRef = db.collection('images');
         const snapshot = await imagesRef
           .where('release', '==', true)
           .orderBy('random')
           .startAt(startIndex)
           .endAt(startIndex) //querying 1 random items
           .get();
         const data = snapshot.docs.map((doc) => {
           const result = storageRef
             .child(doc.data().strage)
             .getDownloadURL()
             .then(function(url) {
               const result = doc.data();
               result.imgSrc = url;
               return result;
             });
           return result;
         });
         const response = await Promise.all(data);
         this.thumbImages.push(...response);
         this.count += response.length;
       }
     }
     this.loaded = true;
   }

なので、表示されるデータの件数はピッタリ10件にならないで少し多くなる場合があります。

randomの値が同じデータが複数あった場合はその中からランダムで1件取り出すようにしたほうがよりランダムっぽく見えるようになるはずですが、一旦はこんな感じで実装しています。