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

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

// 各タブに固有の id を持たせる
const tabs = [
  { id: 'overview', label: '概要', content: 'これは概要の内容です。' },
  { id: 'features', label: '機能', content: 'ここでは機能について説明します。' },
  { id: 'contact', label: 'お問い合わせ', content: 'お問い合わせはこちらから。' }
]

const current = ref('overview')

// 矢印キー・Home・End でタブを移動する
function onKeydown(event, index) {
  let next = null
  if (event.key === 'ArrowRight') next = (index + 1) % tabs.length
  else if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length
  else if (event.key === 'Home') next = 0
  else if (event.key === 'End') next = tabs.length - 1
  if (next === null) return

  event.preventDefault()
  current.value = tabs[next].id
  // v-for の ref は順序が保証されないので、id で要素を探してフォーカスを移す
  document.getElementById(`tab-${tabs[next].id}`)?.focus()
}
</script>

<template>
  <div class="tabs">
    <div role="tablist" aria-label="商品の情報">
      <button
        v-for="(tab, index) in tabs"
        :key="tab.id"
        :id="`tab-${tab.id}`"
        type="button"
        role="tab"
        :aria-selected="current === tab.id"
        :aria-controls="`panel-${tab.id}`"
        :tabindex="current === tab.id ? 0 : -1"
        :class="{ active: current === tab.id }"
        @click="current = tab.id"
        @keydown="onKeydown($event, index)"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- 全パネルを DOM に残し、現在のものだけを表示する -->
    <div
      v-for="tab in tabs"
      v-show="current === tab.id"
      :key="tab.id"
      :id="`panel-${tab.id}`"
      role="tabpanel"
      :aria-labelledby="`tab-${tab.id}`"
      class="tab-panel"
    >
      {{ tab.content }}
    </div>
  </div>
</template>

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

[role="tablist"] {
  display: flex;
  border-bottom: 2px solid #ddd;
}

/* button の既定の見た目を、タブとして整える */
[role="tab"] {
  padding: 10px 20px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
}

[role="tab"].active {
  font-weight: bold;
  border-color: #007acc;
}

[role="tab"]:focus-visible {
  outline: 2px solid #007acc;
  outline-offset: -2px;
}

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

<script setup>
import { ref, computed } from 'vue'
import TabOverview from './TabOverview.vue'
import TabContact from './TabContact.vue'

const tabs = [
  { id: 'overview', label: '概要', component: TabOverview },
  { id: 'contact', label: 'お問い合わせ', component: TabContact }
]

const current = ref('overview')
const currentComponent = computed(() => tabs.find(t => t.id === current.value).component)
</script>

<template>
  <!-- タブのボタンは、先ほどと同じ -->

  <div role="tabpanel" :id="`panel-${current}`" :aria-labelledby="`tab-${current}`">
    <!-- KeepAlive で包むと、切り替えても入力途中の状態が保たれる -->
    <KeepAlive>
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// URL の ?tab=features と同期する。不正な値のときは、先頭のタブにする
const current = computed({
  get: () => (tabs.some(t => t.id === route.query.tab) ? route.query.tab : tabs[0].id),
  set: (id) => router.replace({ query: { ...route.query, tab: id } })
})
</script>