1．はじめに

大学生フリーランスのむささびです．
主にWeb制作活動を行っています．

普段は JavaScript のライブラリとして jQuery を触る機会が多いですが，モダンなフレームワークにも大変興味があるお年頃です．

そこで，昨今大変人気な JavaScript フレームワークのひとつである Vue.js についてお勉強しました．

本記事ではモダンな JavaScript フレームワーク初心者向けに，Vue.js でスライダーを作成します．
また jQuery との比較もしたかったため，jQuery と Vue.js を用いて同じ機能のスライダー (計2つ) を実装します．

また，今回作成したスライダーはこちらですが，Vue.js を初めて触って 3日 で完成させました．
この際の勉強方法も参考になるのではと思い，辿ったルートも簡単に紹介したいと思います．

こんな方に読んでほしい

Vue.js を触ってみたい
jQuery をよく使うけど，モダンなフレームワークを触りたい
Vue.js の勉強方法を知りたい

2．完成までの道のり

本記事の目標は 「Vue.js でスライダーを作成する！」 です．
この目標を達成するために，次の流れで学習を行いました．

学習の流れ

1日目: Vues.js の基礎を学ぶ
2日目: jQuery でスライダーを実装する
3日目: Vue.js でスライダーを実装する

1日目

まず1日目ではたにぐちまことさんの YouTube 動画で Vue.js の基礎を学習しました．

上記の動画で使用されている Vue.js のバージョンは 2.x 系ですが，スライダーの実装では 3.x 系を使用したかったため，自分で 3.x 系に書き換えながら学習を進めました．

3.x 系に書き換えを行う際は，主に公式リファレンスを参考にしました．

2日目

2日目では Vue.js から離れて jQuery を用いてスライダーを実装しました．
作成したスライダーの説明は後ほどします．

3日目

この日が本命です．Vue.js を使用してスライダーを実装します．
2日目に作成したスライダーと全く同じ機能をもつスライダーを，Vue.js で作成します．

3．作成するスライダー

それでは今回作成するスライダーの概要を説明します．
スライダーのコード全体は GitHub に置いておりますので適宜ご参照ください．

今回実装するするスライダーはこちらです．

このスライダーはかなり多機能なものになっており，以下の機能が備わっています．

スライダーの機能一覧

ナビゲーションボタン (前後のスライドに移動させる)
インジケーターボタン (任意のスライドに移動させる)
自動再生
一時停止

上記の機能が備わったスライダーを，jQuery と Vue.js の 2 方向から実装します．

4．実装

それでは実装詳細です．
jQuery と Vue.js の 2 パターンについて，それぞれ説明します

4-1．jQuery スライダー

jQuery を用いたスライダーの実装を説明します．
実装に使用した jQuery のバージョンは 3.6.0 です．

以下が jQuery スライダーにあたる部分のコードです．
以降でいくつかの箇所を掻い摘んで説明します．

index.html

  <!-- jQuery -->
  <div class="sec-slider jquery">
    <h1>jQuery Slider</h1>
    <div class="slider-wrap">
      <div class="slides">
        <div class="slide"><img src="https://source.unsplash.com/T-VS-7y_fAY/960x300" alt="スライド1"></div>
        <div class="slide"><img src="https://source.unsplash.com/YKtxjGsl1BY/960x300" alt="スライド2"></div>
        <div class="slide"><img src="https://source.unsplash.com/oZu6mNLGJrU/960x300" alt="スライド3"></div>
        <div class="slide"><img src="https://source.unsplash.com/FoBq12oj6SY/960x300" alt="スライド4"></div>
        <div class="slide"><img src="https://source.unsplash.com/kCes633Hh1M/960x300" alt="スライド5"></div>
      </div>
      <div class="slider-nav">
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
      </div>
    </div>
    <div class="indicator"></div>
  </div><!-- /jQuery -->

script.js

