Firebaseでの無限スクロール

この記事では、Firebaseの既存のデータ構造を変更せずに、JavaScriptとFirebaseを使用して無限スクロールを実装する方法を学習します。



私はこの記事を、どのフレームワーク/ライブラリにとっても可能な限り普遍的かつ実用的な情報になるように書きました。したがって、プロジェクトでアイデアを実装するために必要なすべてのステップができるだけ明確になることを願っています。



注：導入情報に興味がない場合は、以下のコード例に安全に進むことができます。

はじめに

始める前に、予想される動作を定義しましょう。

• 初期選択：5つの新しい要素を返します。
• 後続の選択：次の5つの新しいアイテムを返します。

さらに、Firebaseから選択を実装しようとするテストデータを定義する必要があります。このアプローチを使用すると、リクエストで何が起こるかを明確に示すことが簡単になります。

//    Firebase items: { firstInsertedItem: { … }, // oldest SecondInsertedItem: { … }, ThirdInsertedItem: { … }, FourthInsertedItem: { … }, FifthInsertedItem: { … }, SixthInsertedItem: { … }, SeventhInsertedItem: { … }, EighthInsertedItem: { … }, NinethInsertedItem: { … }, TenthInsertedItem: { … }, // newest } //       
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Firebaseのプッシュキー

Firebaseのプッシュキーの美しさをお見せするという事実から始め、またそれらを使用してアイデアを実現する方法についてお話しします。



Firebaseプッシュキーは、ランダムな文字の単なるコレクションではありません。 firebaseプッシュキーは、タイムスタンプと、変更されたbase64アルファベットでエンコードされたランダムデータの組み合わせで構成され、時系列の順序（つまり、挿入の順序）を保持していることがわかります。



この不可欠な機能により、Firebaseリクエストをソートできます。



次に、直接開発に進みます。

最初のステップ

最初のサンプルに続くすべてのサンプルが返すデータを正確に返すためには、他の全員よりも先に選択されたキーのリンクを作成する必要があります。



次のように変数を定義しましょう。

 let referenceToOldestKey = '';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

初期サンプル

次の手順では、最初の5つのネストされた要素を選択するクエリを作成します。

 firebase.database().ref('items') .orderByKey() .limitToLast(5) .once('value') .then((snapshot) => { … } ) .catch((error) => { … } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このリクエストは次のアクションを実行します。

• orderByKeyは、時系列順に（最後から最初に）キーでアイテムをソートします。
• limitToLastは、最新の5つのアイテム（5番目のアイテムから開始）を選択します。

結果は次のようになります。

 { SixthItemFromTheEnd: { … }, SeventhItemFromTheEnd: { … }, EighthInsertedItem: { … }, NinethInsertedItem: { … }, TenthInsertedItem: { … }, }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、結果の要素の順序を変更する必要があります。最後の要素は下ではなく上にありました。



この目的のために、アプリケーションの状態を管理する方法に応じて、いくつかのオプションがあります。

• 結果の要素の順序を変更します。
• オブジェクト（結果）をオブジェクトの配列に変換してから、配列自体を変更します。
• オブジェクトを変更しないでください。ただし、オブジェクトの浅いコピーを作成し、ユーザーに表示されるときに後者を変更します。

この種類のデータを保存する最も一般的な方法であるため、2番目のオプションを選択します。



フェッチ関数のために、次のコードを.thenに追加します。

 let arrayOfkeys = Object.keys(snapshot.val()); let results = arrayOfkeys .map(key => snapshot.val()[key]) .reverse();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、最新の5つのキーからリンクを初期化する必要があります。これにより、ユーザーがページを下にスクロールしたときに、次の選択関数がスクロールに必要な要素を認識するようになります。

 referenceToOldestKey = arrayOfkeys[0];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（ limitToLastは要素を時系列で返すため、最新のキーは位置[0]にあります。）



これで、最初のサンプルは完了です。

次のサンプル

ここで、ユーザーがページの最後までスクロールしたときに、最初の5つの要素の選択がアクティブになっていることを確認しましょう。 これを行うには、次のクエリを作成します。

 firebase.database().ref('items') .orderByKey() .endAt(referenceToOldestKey) .limitToLast(6) .once('value') .then((snapshot) => { … } ) .catch((error) => { … } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このクエリは次のことを行います。

• orderByKeyは、時系列順に（最後から最初に）キーでアイテムをソートします。
• endAtは、元の変数（を含む）に追加された最初の要素から始まるすべての要素を選択します。
• limitToLastは、6番目から始まる最後から6つの要素を選択します。

結果は次のようになります。

 { firstInsertedItem: { … }, SecondInsertedItem: { … }, ThirdInsertedItem: { … }, FourthInsertedItem: { … }, FifthInsertedItem: { … }, SixthInsertedItem: { … }, }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• うーん...最初のサンプルの場合のように、なぜ5ではなく最後の6つの要素に制限されるのですか？

endAtメソッドは包括的であるため、つまり ソースキーは、返されるオブジェクト（または結果）に含まれます。 したがって、要素を5つだけに制限すると、4つの新しい要素しか使用できなくなります。1つは重複します。 6つの要素を要求してから、クライアント側で6番目の要素を削除する必要があります。



クエリの仕組みがわかったので、返されたオブジェクトをキャンセルし、重複を削除する必要があります。

 let arrayOfkeys = Object.keys(snapshot.val()); let results = arrayOfkeys .map(key => snapshot.val()[key]) .reverse() .slice(1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

なぜスライス（1）なのか？ reverse（）の後、コピーは最後の位置から最初の位置に移動します。 コピーが最後の位置にあったことを理解する方法 すべてのキーは時系列で返されます。



最後に、リンクのために、現在の選択から最後のキーの値を書き込む必要があります。

 referenceToOldestKey = arrayOfkeys[0];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、後続の選択に必要なすべてが行われます。



これで私の短いガイドは終わりです。 あなたの注意を読んでくれたみんなに感謝します。私の記事からあなた自身のために何か新しいことを学んだことを本当に願っています。 以下は完全なコード例です。

完全なコード例

注：コードの認識を向上させるために、両方のリクエストの.then内のコードの重複がここに示されています。 そのため、たとえば別の関数にコードを配置する場合のように、目的のフラグメントを見つけるために、コード全体を調査する必要はありません。

 let referenceToOldestKey = ''; if (!referenceToOldestKey) { firebase.database().ref('items') .orderByKey() .limitToLast(5) .once('value') .then((snapshot) => { let arrayOfkeys = Object.keys(snapshot.val()); let results = arrayOfKeys .map(key => snapshot.val()[key]) .reverse(); //   referenceToOldestKey = arrayOfkeys[0]; //    ,  //    ({ … })   redux }) .catch((error) => { … } ); } else {  firebase.database().ref('items') .orderByKey() .endAt(oldestKeyReference) .limitToLast(6) .once('value') .then((snapshot) => { let arrayOfkeys = Object.keys(snapshot.val()); //    & //   //   & let results = arrayOfkeys .map(key => snapshot.val()[key]) .reverse() .slice(1); //   referenceToOldestKey = arrayOfkeys[0]; //    ,  //    ({ … })   redux }) .catch((error) => { … } );  }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この記事があなたにとって時間の無駄ではないことを本当に望みます。



-reddit、bitcointalk、およびmediumでの最高のプロモーションサービス： reddit-marketing.pro