【Vue.js】タブ切り替えUIの作り方｜アクティブなタブを動的に切り替える実装例

Vue.jsを使えば、タブ切り替えインターフェースも簡単に実装できます。本記事では、v-forによるタブの自動生成や、アクティブ状態の管理、クリックによる表示切り替えまで、実用的なタブUIの作り方を解説します。

タブ切り替えUIとは？
Vue.jsでのタブ切り替えの実装例
ポイント解説
応用のヒント
まとめ

タブ切り替えUIとは？

タブUIとは、複数のコンテンツをタブごとに切り替えて表示するインターフェースのことです。Vue.jsでは、リアクティブな状態とv-forやv-ifなどのテンプレート構文を組み合わせることで、柔軟かつ効率的にタブUIを実装できます。

Vue.jsでのタブ切り替えの実装例

以下は、Vue 3のComposition APIを使ってタブ切り替えを実装した例です。タブの情報は配列で管理し、現在選択されているインデックスをrefでリアクティブに保持します。

<template>
  <div class="tab-container">
    <ul class="tab-menu">
      <li
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === index }"
        @click="currentTab = index"
      >
        {{ tab.label }}
      </li>
    </ul>

    <div class="tab-content">
      <p>{{ tabs[currentTab].content }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tabs = [
  { label: '概要', content: 'これは概要の内容です。' },
  { label: '機能', content: 'ここでは機能について説明します。' },
  { label: 'お問い合わせ', content: 'お問い合わせはこちらから。' }
];

const currentTab = ref(0);
</script>

<style scoped>
.tab-container {
  max-width: 600px;
  margin: 0 auto;
}

.tab-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #ddd;
}

.tab-menu li {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-menu li.active {
  border-color: #007acc;
  font-weight: bold;
}

.tab-content {
  padding: 1rem;
  background: #f9f9f9;
  border: 1px solid #ddd;
}
</style>