$(function(){
  
  /*
   * jQuery Slider
   */
  $('.sec-slider.jquery').each(function (){
    
    var $section    = $(this),
        $slides       = $section.find('.slider-wrap .slides'),
        $slide        = $slides.find('.slide'),
        $nav          = $section.find('.slider-wrap .slider-nav'),
        $indicator    = $section.find('.indicator'),

        slideCount    = $slide.length,
        indicatorHTML = '',
        currentIndex  = 0,
        interval      = 7500,
        timer;

    $slide.each(function (i) {
      indicatorHTML += '<a href="#"></a>';
    });
    $indicator.html(indicatorHTML);


    // 関数の定義
    // - - - - - - - - - - - - - - - - - - - - 

      // 次のスライドを表示する関数
      function showSlide(index) {
        var nextIndex = index;

        $slide.eq(currentIndex).fadeOut();  // 現在のスライドをフェードアウト
        $slide.eq(nextIndex).fadeIn();      // 次のスライドをフェードイン
        currentIndex = nextIndex;           // インデックを更新
        update();                           // ナビゲーションとインジケーターの更新 
      }

      // ナビゲーションとインジケーターを更新する関数
      function update() {
        var $prev = $nav.find('.prev');
            $next = $nav.find('.next');

        // 最初のスライドであれば，$prev ナビゲーションを無効にする
        if(currentIndex == 0){
          $prev.addClass('disabled');
        } else {
          $prev.removeClass('disabled');
        }
        // 最初のスライドであれば，$next ナビゲーションを無効にする
        if(currentIndex == slideCount-1){
          $next.addClass('disabled');
        } else {
          $next.removeClass('disabled');
        }
        // 現在のスライドのインジケーターを有効化
        $indicator.find('a').removeClass('active')
                  .eq(currentIndex).addClass('active');
      }

      // タイマーを開始する関数
      function startTimer() {
        timer = setInterval(function () {
          // 次に表示するスライドのインデックス
          var nextIndex = (currentIndex+1) % slideCount;
          showSlide(nextIndex);
        }, interval);
      }

      // タイマーを停止する関数
      function stopTimer() {
        clearInterval(timer);
      }


    // イベントの登録
    // - - - - - - - - - - - - - - - - - - - - 

      // ナビゲーションがクリックされたら該当するスライドを表示
      $nav.on('click', 'a', function(event) {
        event.preventDefault();
        if($(this).hasClass('prev')) {
          showSlide(currentIndex-1);
        } else {
          showSlide(currentIndex+1);
        }
      });

      // インジケーターがクリックされたら該当するスライドを表示
      $indicator.on('click', 'a', function(event) {
        event.preventDefault();
        if( !$(this).hasClass('active') ){
          showSlide($(this).index());
        }
      });

      // マウスが乗ったらタイマーを停止
      $slides.on({
        mouseenter: stopTimer,
        mouseleave: startTimer
      });


    // スライドショーの開始
    // - - - - - - - - - - - - - - - - - - - - 
    showSlide(currentIndex);
    startTimer();
  });
});

※補足スライドの画像に用いる API

jQuery と Vue.js との両者とも，スライド画像は Unsplash Source の API を用いています．

Unsplash はオシャレな無料画像を探すのに非常に便利なサイトで，その Unsplash が提供している API が Unsplash Source になります．

例えば，ランダムな画像を取得したい場合は

https://source.unsplash.com/random

と入力すれば OK です．
サイズの指定も可能で大変便利ですね．

次のスライドを表示する関数

      function showSlide(index) {
        var nextIndex = index;

        $slide.eq(currentIndex).fadeOut();  // 現在のスライドをフェードアウト
        $slide.eq(nextIndex).fadeIn();      // 次のスライドをフェードイン
        currentIndex = nextIndex;           // インデックを更新
        update();                           // ナビゲーションとインジケーターの更新 
      }

上記の関数でスライドのフェードイン/フェードアウトを操作しています．
フェードインには jQueryの fadeIn() メソッド，フェードアウトには fadeOut() メソッドを用いています．

また update() 関数は次で定義しているナビゲーションとインジケーターを更新する関数です．

