SPAだけじゃない！Vue.js[3] プラグインでさらに便利に拡張する 〜vue-lazyloadで画像の遅延読込〜

こんにちは。フロントエンドのつっちーです。

前回、前々回に引き続き、「サーバーサイドテンプレートやHTMLファイルへのマークアップに対して、Vue.jsを使用する方法」に的を絞り、Vue.jsについて書いていきます。今回は、Vue.jsを拡張するプラグインの使い方について、実際にプラグインを利用して画像を遅延読み込みさせている例から見ていきたいと思います。

プラグインで更に便利に拡張する

jQueryには、その機能をさらに拡張する、プラグインと呼ばれるツールが数多く開発されています。Vue.jsにもまた同様に、機能拡張のためのプラグインが多く開発されています。Vue.jsは、jQueryよりもかなり後に誕生しているため、その数はjQueryに遠く及びませんが、思いつく機能のプラグインは大抵がすでに存在しています。awesome-vueには、その豊富なプラグインが機能ごとに一覧でまとめられていますので、ぜひチェックしてみてください。

その中から、今回はvue-lazyloadという、画像の遅延読み込み機能を追加するプラグインを取り上げます。下記3つの挙動に分割し、プラグインの利用方法について注目していきます。

• プラグインの導入
• 画像の遅延読み込みを有効化する
  →プラグインが独自に提供する機能の利用
• 遅延読み込みのタイミングや取得失敗時の代替画像を調整
  →プラグインのオプション設定

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

プラグインの導入

See the Pen vue-lazyload-01 by ligdsktschy (@lig-dsktschy) on CodePen.

See the Pen vue-lazyload-01 by ligdsktschy (@lig-dsktschy) on CodePen.

See the Pen vue-lazyload-01 by ligdsktschy (@lig-dsktschy) on CodePen.

早速プラグインの導入です。
Vue.jsでのプラグイン導入は、上述の方法で予めソースコードを読み込んであれば、あとはVue.useメソッドにプラグインのオブジェクト（以下プラグインオブジェクト）を引数として渡し、実行するだけです。正しく実装されたVue.jsのプラグインは、必ずこのVue.useメソッドに対応したプラグインオブジェクトを提供しています。プラグインオブジェクトは、この例のようにCDNを利用してwindowオブジェクトに持つか、あるいはモジュールバンドラーとES Modulesを利用して取得できます。

遅延表示に演出を追加
→プラグインが独自に提供する機能の利用

See the Pen vue-lazyload-01 by ligdsktschy (@lig-dsktschy) on CodePen.

See the Pen vue-lazyload-01 by ligdsktschy (@lig-dsktschy) on CodePen.

まずはシンプルに画像の遅延読み込みを実装してみました。
vue-lazyloadを導入することで、v-lazyというディレクティブが使用可能となります。このディレクティブの値として画像URLを指定するだけで、その要素が遅延読み込みの対象となります。また、v-lazy:background-imageディレクティブを使用することで、CSSのbackground-imageプロパティに設定された画像も対象とすることができます。プラグインの機能は、Vueの基本機能と同じく、マウント対象要素自体とその子要素でのみ有効です。

See the Pen vue-lazyload-02 by ligdsktschy (@lig-dsktschy) on CodePen.

See the Pen vue-lazyload-02 by ligdsktschy (@lig-dsktschy) on CodePen.

ここまでの状態では表示が唐突で不恰好なので、プラグインの機能をさらに利用し、より自然な表示を目指します。vue-lazyloadは、遅延読み込み対象の要素に対してlazyという属性を自動で設定します。この属性の値は変動し、loading,loaded,errorの3つによって画像の読み込み状況を表します。上の例では、これらをCSSのセレクタとして利用し、loading状態からloaded状態に向けて透明度をアニメーションさせています。

遅延読み込みのタイミングや取得失敗時の代替画像を調整
→プラグインのオプション設定

See the Pen vue-lazyload-03 by ligdsktschy (@lig-dsktschy) on CodePen.

See the Pen vue-lazyload-03 by ligdsktschy (@lig-dsktschy) on CodePen.

プラグイン自体の挙動についての設定は、大抵のプラグインが、Vue.useメソッドの第二引数にオブジェクトの形で受け付けます。vue-lazyloadでは、画像読み込みの発生位置（発生タイミング）、取得失敗時の代替画像、ローディング中の代替画像などが設定できます。

まとめ

一見大変そうな画像の遅延読み込みですが、プラグインを利用してとても簡単に実現できました。次回も、フォームバリデーション機能を通して、引き続きプラグインの利用について取り上げる予定です。

ではまた。つっちーでした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。