どうも。株）WIREBASEの中村です。
本日もテクニカルな話になるのですが、無限にスクロールできるウェブサイトをVue.jsで作ってみたいと思います。今回はWikipediaのAPIを使った非常にシンプルな検索ページ（英語）を作成してみます。
早速、vur-clieを使って新しいプロジェクトを立てます。
このプロジェクトでは主に以下3つのコンポーネントが必要となります。
・検索ページとリスト化のコンポーネント
・検索結果のコンポーネント
・ローダーコンポーネント
簡易的な設計が終わったところでHTMLを書き出します。
HTMLの部分では、検索エンジン、検索ボックス内のデフォルトメッセージ、仮想スクローラーのリストなどが必要です。
仮想スクローラーのリストはこちらのGitHub上のプロジェクトを使います。
仮想スクローラーのライブラリ無しでは、HTML要素が多くなりすぎる、且つ本プロジェクトの様に無限スクロールの機能を要するものとなると、フロントエンドの動きが格段に悪くなってしまいます。仮想スクローラーがあると、スムーズな検索、スクロールを実現できるので、かなり有効です。
では、次はJavascriptの部分ですね。以下の通り書き出します。
HTTP通信のためのコンポーネントとHTTP通信をより簡単に行うことができるaxiosのライブラリをインポートします。
仮想リストには、検索結果のタイトルと説明をレンダリングするために使用するsourceプロップを渡します。
これで仮想リストと検索結果の土台ができたので、WikipediaのAPIと連携してみましょう。先ずは、ユーザーが入力した検索テキストに基づいて検索を実行するメソッドを作成します。
これで検索部分の準備ができたので、検索メソッドで下記の条件を呼び出してみましょう。
・ユーザーが検索ボックスに入力を開始したとき
・ユーザーが下にスクロールしたとき
EndlessList Vue コンポーネント上記2つのケースの両方を処理してみます。
searchQueryの値が変わるたびに新しい検索結果を得られるよう、searchQueryにはウオッチャーを使用しています。また、最後の検索文字が入力されてから200ミリ秒後に検索結果を表示するため、デバウンス関数も使用しています。
それでは、Vueアプリをnpm run serveで実行してみましょう。
以下が実行した結果です。無限にスクロールできる、且つ超スムーズですね。
初心者にとっても比較的簡単だと思うので、是非、試してみてください。
では、今日はここら辺で。
株）WIREBASE中村LINE↓
株）WIREBASE中村Twitter↓