ナビゲーションとインジケーターを更新する関数

      function update() {
        var $prev = $nav.find('.prev');
            $next = $nav.find('.next');

        // 最初のスライドであれば，$prev ナビゲーションを無効にする
        if(currentIndex == 0){
          $prev.addClass('disabled');
        } else {
          $prev.removeClass('disabled');
        }
        // 最初のスライドであれば，$next ナビゲーションを無効にする
        if(currentIndex == slideCount-1){
          $next.addClass('disabled');
        } else {
          $next.removeClass('disabled');
        }
        // 現在のスライドのインジケーターを有効化
        $indicator.find('a').removeClass('active')
                  .eq(currentIndex).addClass('active');
      }

上記の関数ではナビゲーションとインジケーターの動きを管理しています．

このスライダーでは，最初のスライドが表示されているときは 「前の」 スライドへ移動する矢印が非表示になり，また最後のスライドが表示されているときは 「次の」 スライドへ移動する矢印が非表示になります．

update 関数ではこの動きを実装しています．
さらに，現在のスライドに該当するインジケーターボタンを 有効化 (黒色) にしているのもこの関数です．

タイマーを開始/停止する関数

      // タイマーを開始する関数
      function startTimer() {
        timer = setInterval(function () {
          // 次に表示するスライドのインデックス
          var nextIndex = (currentIndex+1) % slideCount;
          showSlide(nextIndex);
        }, interval);
      }

      // タイマーを停止する関数
      function stopTimer() {
        clearInterval(timer);
      }

スライダーの機能に 自動再生/一時停止 がありますが，この機能を司っている関数が startTimer() と stopTimer() になります．

startTimer() では JavaScript のメソッドである setInterval() を用いて，showSlide() 関数を定期的に呼び出しています．

また stopTimer() では clearInterval() を使用し，setInterval() の呼び出しによって確立されたタイマーの動作を取り消しています．

イベントの登録

      // ナビゲーションがクリックされたら該当するスライドを表示
      $nav.on('click', 'a', function(event) {
        event.preventDefault();
        if($(this).hasClass('prev')) {
          showSlide(currentIndex-1);
        } else {
          showSlide(currentIndex+1);
        }
      });

      // インジケーターがクリックされたら該当するスライドを表示
      $indicator.on('click', 'a', function(event) {
        event.preventDefault();
        if( !$(this).hasClass('active') ){
          showSlide($(this).index());
        }
      });

      // マウスが乗ったらタイマーを停止
      $slides.on({
        mouseenter: stopTimer,
        mouseleave: startTimer
      });

上記では，これまで定義した関数を呼び出すタイミングを決めています．

ひとつ注意点として，preventDefault() の使い方に着目してください．

event.preventDefault() は通常行われるはずの動作をキャンセルするメソッドです．
ここでは a タグをクリックした際のリンク遷移をキャンセルしているわけですね．

また，スライダーの 自動再生/一時停止 機能についてですが，マウスがスライド画像上に乗っているときにタイマーを止めることで実現しています．

4-2．Vue.js スライダー

さて，ここからが本番です．Vue.js を用いたスライダーの実装を説明します．
実装に使用した Vue.js のバージョンは 3.2.36 です．
Vue.js 公式が提供している CDN を使用しています．

以下が Vue.js スライダーにあたる部分のコードです．
jQueryと同様に以降でいくつかの箇所を説明しますが，プログラムの基本的な考えはほとんど同じです．

index.html

  <!-- Vue.js -->
  <div class="sec-slider vue" id="app">
    <h1>Vue.js Slider</h1>

    <div class="slider-wrap">
      <div class="slides" @mouseenter="stopTimer()" @mouseleave="startTimer()">
        <transition-group name="slide-trans">
          <div class="slide" v-show="currentIndex == id" :key="id" v-for="(img,id) in imgs">
            <img v-bind:src="imgs[id].src" v-bind:alt="'スライド' + (id+1)">
          </div>
        </transition-group>
        </div>
      <div class="slider-nav">
        <a href="#" class="prev" v-show="currentIndex > 0" @click="prev($event)"></a>
        <a href="#" class="next" v-show="currentIndex < slideCount-1" @click="next($event)"></a>
      </div>
    </div>
    
    <div class="indicator">
      <template v-for="i in slideCount" :key="i">
        <a v-if="currentIndex == i-1" class="active" href="#" @click="jump(i-1,$event)"></a>
        <a v-else href="#" @click="jump(i-1,$event)"></a>
      </template>
    </div>
  </div><!-- /Vue.js -->

