【シンジ】戦略×エンジニア×Webデザイナー

Webコンサル、デザイン、サービス開発、経営に関することを呟きます。

無限にスクロールできるウェブサイトをVue.jsで作ってみた

f:id:Shinji0418s:20210301093216j:plain

どうも。株)WIREBASEの中村です。

 

本日もテクニカルな話になるのですが、無限にスクロールできるウェブサイトをVue.jsで作ってみたいと思います。今回はWikipediaAPIを使った非常にシンプルな検索ページ(英語)を作成してみます。

 

早速、vur-clieを使って新しいプロジェクトを立てます。

このプロジェクトでは主に以下3つのコンポーネントが必要となります。

・検索ページとリスト化のコンポーネント
・検索結果のコンポーネント
・ローダーコンポーネント

 

簡易的な設計が終わったところでHTMLを書き出します。

f:id:Shinji0418s:20210301085701p:plain

HTMLの部分では、検索エンジン、検索ボックス内のデフォルトメッセージ、仮想スクローラーのリストなどが必要です。

 

仮想スクローラーのリストはこちらGitHub上のプロジェクトを使います。

 

仮想スクローラーのライブラリ無しでは、HTML要素が多くなりすぎる、且つ本プロジェクトの様に無限スクロールの機能を要するものとなると、フロントエンドの動きが格段に悪くなってしまいます。仮想スクローラーがあると、スムーズな検索、スクロールを実現できるので、かなり有効です。

 

では、次はJavascriptの部分ですね。以下の通り書き出します。

f:id:Shinji0418s:20210301090825p:plain

 

HTTP通信のためのコンポーネントとHTTP通信をより簡単に行うことができるaxiosのライブラリをインポートします。

f:id:Shinji0418s:20210301091350p:plain

 

仮想リストには、検索結果のタイトルと説明をレンダリングするために使用するsourceプロップを渡します。

 

これで仮想リストと検索結果の土台ができたので、WikipediaAPIと連携してみましょう。先ずは、ユーザーが入力した検索テキストに基づいて検索を実行するメソッドを作成します。

f:id:Shinji0418s:20210301092029p:plain

 

これで検索部分の準備ができたので、検索メソッドで下記の条件を呼び出してみましょう。

・ユーザーが検索ボックスに入力を開始したとき

・ユーザーが下にスクロールしたとき

EndlessList Vue コンポーネント上記2つのケースの両方を処理してみます。

f:id:Shinji0418s:20210301092411p:plain

 

searchQueryの値が変わるたびに新しい検索結果を得られるよう、searchQueryにはウオッチャーを使用しています。また、最後の検索文字が入力されてから200ミリ秒後に検索結果を表示するため、デバウンス関数も使用しています。

 

それでは、Vueアプリをnpm run serveで実行してみましょう。

以下が実行した結果です。無限にスクロールできる、且つ超スムーズですね。

 

https://miro.medium.com/max/640/1*08L0WmYbqncJJ765_27SSQ.gif

 

初心者にとっても比較的簡単だと思うので、是非、試してみてください。

 

では、今日はここら辺で。

 

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter