Vue.jsアプリケーションに読み込みインジケーターを追加する方法
序章
読み込みインジケーターは、ウェブやモバイルなど、あらゆるアプリケーションのUX(ユーザーエクスペリエンス)を向上させます。 これらのアニメーションは、アクションが実行されており、結果がまもなく返されるというフィードバックをユーザーに提供します。
Webアプリケーションには、ローダーを必要とする2つの主要なイベントがあります。
- 別のページへの移動やAJAXリクエストなどのネットワークリクエスト。
- 重い計算が実行されているとき。
この記事では、Vue.jsアプリケーションにローダーを追加する方法をいくつか紹介します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
このチュートリアルは、ノードv14.2.0、npm
v6.14.5、vue
v2.6.11、およびvue-router
v3.1.6で検証されました。
ステップ1—プロジェクトの設定
新しいVueプロジェクトを作成しましょう。 このチュートリアルでは、 Vue CLI (コマンドラインインターフェイス)を使用して、アプリケーションの足場を作成します。
- npx @vue/cli@4.5.4 create --inlinePreset='{ "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "base", "lintOn": ["save"] } }, "vuex": true, "router": true, "routerHistoryMode": true }' vue-loading-indicators
この長いコマンドは、@vue/cli/packages/@vue/cli/lib/options.js
によって確立されたデフォルトに基づくプリセットのセットです。 読みやすさのために再フォーマットすると、次のようになります。
{
"useConfigFiles": false,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "base",
"lintOn": ["save"]
}
},
"vuex": true,
"router": true,
"routerHistoryMode": true
}
これらのプリセットは、プラグインとしてvue-router
を追加し( cli-plugin-router )、プラグインとしてvuex
を追加します( cli-plugin-vuex )、 履歴モードを有効にし、Babelを追加し、ESLintを追加します。
このチュートリアルのニーズには、TypesScript、プログレッシブWebアプリ(PWA)のサポート、Vuex、CSSプリプロセッサ、単体テスト、またはエンドツーエンド(E2E)テストは必要ありません。
次に、新しいプロジェクトディレクトリに移動します。
- cd vue-loading-indicators
次のコマンドを実行して、Webブラウザでアプリケーションを表示できます。
- npm run serve
Webブラウザでlocalhost:8080
にアクセスすると、"Welcome to Your Vue.js App"
メッセージが表示されます。 Vueルーターを含めたので、ホームページとバージョン情報ページへのリンクもあります。 これらの2つのページ間を移動するときに、読み込みインジケーターを追加することが目標になります。
Vue CLIの詳細については、VueCLIのドキュメントを参照してください。
これで、構築を開始する準備が整いました。
ステップ2—nprogress
を使用する
任意の負荷インジケータを使用できます。 このチュートリアルでは、 nprogress をインストールして、ロードインジケーターとして使用します。
このためにnpm
またはyarn
を使用することはありません。 CDN(コンテンツ配信ネットワーク)から参照します。
作成したVueCLIプロジェクトで、public/index.html
ファイルに移動します。
- nano public/index.html
そして、</head>
タグを閉じる前に以下のスニペットを追加します。
<head>
<!-- ... -->
<link href="https://unpkg.com/[email protected]/nprogress.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/nprogress.js"></script>
</head>
nprogress
はいくつかのAPIメソッドを公開しますが、この記事では、start
とdone
の2つが必要になります。 これらのメソッドは、プログレスバーを開始および停止します。
nprogress
は、ローダーの進行方法を構成することもできます。 これは手動でカスタマイズできますが、この記事ではデフォルトの動作を使用します。
ステップ3—ルーターの使用
ルーターを使用してプログレスバーをWebサイトに追加する場合、期待される一般的な機能は次のとおりです。
「ユーザーが新しいページに移動すると、ローダーはページの上部でカチカチ音をたて始め、ユーザーに次のページのダウンロードの進行状況を示します。」
Vue Router
には、この機能を実現するためにフックできるフックが付属しています。
src/router/index.js
ファイルを開きます。
- nano src/router/index.js
そして、export
の前に以下のコードを追加します。
// ...
router.beforeResolve((to, from, next) => {
// If this isn't an initial page load.
if (to.name) {
// Start the route progress bar.
NProgress.start()
}
next()
})
router.afterEach((to, from) => {
// Complete the animation of the route progress bar.
NProgress.done()
})
export default router
beforeResolve
ルートに接続すると、ページ要求が発生したらnprogress
を開始するようにルーターに指示します。 afterEach
フックは、リンクがプログレスバーを停止するために完全に評価された後、ページ要求が成功したかどうかを気にしないようにルーターに通知します。
この時点で、アプリケーションを実行できます。
- npm run serve
ウェブブラウザでlocalhost:8080
にアクセスすると、ホームページとバージョン情報ページの間を移動できます。 そうすると、アプリケーションに追加した読み込みインジケーターが表示されます。
次のステップでは、負荷インジケーターについてさらに詳しく説明します。
ステップ4—高度な使用法を探る
このセクションでは、アプリケーションにインジケーターをロードするための他のユースケースを紹介します。
これらは例とともに提示され、自分で探索したいと思わない限り、チュートリアルに直接実装することはありません。
HTTPライブラリの使用
プログレスバーを追加したいアプリケーションのもう1つの部分は、ユーザーがAJAXリクエストを行うときです。
今日のほとんどのHTTPライブラリには、要求または応答が発生する前に起動する一種のミドルウェアまたはインターセプターがあります。 このため、選択したライブラリに接続することもできます。
このチュートリアルでは、axiosを使用します。 このライブラリでは、インターセプターという用語を使用しています。
axios
をインストールします。
- npm install axios@0.20.0
次に、HTTP.js
ファイルを作成します。
- nano HTTP.js
次に、次のように機能するようにaxios
を構成できます。
import axios from 'axios'
// create a new axios instance
const instance = axios.create({
baseURL: '/api'
})
// before a request is made start the nprogress
instance.interceptors.request.use(config => {
NProgress.start()
return config
})
// before a response is returned stop nprogress
instance.interceptors.response.use(response => {
NProgress.done()
return response
})
export default instance
このコードを使用すると、接続を処理し、リクエストが行われるたびに進行状況バーを取得できます。
コンポーネント内でのローダーの使用
ページリクエストやAJAXリクエストを行っていない場合があります。 時間がかかるブラウザ依存のアクションかもしれません。
何らかの外部アクションによって状態をロード状態に変更できるカスタムDownloadButton
コンポーネントについて考えてみましょう。
コンポーネントは、loading
という1つの支柱のみを取ります。
<template>
<DownloadButton :loading="loading">Download</DownloadButton>
</template>
サンプルコンポーネントは次のようになります。
注: SVG viewBox
、path
、およびstyle
の詳細の一部はこの例では定義されていません。
<template>
<button class="Button" :disabled="loading">
<svg v-if="loading" class="Button__Icon Button__Spinner" viewBox="...">
<path d="..."/>
</svg>
<svg v-else class="Button__Icon" viewBox="0 0 20 20">
<path d="..."/>
</svg>
<span v-if="!loading" class="Button__Content">
<slot/>
</span>
</button>
</template>
<script>
export default {
props: {
loading: { type: Boolean }
}
}
</script>
<style>
/* ... */
</style>
これは、このコードが生成するもののデモンストレーションです。
再利用可能なローダーに高次のコンポーネントを使用する
コンポーネントのラッパー(HOC)としてローダーを作成し、小道具を使用してその状態を変更できます。
これらのタイプのローダーは、アプリケーションのグローバルな状態に影響を与えないコンポーネントに適していますが、それでもユーザーが適切なアクションに接続していると感じられるようにする必要があります。
次に例を示します。
注: Stats
の内容の詳細の一部は、この例では定義されていません。
// This loader will add an overlay with the text of 'Loading...'
const Loader = {
template: `
<div class="{'is-loading': loading}">
<slot/>
</div>
`,
props: ['loading']
}
const Stats = {
template: `
<Loader :loading="updating">
...
</Loader>
`,
props: ['updating']
}
const app = new Vue({
template: `
<div class="widget">
<Stats :updating="fetchingStats"/>
<Button @click="fetchingStats = true">
Latest stats
</Button>
</div>
`,
})
これは、このコードが生成するもののデモンストレーションです。
非同期Vueコンポーネントの使用
Vueの非同期コンポーネントを使用すると、必要な場合にのみサーバーからコンポーネントをフェッチできます。 エンドユーザーに使用することのないコンポーネントを提供する代わりに、エンドユーザーには必要なものだけを提供します。
非同期コンポーネントには、ロードおよびエラー状態のネイティブサポートも付属しているため、ここで追加の構成を行う必要はありません。
次に例を示します。
const AsyncComponent = () => ({
component: import('./MyComponent.vue'),
// show this component during load
loading: LoadingComponent,
// show this component if it fails to load
error: ErrorComponent,
// delay before showing the loading component
delay: 200,
// error if the component failed to loadin is allotted time in milliseconds default in Infinity
timeout: 3000
})
ここでの方法で非同期コンポーネントを使用するには、Vueルーター遅延読み込みを使用する必要があります。
結論
この記事では、Vue.jsアプリに読み込みインジケーターを追加するいくつかの方法について説明しました。 読み込みインジケーターは、ユーザーにフィードバックを提供するための便利なツールです。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。