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

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

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

タブ切り替え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>

ポイント解説

tabs配列にタブのラベルと内容を定義し、v-forでリストを生成しています。現在選択中のタブはcurrentTabで管理されており、クリックイベントでインデックスが更新されます。:classでアクティブタブにスタイルを適用している点も重要です。

応用のヒント

  • タブの中身を別コンポーネント化して柔軟に表示
  • タブ切り替え時に<transition>でアニメーションを追加
  • タブ状態をURLクエリやルーティングと連動させる

まとめ

Vue.jsのリアクティブな仕組みを活かせば、状態管理とテンプレート制御だけでタブUIを直感的に構築できます。構造がシンプルなため、規模の小さいUIから拡張性のある大規模なUI設計にも対応できます。ぜひ実プロジェクトでも活用してみてください。