[React]~Ambassador画面9:Lazy Loading機能の実装~

こんにちは、KOUKIです。

Reactで画面開発をハンズオン形式で紹介しています。

今回は、Lazy Loading機能の実装を行いましょう。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

前回は、ソート機能を実装しました

Lazy Loading機能

Lazy loadingとは画像がビューポート外にある時は読み込みを実行せず、ビューポートに近づいた時に画像の読み込みを開始する、表示速度を最適化する名称のことです。

今回は、Lazy Loading用のボタンが押された時に、残りのコンテンツを出すように実装します。

実は、以前API側で以下の実装を行いました。

URLの末尾に「page」キーワードをつけ、ページを示す番号とともにリクエストを送ると、指定したページのプロダクトが取得できます。この機能を利用するわけです。

Filtersモデルの修正

Filtersモデルに、Lazy Loading用のパラメータを追加します。

この変更に伴い、Filtersを型にした処理の修正を行います。

Lazy Loadingボタンの設置

Lazy Loadingボタンを設定します。

Load関数の実装

次に、Load関数を実装しましょう。

Load MoreボタンにonClickハンドラーを設置したことで、Load関数を実行できるようになりました。

Load関数の追加により、ProductsFrontend/Backendの修正が必要になります。

Frontend

Frontendは、APIを利用しないため、全ての処理をブラウザ上で行います。

Backend

Backendは、API側へリクエストを送り、指定したページの商品を受け取ります。

検証1 ~ ページ読み込み確認 ~

Load Moreボタンの表示切り替え

Load Moreボタンは、新たに読み込めるProductがある場合のみ表示させたいです。

そのための、処理を実装しましょう。

まずは、ProductFrontend/BackendからProductsへ最終ページを渡せるようにします。

次に、Products.txsの処理を変更します。

これで、最終ページになった時、Load Moreボタンは表示されなくなりました。

検証2 ~ Load Moreボタンの表示切り替え ~

次回

次回は、プロダクトの選択とLink生成機能の実装をしましょう

Reactまとめ

参考書籍


ソースコード

Products.tsx

ProductsFrontend.tsx

ProductsBackend.tsx

filters.ts

コメントを残す