Vue.jsアプリケーションに読み込みインジケーターを追加する方法

序章

読み込みインジケーターは、WebまたはモバイルのあらゆるアプリケーションでUX（ユーザーエクスペリエンス）を向上させます。これらのアニメーションは、アクションが実行されており、結果がまもなく返されるというフィードバックをユーザーに提供します。

Webアプリケーションには、ローダーを必要とする2つの主要なイベントがあります。

別のページへの移動やAJAXリクエストなどのネットワークリクエスト。
重い計算が実行されているとき。

この記事では、Vue.jsアプリケーションにローダーを追加する方法をいくつか紹介します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

このチュートリアルは、ノードv14.2.0、npm v6.14.5、vue v2.6.11、およびvue-routerv3.1.6で検証されました。

ステップ1—プロジェクトの設定

新しいVueプロジェクトを作成しましょう。このチュートリアルでは、 Vue CLI （コマンドラインインターフェイス）を使用して、アプリケーションの足場を作成します。

npx @vue/[email protected] 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>タグを閉じる前に以下のスニペットを追加します。

public / index.html

<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の前に以下のコードを追加します。

src / router / index.js

// ...

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 [email protected]

次に、HTTP.jsファイルを作成します。

nano HTTP.js

次に、次のように機能するようにaxiosを構成できます。

HTTP.js

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の詳細の一部はこの例では定義されていません。

src / components / DownloadButton.vue

<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の非同期コンポーネントを使用すると、必要な場合にのみサーバーからコンポーネントをフェッチできます。エンドユーザーに使用することのないコンポーネントを提供する代わりに、エンドユーザーには必要なものだけを提供します。

非同期コンポーネントには、ロードおよびエラー状態のネイティブサポートも付属しているため、ここで追加の構成を行う必要はありません。