Extableの設計コンセプト
Extableは、Webアプリケーションのデータ管理をシンプルにするための、ExcelライクなHTMLテーブルコンポーネントです。スプレッドシートの挙動をゼロから実装するのではなく、開発者がすぐに使える絞り込んだ機能セットを提供します。
設計思想
1. Excelの親しみやすさ
Excelに慣れたユーザーは、データテーブルに対して次のような振る舞いを期待します。
- 直接セル編集 - セルをクリックしてインラインで値を編集
- フィルハンドル - セルをドラッグして値やパターンを複数行に自動入力
- コピー&ペースト - 標準的なコピー（Cmd/Ctrl+C）とペースト（Cmd/Ctrl+V）を完全サポート
- フィルターとソートの内蔵 - 列ヘッダーからフィルターメニュー（重複値、エラー、ソート）を開く
この親しみやすさは学習コストを大きく下げ、導入を促進します。
2. Canvasによるパフォーマンス
数百〜数千行のテーブルでは、DOMレンダリングがボトルネックになります。Extableは高速化のためにHTML5 Canvasで描画しつつ、次の理由でHTMLテーブルモードも維持します。
- テスト - HTMLテーブルセルにDOMセレクタでアクセスでき、E2Eテストが容易
- アクセシビリティ - セマンティックHTMLによる支援技術のサポート
- デバッグ - ブラウザ上で描画結果を直接検査可能
レンダリングモードは導入先の要件に合わせて切り替え可能です（高速化が必要ならCanvas、テスト中心ならHTML）。
3. 特定ユースケースの最適化
Extableは「すべての人にすべてを」ではなく、特定のデータ管理パターンに焦点を当てています。
- 閲覧専用モード - 読み取り専用データをフィルター/ソート付きで表示
- 直接編集モード - 入力用途の即時更新
- コミットモード - まとめて編集し、明示的なcommit/rollbackで安全に反映
複雑な状態管理やバリデーションを組み立てなくても、最小限の設定で使えるよう設計されています。
4. スキーマ駆動設計
設定はスキーマオブジェクトに集約され、次を宣言します。
- 列定義（key、型、readonly、フォーマット）
- バリデーションルール（一意制約、カスタム数式）
- 値に応じた条件付きスタイル
- 編集可能列から派生値を計算する数式列
このスキーマファーストの設計により、挙動が予測しやすく、理解が容易になります。
固定列スキーマ - スプレッドシートのように列を自由に追加・削除・並べ替えるのではなく、Extableは固定スキーマを採用します。これは意図的な選択です。業務アプリケーションではテーブルが入力フォームとして使われることが多く、列の任意変更はバックエンドの負荷を増やします。スキーマを固定することでフロントエンドとバックエンドの双方が一貫したデータ構造を前提にでき、バリデーション、保存、監査が簡潔になります。
5. マルチユーザー協調（将来）
まだ本番で十分に検証されていないものの、Extableは将来的な協調編集を見据えて設計されています。
- 同時編集を防ぐ行ロック
- 変更伝播のためのコマンドストリームアーキテクチャ
- インフラに合わせて差し替え可能な通信層（WebSocket、fetch+SSE、polling）
- 耐障害性のためのサーバー主導ロックタイムアウト
この基盤により、大規模なリファクタリングなしにリアルタイム協調へ段階的に拡張できます。
なぜExtableなのか
Webテーブルライブラリは多数ありますが、多くは次のいずれかに偏ります。
- 軽量表示 - 編集やフィルタリングなどのインタラクションが限定的
- 完全なスプレッドシート模倣 - バンドルが巨大でAPIが複雑
- 低レベル構成要素 - よくあるパターンでも大きな実装作業が必要
Extableはこのギャップを埋め、Excelに慣れたユーザーに自然な体験を提供しつつ、ハイパフォーマンスな描画と、よく使われるユースケース（直接編集、コミット型ワークフロー、協調編集）に特化した意見のある、すぐ使えるデータ管理を実現します。
主なトレードオフ
- 完全なスプレッドシートではない - マクロや行をまたぐ配列数式などの高度な機能は省略
- スキーマ中心 - UIではなくスキーマで設定するため、予測可能性とテスト容易性が高い
- 自動保存なし - 保存のタイミングは実装側が制御する
- 機能は必要に応じて有効化 - マルチユーザー、数式、条件付きスタイルは任意機能