TableOfContentsコンポーネントは、ページ内の見出しから自動的に目次を生成し、スクロールスパイ機能とスムーススクロールを提供するナビゲーションコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

自動生成: ページ内の見出しから自動的に目次を生成
スクロールスパイ: 現在表示中のセクションをハイライト
階層表示: 見出しレベルに応じたインデント表示
スムーススクロール: クリック時のスムーズなスクロール
カスタマイズ可能: 深度制限、セレクター、タイトルのカスタマイズ
テーマ対応: ライトテーマとダークテーマの自動切り替え
レスポンシブ: モバイルデバイスでの適切な表示

使用方法

---
import TableOfContents from '@components/TableOfContents.astro';
---

<TableOfContents
  title="目次"
  selector="h1, h2, h3, h4, h5, h6"
  autoGenerate={true}
  maxDepth={3}
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
`title`	`string`	`"目次"`	目次のタイトル
`selector`	`string`	`"h1, h2, h3, h4, h5, h6"`	目次に含める見出しのCSSセレクター
`autoGenerate`	`boolean`	`true`	自動生成を有効にするかどうか
`maxDepth`	`number`	`3`	目次に含める最大の見出し深度
`theme`	`"light" \| "dark"`	`"light"`	コンポーネントのテーマ

使用例

TableOfContents Component

Table of contents component for automatically generating navigation from page headings.

Basic Usage

Auto-generated TOC

Max Depth

Depth 2

Depth 3

Themes

Light Theme

Dark Theme

Usage Examples

Documentation TOC

Article TOC

カスタマイズ

深度制限

見出しの深度を制限して、目次に表示するレベルを調整できます：

<TableOfContents
  title="目次（H2まで）"
  maxDepth={2}
/>

カスタムセレクター

特定の見出しのみを対象にしたい場合：

<TableOfContents
  title="セクション一覧"
  selector="h2, h3"
/>

ダークテーマ

ダークテーマでの表示：

<TableOfContents
  title="目次"
  theme="dark"
/>

アクセシビリティ

キーボードナビゲーション: タブキーで目次のリンク間を移動可能
スクリーンリーダー対応: 適切なARIA属性とセマンティックHTML
フォーカス表示: キーボードフォーカスの視覚的表示
スムーススクロール: スクロール時のユーザー体験向上

実装の詳細

スクロールスパイ

Intersection Observer APIを使用して、現在表示中のセクションを検出し、対応する目次リンクをアクティブ状態にします。

パフォーマンス

見出しの検出は一度だけ実行
スクロールイベントの最適化
メモリリークの防止

ブラウザサポート

モダンブラウザ（ES2020+）
Intersection Observer API対応ブラウザ
CSS Grid対応ブラウザ

ベストプラクティス

適切な深度設定: コンテンツの構造に応じてmaxDepthを調整
一貫した見出し構造: 論理的な見出し階層を維持
テーマの統一: ページ全体のテーマと一致させる
レスポンシブ対応: モバイルでの表示を考慮した配置

トラブルシューティング

目次が表示されない場合

autoGenerateがtrueに設定されているか確認
selectorが正しい見出し要素を指定しているか確認
ページ内に対象の見出しが存在するか確認

スクロールスパイが動作しない場合

見出しに適切なIDが設定されているか確認
ブラウザがIntersection Observer APIをサポートしているか確認

スタイルが適用されない場合

デザイントークンが正しく読み込まれているか確認
テーマプロパティが正しく設定されているか確認

目次

機能