おぴよの気まぐれ日記

おぴよの気まぐれ日記

岡山やプログラミング、ファッションのこと、子育てや人生、生き方についての備忘録。

【Vue】API読み込み中にグルグル(ローディング/スピナー)を表示する

こんちには。opiyoです。

vueでデータが読み込まれるまでの時間をローディング画像/スピナー画像を表示させて急に画像が表示されてユーザーを困らせないようにしたい!

API通信中にローディング画像を表示させて通信完了したら取得したデータに切り替えたい!

こんな悩みを解決していきたいと思います。

結論から言ってしまうと

  • 「vue-simple-spinner」を使う
  • v-showを使って表示/非表示を制御する

API連携する際にどうしてもタイムラグが出てしまってました。ローディング画像が無いと、急にシュッとデータが表示されるで何だかなーって思っていたので、グルグルを表示する方法を調べてみました!

vueでローディング/スピナーを表示する「vue-simple-spinner」のインストール

npmの場合

npm install vue-simple-spinner --save

CDNの場合(今回こっち使います)

<script src="https://cdn.jsdelivr.net/npm/vue-simple-spinner@1.2.8/dist/vue-simple-spinner.min.js"></script>

githubはこちらから。

https://github.com/dzwillia/vue-simple-spinner

github見ると、最新は1.2.10かなーと思って読み込むurlも変えてみたんだけどエラーになったので1.2.8でやりました。

vueでローディング/スピナーを表示する「vue-simple-spinner」の使い方

1. ライブラリを取り込む

<script src="https://cdn.jsdelivr.net/npm/vue-simple-spinner@1.2.8/dist/vue-simple-spinner.min.js"></script>

2. コンポーネント=componentsを定義する

const Spinner = window.VueSimpleSpinner;
var app = new Vue({
  components: {
    Spinner
  }
})

3. テンプレート呼び出し

<spinner></spinner>

サンプル

では早速、画面を表示してみましょう!

「vue-simple-spinner」を使ってローディング画像を表示
「vue-simple-spinner」を使ってローディング画像を表示

グルグル = ローディング画像がちゃんと表示されていますね。

vueでAPI通信中にローディング/スピナーを表示する

次は、より実践的なものを試してみたいと思います!

API連携中はローディング画像を表示。API連携が完了したら取得したデータを表示させる。ってのをやってみます!

1. 表示/非表示を制御するフラグを定義する

var app = new Vue({
    el: "#app",
    data: {
        message: 'Vueのローディング画像を検証するよ',
        isLoading: true
    },
})

2. API通信後にフラグをfalseにする

今回はワンチャンの画像を取得できるAPIを使ってみます!

APIを取得する方法はaxiosを使い、取得後にフラグを変更させます。

mounted :function(){
    target = this
    axios.get('https://dog.ceo/api/breeds/image/random')
        .then(function(response) {
            target.image = response.data.message;
            target.isLoading = false
        })
        .catch(function(response) {
            console.log(response);
        });
}

3. フラグを関知する設定を定義する

APIで取得したワンチャンの画像 = imageを表示させます。

また、v-showを使ってisLoadingtrue/falseを制御します。

<div id="app">
        <p>{{ message }}</p>
        <spinner v-show="isLoading"></spinner>
        <img v-show="!isLoading" :src="image" alt="">
</div>

実際に動かして見ると............

API取得後のイメージ画像
API取得後のイメージ画像

リロードすると.......

API取得後のイメージ画像を再読み込み
API取得後のイメージ画像を再読み込み

ローディング画像が表示された後に新しい画像に変わってる事が確認できますね!

今回使ったプログラム

今回使ったプログラムは、こちらのgithubにもアップしておきました。

GitHub - nakanoTaku/vue-simple-spinner: vue-simple-spinnerの検証プログラム

が、こっちにも全文書いておきます!

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <spinner v-show="isLoading"></spinner>
        <img v-show="!isLoading" :src="image" alt="">
    </div>

<!--  vue関連読み込み  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-simple-spinner@1.2.8/dist/vue-simple-spinner.min.js"></script>
<script>
    const Spinner = window.VueSimpleSpinner;
    var app = new Vue({
        el: "#app",
        data: {
            message: 'Vueのローディング画像を検証するよ',
            image: '',
            isLoading: true
        },
        components: {
            Spinner
        },
        mounted :function(){
            target = this
            axios.get('https://dog.ceo/api/breeds/image/random')
                .then(function(response) {
                    target.image = response.data.message;
                    target.isLoading = false
                })
                .catch(function(response) {
                    console.log(response);
                });
        }
    })
</script>
<style>
    #app {
        margin: 20px;
        text-align: center;
    }
    img {
        width: 120px;
        height: 120px;
    }
</style>
</body>
</html>

まとめ

vueは便利で面白いですねー。

API使って何か処理するみたいなことは多くの場面で使うだろうから、実務でも使うことが出てきそうです。

今日は、「vue-simple-spinner」を使ったローディング画像の表示方法をまとめてみました。

使い方のおさらいです。

  1. cdnでライブラリを読み込む
  2. コンポーネントを定義する
  3. htmlでテンプレートを読み込む

こんな感じです。

が、vueは絶賛勉強中なので間違いあれば「マサカリ」お待ちしております!!