Extable

日本語

English

日本語

English

Appearance

Excelとの違い ​

Extableが存在する理由 ​

Excelが広く使われているのは、単なるスプレッドシートだからではなく、データ編集と情報交換の事実上の標準ツールになっているからです。Excelは計算用途だけでなく、次のように使われています。

  • データ入力と検証のツール
  • 構造化データのエディタ
  • 情報収集と提出のインターフェース
  • 一括インポート/エクスポートの仕組み

Extableは、スプレッドシート計算機能を必要とせずに、このデータ編集・情報取扱い体験をWebに持ち込むために存在します。

Extableが提供するExcelライク機能 ​

Extableは、Excelを使い慣れた人にとって自然な操作性を提供します。

  • 直接セル編集: セルをクリックして値を入力/変更
  • 一括操作: 複数セルのコピー＆ペースト（テキストだけでなく配列データ）
  • 複数列ソート/フィルター: 必要なデータに素早くフォーカス
  • 条件付き書式: 値や条件に応じた視覚的フィードバック
  • 簡易数式: 任意のユーザー定義ではなく、スキーマ定義による計算列
  • 列固定: 横スクロール中も重要な列を表示

これらを組み合わせることで、構造化データを直感的に扱えるUIを実現します。

Extableの違い ​

一方で、Extableはスプレッドシートアプリではありません。次の点で意図的にトレードオフを取っています。

固定列スキーマ ​

Excelは任意の構造や数式を自由に定義できますが、Extableは固定列スキーマを採用します。

typescript
const schema = [
  { name: 'id', type: 'string', label: 'ID', readonly: true },
  { name: 'productName', type: 'string', label: 'Product' },
  { name: 'quantity', type: 'number', label: 'Qty', nullable: false },
  { name: 'unitPrice', type: 'number', label: 'Unit Price' },
  { name: 'total', type: 'number', label: 'Total', 
    formula: ({ quantity, unitPrice }) => quantity * unitPrice }
];

アプリケーション開発者が列、型、バリデーション、計算列をJavaScriptで定義します。数式は=でユーザーが入力するものではなく、スキーマ定義時にコードとして書きます。これにより次が成立します。

  • 開発者定義の関数は自由: 任意のJavaScriptロジックを数式にできる
  • ユーザーは数式を定義できない: エンドユーザーは用意された列を利用するだけ
  • データ整合性: 有効な構造と型のみ受け入れる
  • 予測可能: 予期しない数式エラーや循環参照が起きない
  • シンプルなAPI: データ形状と検証を開発者が明確に制御
  • 協調が容易: スキーマ変更はバージョン管理され、ユーザー変更に隠れない

縦方向のみのフィルタリング/ソート ​

Excelはあらゆる方向で操作できますが、Extableは縦方向のみに制限します。

  • 列の値に基づいて行をフィルター
  • 1列または複数列で行をソート
  • 横方向の転置やピボットは不可

これはWebで最も一般的なユースケース（レコード一覧の閲覧・抽出）に合わせた設計です。マルチユーザー環境での状態管理と性能も簡潔になります。

Data / Schema / Viewの分離 ​

Excelではファイルがモノリシックで、データ、数式、表示設定が密結合です。Extableではこれらを分離します。

  • Data: 実データ（配列またはオブジェクトの配列）
  • Schema: 列定義（名前、型、検証、readonly、数式、スタイル）
  • View: ユーザー単位の状態（表示列、ソート順、フィルター、選択セル）
typescript
// 開発者がデータライフサイクルを管理
const [data, setData] = useState(initialData);

// スキーマは一度定義しアプリと共にバージョン管理
const schema = [...];

// View状態はユーザーセッションごと
const [view, setView] = useState({ columnOrder: [...], filters: {} });

この分離はマルチユーザーで特に重要です。

  • ユーザーごとに表示列やフィルターを変えてもデータ自体は共有される
  • スキーマ更新が全セッションに一貫して反映される
  • ユーザー固有のビュー状態がデータ整合性に影響しない

編集モードとコミットパターン ​

Excelは入力と同時に保存しますが、Extableは段階的な編集とコミットをサポートします。

typescript
// ユーザーが複数セルを編集
table.editCell(rowIndex, colName, newValue);  // UI状態を更新
table.editCell(rowIndex, colName2, newValue2);

// 準備ができたら変更を一括commit
table.commit().then(() => {
  // サーバー送信やDB更新など
});

これにより次が可能です。

  • 一括操作: 関連する変更をまとめて送信
  • バリデーション: コミット前にまとめて検証し、必要ならロールバック
  • 行ロック: マルチユーザー時はコミット時にロック取得し、確定後に解除
  • セッション内のundo/redo: コミット前に編集を戻せる
  • データ管理のワークフロー: 「複数件編集→確認→保存」という管理画面の定番フロー

Extableの適用領域 ​

Extableが適するケース:

  • ✅ 構造化データ入力: 列と型が固定されたフォーム的テーブル
  • ✅ データインポート/エクスポート: 一括アップロード/ダウンロード
  • ✅ 管理画面・ダッシュボード: アプリケーションデータのCRUD
  • ✅ 協調編集: 複数ユーザーが同じデータセットを閲覧・編集
  • ✅ 検索/フィルター/ソート: レコードの探索と整理

Extableが不向きなケース:

  • ❌ 自由形式のスプレッドシート: 列や数式やピボットを自由に追加したい
  • ❌ 重い財務モデリング: 複雑な計算やシナリオ分析、マクロ
  • ❌ ピボットやクロスタブ: 次元を跨いだ再構成
  • ❌ ユーザー定義関数: 拡張可能な数式言語が必要

次のステップ ​

Apache 2.0 Licenseで公開

Copyright 2026 Yoshiki Shibukawa