building-tables

テーブルとデータグリッドの構築

目的

このスキルを使うと、シンプルな HTML テーブルから、数百万行を扱うエンタープライズ規模の仮想化グリッドまで、体系的に作成できます。データ量と必要な機能に基づく明確な判断基準を示し、すべての実装で最適なパフォーマンス、アクセシビリティ、レスポンシブデザインを実現します。

使用するタイミング

以下の場合に、このスキルを使用します。

• テーブル、データグリッド、スプレッドシートのようなインターフェースを作成する
• 表形式または構造化データを表示する
• 並べ替え、フィルタリング、ページネーション機能を実装する
• 大規模なデータセットを扱う、またはパフォーマンス上の問題に対処する
• インライン編集やデータ入力インターフェースを構築する
• 行の選択や一括操作が必要である
• データのエクスポート（CSV、Excel、PDF）を実装する
• テーブルのアクセシビリティやレスポンシブな動作を確保する

クイック判断フレームワーク

データ量に基づいて、実装の段階を選択します。

<100 rows        → Simple HTML table with progressive enhancement
100-1,000 rows   → Client-side features (sort, filter, paginate)
1,000-10,000     → Server-side operations with API pagination
10,000-100,000   → Virtual scrolling with windowing
>100,000 rows    → Enterprise grid with streaming and workers

詳細な選択基準については、references/selection-framework.md を参照してください。

基本的な実装パターン

ティア 1：基本的なテーブル（100 行未満）

シンプルな読み取り専用のデータ表示の場合：

• セマンティックな HTML の <table> 構造を使用します
• CSS でレスポンシブな動作を追加します
• 必要に応じてクライアントサイドの並べ替えを実装します
• パターンについては references/basic-tables.md を参照してください

例：examples/simple-responsive-table.tsx

ティア 2：インタラクティブなテーブル（100～10K 行）

豊富な操作機能を実装する場合：

• フィルタリング、ページネーション、選択機能を追加します
• インライン編集またはモーダル編集を実装します
• 1K 行まではクライアントサイドの操作を使用します
• 1K 行を超えたらサーバーサイドに切り替えます
• references/interactive-tables.md を参照してください

例：examples/sortable-filtered-table.tsx

ティア 3：高度なグリッド（10K 行以上）

大規模なデータセットの場合：

• 仮想スクロールを実装します
• サーバーサイドの集計を使用します
• グループ化と階層構造を追加します
• エンタープライズ向けのソリューションを検討します
• references/advanced-grids.md を参照してください

例：examples/virtual-scrolling-grid.tsx

パフォーマンスの最適化

重要なパフォーマンスのしきい値：

• クライアントサイドの操作：1,000 行未満（即時、50ms 未満）
• サーバーサイドの操作：1,000～10,000 行（API 応答 200ms 未満）
• 仮想スクロール：10,000 行以上（60fps、メモリ使用量一定）
• ストリーミング：100,000 行以上（段階的なレンダリング）

パフォーマンスをベンチマークするには：

# Generate test data
python scripts/generate_mock_data.py --rows 10000

# Analyze rendering performance
node scripts/analyze_performance.js

最適化の戦略については、references/performance-optimization.md を参照してください。

機能の実装

並べ替え

• 単一列または複数列での並べ替え
• カスタムの並べ替えロジック（数値、日付、自然順）
• 視覚的なインジケーターとキーボード操作への対応
• references/sorting-filtering.md を参照してください

フィルタリングと検索

• 列ごとのフィルター（テキスト、範囲、選択）
• すべての列を対象としたグローバル検索
• 高度なフィルターロジック（AND/OR）
• references/sorting-filtering.md を参照してください

ページネーション

• 小規模なデータセットにはクライアントサイドを使用します
• 大規模なデータセットにはサーバーサイドを使用します
• 代替手段として無限スクロールを使用します
• references/pagination-strategies.md を参照してください

選択と一括操作

• 単一行または複数行の選択
• 範囲選択（Shift+クリック）
• 一括操作ツールバー
• references/selection-patterns.md を参照してください

インライン編集

• セル単位または行単位の編集
• 検証とエラー処理
• 楽観的更新
• references/editing-patterns.md を参照してください

エクスポート

• CSV、Excel、PDF 形式
• 書式とエンコーディングを保持します
• 大規模なエクスポートをストリーミングします
• scripts/export_table_data.py を実行します

アクセシビリティ要件

WCAG 準拠に不可欠な項目：

• 適切な構造を備えたセマンティック HTML
• インタラクティブなテーブル向けの ARIA グリッドパターン
• 完全なキーボード操作
• スクリーンリーダーによる通知

アクセシビリティを検証するには：

node scripts/validate_accessibility.js

要件の詳細については、references/accessibility-patterns.md を参照してください。

レスポンシブデザイン

実績のある4つの戦略：

1. 横スクロール - シンプルで、構造を維持できます
2. カードの積み重ね - モバイルで行をカードに変換します
3. 優先度に応じた列の表示 - 重要度の低い列を非表示にします
4. 省略と展開 - コンパクトに表示し、必要に応じて詳細を表示します

実装については、examples/responsive-patterns.tsxを参照してください。 詳細はreferences/responsive-strategies.mdを参照してください。

ライブラリの推奨事項

第一候補：TanStack Table（ヘッドレス）

カスタムデザインと完全な制御を求める場合に最適です：

• TypeScriptを第一に考えた設計で、DXに優れています
• バンドルサイズが小さい（約15KB）
• フレームワークに依存しません
• 仮想スクロールに対応しています

npm install @tanstack/react-table

セットアップについては、examples/tanstack-basic.tsxを参照してください。

エンタープライズ向け：AG Grid

機能が充実したソリューションを求める場合に最適です：

• 数百万行を処理できます
• 高度な機能を標準搭載しています
• コミュニティ版（無料）とエンタープライズ版（有料）があります
• Excelのようなユーザーエクスペリエンスを提供します

npm install ag-grid-react

セットアップについては、examples/ag-grid-enterprise.tsxを参照してください。

詳細な比較については、references/library-comparison.mdを参照してください。

デザイントークンとの統合

テーブルでは、テーマを一貫させるためにデザイントークンスキルを使用します：

• 背景、境界線、状態に使用するカラートークン
• セルのパディングに使用するスペーシングトークン
• テキストのスタイルに使用するタイポグラフィトークン
• エレベーションに使用するシャドウトークン

ライト、ダーク、ハイコントラスト、カスタムの各テーマに対応しています。 テーマの切り替えについては、デザイントークンスキルを参照してください。

実装例

要件に合った例から始めましょう：

simple-responsive-table.tsx    # Basic HTML table
sortable-filtered-table.tsx    # With sorting and filtering
paginated-server-table.tsx      # Server-side pagination
virtual-scrolling-grid.tsx      # High-performance for 100K+ rows
editable-data-grid.tsx         # Inline editing with validation
grouped-aggregated-table.tsx   # Hierarchical with aggregations

テストツール

テストデータを生成します：

python scripts/generate_mock_data.py --rows 100000 --columns 20

パフォーマンスをベンチマークします：

node scripts/analyze_performance.js --rows 10000

アクセシビリティを検証します：

node scripts/validate_accessibility.js

次のステップ

1. データ量と機能要件を確認します
2. 適切な実装ティアを選択します
3. TanStack Table（柔軟性）とAG Grid（機能）のどちらかを選択します
4. 要件に合ったサンプルファイルから始めます
5. コア機能を段階的に実装します
6. パフォーマンスとアクセシビリティをテストします
7. モバイル向けのレスポンシブ戦略を適用します