script.js

window.onload = function(){

  /*
   * Vue.js Slider
   */

  var imgs = [
        { src: 'https://source.unsplash.com/T-VS-7y_fAY/960x300' },
        { src: 'https://source.unsplash.com/YKtxjGsl1BY/960x300' },
        { src: 'https://source.unsplash.com/oZu6mNLGJrU/960x300' },
        { src: 'https://source.unsplash.com/FoBq12oj6SY/960x300' },
        { src: 'https://source.unsplash.com/kCes633Hh1M/960x300' }
      ],
      slideCount    = imgs.length,
      indicatorHTML = '<a href="#"></a>',
      interval      = 7500,
      timer;

  const app = Vue.createApp({
    data() {
      return {
        currentIndex: 0,
        imgs: imgs,
        slideCount: slideCount,
        indicatorHTML: indicatorHTML,
        timer: timer
      }
    },

    // インスタンスが作成された後に同期的に呼び出す
    created: function() {
      this.startTimer();
    },

    // メソッドの定義
    methods: {
      prev(e) {  // 次のスライドを表示
        e.preventDefault();
        this.currentIndex--;
      },
      next(e) {  // 前のスライドを表示
        e.preventDefault();
        this.currentIndex++;
      },
      jump(i,e) {  // インジケーターがクリックされたら該当するスライドを表示
        e.preventDefault();
        this.currentIndex = i;
      },
      startTimer() {  // タイマーを開始する関数
        this.timer = setInterval( () => {
          this.currentIndex = (this.currentIndex+1) % slideCount;
        }, interval);
      },
      stopTimer() {  // タイマーを停止する関数
        clearInterval(this.timer);
      }
    }
  }).mount('#app')
}

変数の定義

  var imgs = [
        { src: 'https://source.unsplash.com/T-VS-7y_fAY/960x300' },
        { src: 'https://source.unsplash.com/YKtxjGsl1BY/960x300' },
        { src: 'https://source.unsplash.com/oZu6mNLGJrU/960x300' },
        { src: 'https://source.unsplash.com/FoBq12oj6SY/960x300' },
        { src: 'https://source.unsplash.com/kCes633Hh1M/960x300' }
      ],
      slideCount    = imgs.length,
      indicatorHTML = '<a href="#"></a>',
      interval      = 7500,
      timer;

jQuery と異なるポイントは，ズバリ img 配列ですね．
オブジェクトを用いて画像の URL をまとめて保持しています．

また Array.length プロパティを用いて，スライドの数を slideCount 変数に格納しています．

メソッドの定義

    methods: {
      prev(e) {  // 次のスライドを表示
        e.preventDefault();
        this.currentIndex--;
      },
      next(e) {  // 前のスライドを表示
        e.preventDefault();
        this.currentIndex++;
      },
      jump(i,e) {  // インジケーターがクリックされたら該当するスライドを表示
        e.preventDefault();
        this.currentIndex = i;
      },
      startTimer() {  // タイマーを開始する関数
        this.timer = setInterval( () => {
          this.currentIndex = (this.currentIndex+1) % slideCount;
        }, interval);
      },
      stopTimer() {  // タイマーを停止する関数
        clearInterval(this.timer);
      }
    }

ますは各メソッドの定義を見てみます．
jQuery で定義した関数と本質的な考えは変わりませんが，かなりシンプルに記述できているように思えます．

スライド表示の動きについては，currentIndex 変数がカギです．
この変数を インクリメント/デクリメント することで前後のスライドへ移動し，さらにクリックされたスライドの番号を渡すことで該当するスライドへ飛ぶことが可能です．

