【Vue.js】タブ切り替えを実装してみよう!

ライフマップ開発チームの石上です。
私の直近の開発記事ではVue.jsの基礎的な内容が続きましたが、そろそろ実践的な内容に移りましょう。
前回はVue.jsの中でも重要項目である「ディレクティブ」について勉強しました。今回はその知識を用いて、Webサイトでよく見かける仕組みであるタブ切り替えを実装してみたいと思います。

サンプルコード

先にHTMLとVue(Javascript)のサンプルのコードを貼っつけてしまいます。手っ取り早く動作を確認したい方は以下からご確認ください。（スタイリングは省略していますので、これをベースとして好きなようにアレンジして頂ければと思います。）

コードの下に続けて解説を記していきます。

<div id="app">
  <div class="tab">

    <button v-on:click="changeTab(1)">TAB A</button>
    <button v-on:click="changeTab(2)">TAB B</button>
    <button v-on:click="changeTab(3)">TAB C</button>

    <div v-show="isCurrent === 1">
      SECTION A
    </div>
    <div v-show="isCurrent === 2">
      SECTION B
    </div>
    <div v-show="isCurrent === 3">
      SECTION C
    </div>

  </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      isCurrent: 1
    }
  },
  methods: {
    changeTab(sectionNum) {
      this.isCurrent = sectionNum;
    }
  }
})
app.mount('#app')

コードの解説

Vue.jsによるタブ切り替え処理の全体像をざっくりまとめると、以下のようになります。

1. dataで表示セクションを管理するための数値（=isCurrent）を定義しておく

2. methodでisCurrentの値を変更するための処理（=changeTab）を定義しておく

3. v-onでイベントを発火させchangeTab()を呼び出す

4. v-showでisCurrentの値を条件式に組み込み、表示を制御する。

Vue(Javascript)

まずはdataオプションで、表示セクションを管理するための数値を用意しましょう。

data() {
  return {
    isCurrent: 1
  }
}

この数値の切り替わりが、セクションの切り替わりと連動することになります。
次に、このisCurrentの数値を変更するための処理を定義しましょう。

methods: {
  changeTab(sectionNum) {
    this.isCurrent = sectionNum;
  }
}

引数として渡される数値がsectionNumとして扱われ、「this.isCurrent = sectionNum」の式によりisCurrentの値として代入されます。
この流れにより、isCurrentの値が書き換えられる訳です。

これでVue側の準備はできました。あとはHTMLを記述するだけです。

HTML

まずは切り替えのためのボタンとセクションを用意しましょう。

<button>Tab A</button>
<button>Tab B</button>
<button>Tab C</button>

<div>
  Section A
</div>
<div>
  Section B
</div>
<div>
  Section C
</div>

当然のことながら、このままでは何の処理も起こせません。

そこで v-on の出番です！
buttonタグをクリックした時に切り替え処理を実行させるために、buttonタグにv-on:clickを追加し、changeTabメソッドを呼び出してあげましょう！

<button v-on:click="changeTab(1)">Tab A</button>
<button v-on:click="changeTab(2)">Tab B</button>
<button v-on:click="changeTab(3)">Tab C</button>

<div>
  Section A
</div>
<div>
  Section B
</div>
<div>
  Section C
</div>

changeTabメソッドの引数には、そのボタンと連動させるセクションの数値を書きます。例えば、「2つ目のdivを表示させるためのボタンにはchangeTab(2)と書く」という具合です。

さて、これによりbuttonタグを押すとchangeTabメソッドが実行され、isCurrentの値が引数の値に書き換えられるようになりました。

しかし、まだ肝心のdivの表示非表示と連動していません！

そこで出てくるのが v-show です！
v-showでisCurrentを組み込んだ条件式を設定し、セクションの表示非表示を制御します。

<div v-show="isCurrent === 1">
  Section A
</div>
<div v-show="isCurrent === 2">
  Section B
</div>
<div v-show="isCurrent === 3">
  Section C
</div>

v-showが付与されたことにより、例えば2つ目のdivは isCurrent === 2 が成り立つ時、つまり「changeTab(2)が実行されてisCurrentの値が2に書き換わった時」にだけ表示されるようになります。

処理の流れを振り返る

さて、改めて処理の流れを振り返ってみましょう。

<button v-on:click="changeTab(1)">TAB 1</button>
<button v-on:click="changeTab(2)">TAB 2</button>
<button v-on:click="changeTab(3)">TAB 3</button>

buttonタグをクリックすると、v-onディレクティブによってchangeTab()が呼び出されます。このchangeTabには引数を渡すことができ、引数の値でisCurrentの値を更新するという処理を行います。

methods: {
  changeTab(sectionNum) {
    this.isCurrent = sectionNum;
  }
}

ここまでで、isCurrentの値を更新することができました。次に、そのisCurrentの値をv-showの式に組み込み、各div要素に付与します。

<div v-show="isTab === 1">
  SECTION 1
</div>
<div v-show="isTab === 2">
  SECTION 2
</div>
<div v-show="isTab === 3">
  SECTION 3
</div>

該当する値を表示条件としているdivのみが表示される形になります。

以上のように、isCurrentの値更新と要素の表示制御を連動させてタブ切り替えを実装することができました！

（ここではシンプルで分かりやすいかなと思いv-showで実装してしまいましたが、サイトやコンテンツの特性、シチュエーションに応じて v-if / v-else-if  を利用しましょう）

終わりに

今回はVue.jsでタブ切り替えを実装しました。はじめの一歩としてはちょうど良い難易度の実装だったのではないかと思います。

次回以降も引き続きVueを用いた実装の解説記事を書いていきます。ではまた！