TL;DR

ユーザーフレンドリーなインターフェースを持つウェブサイトには、タブ切り替えコンポーネントが欠かせません。この記事では、Next.js と TypeScript を使用して独自のタブ切り替えコンポーネントを作成する方法について解説します。

タブ切り替えコンポーネントの実装

まず、具体的なコードを見てみましょう。

// components/Tabs.tsx

import { useState } from 'react'
import { css } from '@emotion/react'

type TabProps = {
  tabs: string[]
}

const Tabs = ({ tabs }: TabProps) => {
  const [activeTab, setActiveTab] = useState(tabs[0])

  return (
    <div>
      {tabs.map((tab) => (
        <button
          key={tab}
          onClick={() => setActiveTab(tab)}
          css={css`
            background-color: ${tab === activeTab ? 'blue' : 'white'};
            color: ${tab === activeTab ? 'white' : 'black'};
          `}
        >
          {tab}
        </button>
      ))}
      <div>{activeTab} content</div>
    </div>
  )
}

export default Tabs

このコードは、タブのリストを受け取り、各タブをクリックするとアクティブなタブが変更され、その内容が表示されるコンポーネントを定義します。

呼び出し

タブ切り替えコンポーネントを任意のページから利用するためには、以下のようにコンポーネントをインポートし、タブのリストを tabs プロパティとして渡します。

// pages/index.tsx

import Tabs from '../components/Tabs'

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Tabs tabs={['Tab1', 'Tab2', 'Tab3']} />
    </div>
  )
}

export default HomePage

このように Tabs コンポーネントをページに配置し、tabs プロパティにタブの名前を配列で渡すだけで、タブ切り替え機能が手に入ります。かなりスッキリと実装できるのが、コンポーネントベースの設計の良いところですよね。

コード解説

それでは、上記のコードを詳しく見ていきましょう。

まず、useState フックを使用して activeTab の状態を管理します。初期値は tabs 配列の最初の要素とします。

次に、 tabs 配列をマップして、各タブに対応するボタンを作成します。ボタンがクリックされると setActiveTab が呼び出され、 activeTab の値がそのタブに設定されます。

そして、Emotion を用いてボタンの背景色と文字色を設定します。アクティブなタブは背景色が青で文字色が白になり、非アクティブなタブは背景色が白で文字色が黒になります。

最後に、アクティブなタブの内容を表示します。ここではシンプルにタブの名前と "content" を表示していますが、実際のアプリケーションでは、ここにタブに関連するコンポーネントやデータを表示することになります。

タブ切り替えコンポーネントを学ぶ

さらに深く学びたい方のために、ドキュメントを紹介します。

以上、Next.js と TypeScript を使用してタブ切り替えコンポーネントを作成する方法について解説しました。これを使って UI を一段と良くしてみてくださいね。