また startTimer(), stopTimer() も定義しています．
jQuery スライダーと同様に setInterval() や clearInterval() を用いて，うまくタイマー機能を実装しています．

created による呼び出し

    // インスタンスが作成された後に同期的に呼び出す
    created: function() {
      this.startTimer();
    },

Vue.js にはライフサイクルという概念があり，Vue.jsによって作成されたページはこのサイクルに従って処理が実行されていきます．

created は，このライフサイクルのひとつのタイミングであり，インスタンスが作成されたあとに関数の呼び出しが行われます．
つまり，インスタンスが作成されたあとに startTimer() メソッドが呼び出され，スライドの自動再生が行われるわけですね．

スライド画像の表示

      <div class="slides" @mouseenter="stopTimer()" @mouseleave="startTimer()">
        <transition-group name="slide-trans">
          <div class="slide" v-show="currentIndex == id" :key="id" v-for="(img,id) in imgs">
            <img v-bind:src="imgs[id].src" v-bind:alt="'スライド' + (id+1)">
          </div>
        </transition-group>
      </div>

ここからは HTML コードについて見ていきます．上記はスライダー本体を表示している部分になります．

大きな動きとして v-for ディレクティブを用いて for ループを回し，img 配列内の画像を表示させています．

また v-for でループを回す際に id(インデックス) を付与しています．
この値と currentIndex 変数とを v-show ディレクティブを用いて比較し，一致するスライド画像を表示させているという仕組みです．

さらにを使用することで，アニメーションの付与を実現しています．
<transition-group> を使用するには，子要素を識別する key が必要ですが，その key として id を指定しています．

また <transition-group> は，トランジション/アニメーションのためのクラスを自動的に生成するので，そのクラスを使用すれば簡単にアニメーションをつけることができます．
以下のコードが，トランジション効果を適用する CSS になります．

style.css

.sec-slider.vue .slides .slide {
  display: block;
}
.slide-trans-enter-active, .slide-trans-leave-active {
  transition: all .4s ease-out;
}
.slide-trans-enter-from, .slide-trans-leave-to {
  opacity: 0;
}

クラス命名の規則はこちらを参考にしてください．

ナビゲーションの表示

      <div class="slider-nav">
        <a href="#" class="prev" v-show="currentIndex > 0" @click="prev($event)"></a>
        <a href="#" class="next" v-show="currentIndex < slideCount-1" @click="next($event)"></a>
      </div>

上記がナビゲーション (画像を前後へ移動させる) ボタンの表示に関わる部分です．

「前の」 画像に移動するボタンがクリックされたときは prev() を呼び出し，
「次の」 画像に移動するボタンがクリックされたときは next() を呼び出します．

jQuery スライダーで説明したナビゲーションとインジケーターを更新する関数と同様に，最初と最後のスライドでは矢印の表示を制御しています．
この機能を Vue.js ではv-show ディレクティブ を用いることで実現しています．

インジケーターの表示

    <div class="indicator">
      <template v-for="i in slideCount" :key="i">
        <a v-if="currentIndex == i-1" class="active" href="#" @click="jump(i-1,$event)"></a>
        <a v-else href="#" @click="jump(i-1,$event)"></a>
      </template>
    </div>

最後にインジケーターの表示部分の説明です．
Vue.js において <template> は様々な役割があるようですが，ここでは v-for によって複数の子要素を制御するために使用していると思います (自信ないです...ごめんなさい)

また v-if を用いて currentIndex とインジケーターボタンの番号とを比較し，一致したボタンを有効化(黒色) しています．
それ以外のボタンをクリックすると jump() が呼び出され，該当のスライドへ遷移することが可能です．

5．jQuery vs Vue.js

スライダーの実装，大変お疲れさまでした．
今回の実装をもとに，jQueyr と Vue.js のそれぞれに感じたメリットとデメリットをまとめてみます．

	メリット	デメリット
jQuery	直感的な操作ができる	DOMを直接操作するので状態管理が大変
Vue.js	コード量が少なく視認性が高い仮想DOMを扱うので表示速度が早い/管理が楽	jQueryのメソッドが使えない