タブコンポーネント例

このページでは、ドキュメントでのTabsコンポーネントの使用方法を実演します。

基本的な使用法

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>こんにちは、世界！</h1>
  </body>
</html>

body {
  font-family: system-ui, sans-serif;
  color: #333;
  background-color: #f9f9f9;
}

h1 {
  color: navy;
}

document.addEventListener('DOMContentLoaded', function() {
  const heading = document.querySelector('h1');
  heading.addEventListener('click', function() {
    alert('タイトルがクリックされました！');
  });
});

パッケージマネージャーの例

異なるパッケージマネージャーの指示を整理するのに便利です：

# パッケージをインストール
npm install @our-package/core

# 開発依存関係として追加
npm install --save-dev @our-package/dev-tools

# スクリプトを実行
npm run dev

# パッケージをインストール
yarn add @our-package/core

# 開発依存関係として追加
yarn add --dev @our-package/dev-tools

# スクリプトを実行
yarn dev

# パッケージをインストール
pnpm add @our-package/core

# 開発依存関係として追加
pnpm add -D @our-package/dev-tools

# スクリプトを実行
pnpm dev

設定例

異なる環境やフレームワークの設定例：

// development.config.js
export default {
  debug: true,
  apiUrl: 'http://localhost:3000/api',
  database: {
    host: 'localhost',
    port: 5432,
    name: 'myapp_dev'
  },
  logging: {
    level: 'debug',
    console: true
  }
};

// production.config.js
export default {
  debug: false,
  apiUrl: 'https://api.myapp.com',
  database: {
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    name: process.env.DB_NAME
  },
  logging: {
    level: 'error',
    console: false,
    file: '/var/log/myapp.log'
  }
};

// test.config.js
export default {
  debug: true,
  apiUrl: 'http://localhost:3001/api',
  database: {
    host: 'localhost',
    port: 5433,
    name: 'myapp_test'
  },
  logging: {
    level: 'warn',
    console: true
  }
};

言語固有の例

プログラミング言語別の実装例：

// ユーザークラスの定義
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  greet() {
    return `こんにちは、${this.name}さん！`;
  }
  
  getProfile() {
    return {
      name: this.name,
      email: this.email
    };
  }
}

// 使用例
const user = new User('田中太郎', '[email protected]');
console.log(user.greet());

# ユーザークラスの定義
class User:
    def __init__(self, name, email):
        self.name = name
        self.email = email
    
    def greet(self):
        return f"こんにちは、{self.name}さん！"
    
    def get_profile(self):
        return {
            'name': self.name,
            'email': self.email
        }

# 使用例
user = User('田中太郎', '[email protected]')
print(user.greet())

// ユーザーインターフェースの定義
interface IUser {
  name: string;
  email: string;
  greet(): string;
  getProfile(): UserProfile;
}

interface UserProfile {
  name: string;
  email: string;
}

// ユーザークラスの実装
class User implements IUser {
  constructor(
    public name: string, 
    public email: string
  ) {}
  
  greet(): string {
    return `こんにちは、${this.name}さん！`;
  }
  
  getProfile(): UserProfile {
    return {
      name: this.name,
      email: this.email
    };
  }
}

// 使用例
const user = new User('田中太郎', '[email protected]');
console.log(user.greet());

プラットフォーム別手順

異なるオペレーティングシステムでの手順：

# Node.jsのインストール確認
node --version
npm --version

# プロジェクトのセットアップ
mkdir my-project
cd my-project
npm init -y

# 依存関係のインストール
npm install express

# アプリケーションの起動
npm start

# Homebrewを使用してNode.jsをインストール
brew install node

# バージョン確認
node --version
npm --version

# プロジェクトのセットアップ
mkdir my-project
cd my-project
npm init -y

# 依存関係のインストール
npm install express

# アプリケーションの起動
npm start

# Node.jsのインストール（Ubuntu/Debian）
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# バージョン確認
node --version
npm --version

# プロジェクトのセットアップ
mkdir my-project
cd my-project
npm init -y

# 依存関係のインストール
npm install express

# アプリケーションの起動
npm start

APIレスポンス例

異なるデータ形式での応答例：

{
  "status": "success",
  "data": {
    "id": 1,
    "name": "田中太郎",
    "email": "[email protected]",
    "profile": {
      "age": 30,
      "department": "開発部",
      "position": "エンジニア"
    },
    "preferences": {
      "language": "ja",
      "theme": "dark",
      "notifications": true
    }
  },
  "meta": {
    "timestamp": "2025-01-27T16:00:00Z",
    "version": "1.0"
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<response>
  <status>success</status>
  <data>
    <id>1</id>
    <name>田中太郎</name>
    <email>[email protected]</email>
    <profile>
      <age>30</age>
      <department>開発部</department>
      <position>エンジニア</position>
    </profile>
    <preferences>
      <language>ja</language>
      <theme>dark</theme>
      <notifications>true</notifications>
    </preferences>
  </data>
  <meta>
    <timestamp>2025-01-27T16:00:00Z</timestamp>
    <version>1.0</version>
  </meta>
</response>

status: success
data:
  id: 1
  name: 田中太郎
  email: [email protected]
  profile:
    age: 30
    department: 開発部
    position: エンジニア
  preferences:
    language: ja
    theme: dark
    notifications: true
meta:
  timestamp: "2025-01-27T16:00:00Z"
  version: "1.0"

技術仕様

プロパティ

Tabsコンポーネント

プロパティ	型	デフォルト	説明
`children`	ReactNode	-	TabItemコンポーネント（必須）
`defaultValue`	string	最初のタブ	デフォルトで選択されるタブ
`className`	string	-	追加のCSSクラス

TabItemコンポーネント

プロパティ	型	デフォルト	説明
`label`	string	-	タブのラベル（必須）
`value`	string	label	タブの識別子
`children`	ReactNode	-	タブの内容

MDXでの使用

MDXファイルでタブを使用する方法：

---
title: "私のドキュメント"
---

import { Tabs, TabItem } from '@docs/ui';

# コードサンプル

<Tabs>
  <TabItem label="JavaScript">
    {/* JavaScript コード例 */}
    console.log('Hello, World!');
  </TabItem>
  <TabItem label="Python">
    {/* Python コード例 */}
    print('Hello, World!')
  </TabItem>
</Tabs>

ベストプラクティス

タブの整理

論理的グループ化: 関連するコンテンツをまとめる
一貫したラベル: 分かりやすく一貫したタブラベルを使用
適切な数: タブが多すぎると使いにくくなるため、5-7個以下を推奨

アクセシビリティ

キーボードナビゲーション: 矢印キーとTabキーでの操作をサポート
スクリーンリーダー: 適切なARIAラベルとロール
フォーカス管理: 視覚的に明確なフォーカス表示

パフォーマンス

遅延読み込み: 大きなコンテンツは必要時のみ読み込み
コンテンツサイズ: 各タブの内容は適度なサイズに保つ

次のステップ

タブコンポーネントをマスターしたら：

サイドバー生成: 自動ナビゲーションシステム
カスタマイズ: コンポーネントの高度なカスタマイズ
アニメーション: インタラクションの強化