2022/08/13 (更新日: 2022/08/21)

【最新版】Vue.jsでローディング処理を実装する方法【フロントエンドエンジニアが解説】

Programming WebApp

こんにちは。masakiです。
今回は、vue.jsでローディング処理を実装する方法について解説していきます。

ローディング処理とは、上のアイキャッチ画像のようなクルクルの処理ですね。
APIを叩いてバックエンドからデータを取得し、それをフロントエンド側で表示するときなどによく使います。
データを取ってこれるまでは、クルクルしておくわけです。

Vue.jsでローディング処理を実装する方法

実装の方法は割と簡単で、大まかな流れは以下のようになります。

1. フラグを準備する
2. ローディングのコンポーネントを準備する
3. フラグの制御をする

順番に詳しく解説します。

フラグを準備する

フラグは以下のように準備します。

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
}
</script>

デフォルトではtrueにしておくのが良いでしょう。このisLoadingというフラグがtrueの時はローディングの画像を表示するようにし、falseの時は画面を普通に表示するようにしていきます。

次はローディングのコンポーネントを準備していきます。

ローディングのコンポーネントを準備する

今回は、vue-loadingというライブラリを用います。
以下のコマンドでインストール可能です。

npm install vue-loading-template

フラグの制御をする

フラグを制御するのは簡単です。例えば、APIでデータを取得した後にローディング画面を終了する場合には、以下のような感じで実装します。
※APIが何かについて知りたい方は、以下の記事を参考にしてください。
【中学生でもわかる】APIとは何かについてわかりやすく解説【エンジニアが噛み砕いて説明します】

<template>
  <div>
    <div v-if="isLoading">
      <vue-loading 
        type="bars"
        color="d9544e"
        :size="{width: '50px', height: '50px'}"
      ></vue-loading>
    </div>    <div v-else> 
      <div>{{ users }}</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import VueLoading from 'vue-loading-template'
export default { 
  components: { 
    VueLoading 
  },
  data() { 
    return { 
      isLoading: true,
      users: [] 
    } 
  }, 
  methods: { 
    async fetchData: () => { 
      const res = await axios.get("/api/users/"); 
      this.users = res.data.users; 
    }
  }, 
  created() { 
    this.fetchData(); 
    this.isLoading = false; 
  } 
} 
</script>

上記のような感じで実装すれば、

1. created時にAPIを叩いてデータを取得
2. 取得し終わったらフラグをfalseに変更
3. ローディングの画像を非表示にする

といった流れが実現できます。

最後に

今回はここまでとなります。最後まで読んでいただきありがとうございました。

参考にした記事

Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方

vue

• Tweet
• facebook
• hatebu
• LINE
• Read Later