Vue.jsで無限スクロールを実装する方法
序章
無限スクロールは、ユーザーが下にスクロールして現在のコンテンツページの一番下に到達し、次にコンテンツの次のページが読み込まれて表示されるWebサイトおよびアプリケーションの機能です。 この効果は、ページネーションナビゲーションをクリックする代わりに使用されます。 モバイルデバイスとタッチスクリーンを使用する状況では、無限スクロールによりユーザーエクスペリエンスが向上する場合があります。
この機能は、ユーザーが一度にではなく、大量のデータや画像を必要なときに読み込む必要がある場合に特に便利です。 Twitter、Facebook、Instagramなどのソーシャルメディアは、長年にわたってこれを普及させてきました。
このチュートリアルでは、ランダムユーザーAPIからデータをフェッチして表示するために無限スクロールを使用するVue.jsアプリケーションの例を作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。
このチュートリアルは、ノードv15.3.0、npm
v6.14.9、vue
v2.6.11、およびaxios
v0.21.0で検証されました。 このチュートリアルは、@vue/cli
の以前のバージョンからの移行における変更を反映するように編集されました。
ステップ1—プロジェクトの設定
このチュートリアルでは、@vue/cli
で生成されたデフォルトのVueプロジェクトからビルドします。
npx @vue/cli create vue-infinite-scrolling-example --default
これにより、デフォルト構成で新しいVueプロジェクトが構成されます:Vue 2
、babel
、eslint
。
新しく作成されたプロジェクトディレクトリに移動します。
cd vue-infinite-scrolling-example
次に、axios
をインストールします。
npm install [email protected]
この時点で、Axiosをサポートする新しいVueプロジェクトが作成されているはずです。
ステップ2—初期ユーザーデータの取得
Vueアプリに使用できる無限スクロール用のさまざまなnpmパッケージがあります。 ただし、これらの一部は、必要のない機能や多数の依存関係のために、ニーズに対してやり過ぎになる可能性があります。
このチュートリアルでは、ブラウザウィンドウの一番下までスクロールすると、新しいデータセットをフェッチするJavaScript関数を作成します。 これには、追加のプラグインやパッケージは必要ありません。
まず、コードエディタでApp.vue
を開きます。
次に、template
のコードを、users
の配列をループするディスプレイに置き換えて、画像、名、姓、生年月日、都市、州を表示します。
src / App.vue
<template> <div id="app"> <h1>Random User</h1> <div class="user" v-for="user in users" :key="user.first" > <div class="user-avatar"> <img :src="user.picture.large" /> </div> <div class="user-details"> <h2 class="user-name"> {{ user.name.first }} {{ user.name.last }} </h2> <ul> <li><strong>Birthday:</strong> {{ formatDate(user.dob.date) }}</li> <li><strong>Location:</strong> {{ user.location.city }}, {{ user.location.state }}</li> </ul> </div> </div> </div> </template>
次に、<style>
のコードを、各ユーザーの表示を調整するためのCSSルールに置き換えます。
src / App.vue
<style> .user { display: flex; background: #ccc; border-radius: 1em; margin: 1em auto; } .user-avatar { padding: 1em; } .user-avatar img { display: block; width: 100%; min-width: 64px; height: auto; border-radius: 50%; } .user-details { padding: 1em; } .user-name { margin: 0; padding: 0; font-size: 2rem; font-weight: 900; } </style>
次に、<script>
のコードを、APIに対して5人のユーザーの初期リクエストを行い、beforeMount
ライフサイクル中に呼び出されるコードに置き換えます。
src / App.vue
<script> import axios from "axios"; export default { data() { return { users: [], }; }, methods: { getInitialUsers() { axios.get(`https://randomuser.me/api/?results=5`).then((response) => { this.users = response.data.results; }); }, }, beforeMount() { this.getInitialUsers(); }, }; </script>
生年月日(DOB)は、 ISO8601形式の文字列として提供されます。 これをより人間が読めるようにするために、Date.prototype.toDateString()
を使用して文字列を日付文字列に変換できます。
src / App.vue
<script> // ... export default { // ... methods: { formatDate(dateString) { let convertedDate = new Date(dateString); return convertedDate.toDateString(); } // ... }, // ... }; </script>
この最初のリクエストでは、ユーザーがアプリケーションを開くと5人のユーザーが表示されます。
注:以前、このチュートリアルでは、ランダムユーザーAPIに対して複数のリクエストを実行して、最初に複数のユーザー結果をロードしていました。 このセクションは、APIによって提供される新しいresults
パラメーターを使用するように書き直されました。
ターミナルウィンドウで、アプリケーションをコンパイルして提供します。
npm run serve
Webブラウザーでアプリケーションを開くと、5人のランダムなユーザーが表示されます。
ステップ3—無限スクロールロジックの実装
無限スクロールロジックでは、ユーザーがウィンドウの下部に到達したことを検出する必要があります。 これは、次の3つのプロパティで実現できます。
document.documentElement.offsetHeight
:ドキュメント要素の高さ全体のピクセル数。document.documentElement.scrollTop
:ドキュメント要素の上部から配置されている現在のピクセル数。window.innerHeight
:画面の高さのピクセル数。
document.documentElement.scrollTop
とwindow.innerHeight
の合計がdocument.documentElement.offsetHeight
に等しい場合、ユーザーはウィンドウの下部に到達したと見なすことができます。
window.onscroll = () => { let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight; if (bottomOfWindow) { // ... } };
ここで、window.onscroll
はscroll
イベントをリッスンし、イベントが検出されたときにチェックを実行します。
注:イベントをバインドする場合、特にスクロールイベントにバインドする場合は、イベントをデバウンスすることをお勧めします。 デバウンスとは、最後に呼び出されてから指定された時間が経過したときにのみ関数を実行することです。
ただし、このチュートリアルの必要性のために、デバウンサーは適用されません。
if
条件の中に、AxiosでGET
サービスメソッドを追加して、ランダムユーザーAPIから別のランダムユーザーをフェッチしましょう。
axios.get(`https://randomuser.me/api/`).then(response => { this.users.push(response.data.results[0]); });
次に、テキストエディタでApp.vue
に戻り、新しいコードを追加します。
コンポーネントのmethods
で、getNextUser()
という新しい関数を作成し、それをmounted()
ライフサイクルメソッドにロードする必要があります。
src / App.vue
<script> import axios from "axios"; export default { data() { return { users: [], }; }, methods: { formatDate(dateString) { let convertedDate = new Date(dateString); return convertedDate.toDateString(); }, getInitialUsers() { axios.get(`https://randomuser.me/api/?results=5`).then((response) => { this.users = response.data.results; }); }, getNextUser() { window.onscroll = () => { let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight; if (bottomOfWindow) { axios.get(`https://randomuser.me/api/`).then(response => { this.users.push(response.data.results[0]); }); } } } }, beforeMount() { this.getInitialUsers(); }, mounted() { this.getNextUser(); } } </script>
次に、アプリケーションを再コンパイルして提供します。
Webブラウザーでアプリケーションを開き、ページの一番下までスクロールすると、新しいユーザーがページに追加されます。
ページの一番下までスクロールするたびに、Axiosを使用して新しいデータをフェッチし、そのデータを配列にプッシュします。
結論
このチュートリアルでは、Vue.jsアプリケーションで無限スクロールの実装を構築しました。 beforeMount
およびmounted
ライフサイクルフックに依存して、APIへのリクエストを初期化してプリフェッチしました。
画像を遅延ロードするには、画像ソースをデータ配列にプッシュし、template
で繰り返し処理して、<img :src="">
を配列にバインドします。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。