Vueでも使えるReact製表計算ライブラリ GridSheetのv2をリリースしました
お久しぶりです。今回はv2のメジャーバージョンリリースをしたのでそのご報告です。
とりあえずデモをどうぞ
他のも見たいというかたはこちらから
GridSheet v2 の開発背景と新機能まとめ
GridSheet は、React を中心としたアプリケーションで使えるスプレッドシートコンポーネントです。
このたび v2 に大幅アップデートを行い、機能性・拡張性ともに大きく進化しました。
今回はその背景や主な変更点について紹介します。
🧭 React に軸足を置いた実装へ
v2 では、React を前提とした実装に振り切る方針を取りました。
これまでは Vue や Svelte など他のフレームワークへの対応も視野に入れていたため、再利用性を高めるように描画とロジックをなるべく分離することを意識していました。ただ、機能が増えるにつれてコードの複雑さが増し、描画の一貫性を保ちつつ複数フレームワークに対応するなんて現実的に無理があると思うようになりました。仮に作れたとしてもそれぞれのフレームワークに対して深い知見がなければ保守は困難でしょう。
今のうちに手を打っておかなければ後々更に大変になること、またGridSheetをもっと多くの人に使ってもらいたいという思いから、このタイミングで何らかの対応をしておこうと決意しました。
そこで設計を見直し共通コードベースを Preact でビルド、Vue などのラッパーから利用する形に再構成しました。幸いGridSheetはサードパーティライブラリへの依存はほとんどなく、preact/compat に差し替えても問題なく動作したので、これを @gridsheet/preact-core としてリリースしました。
現在、これをさらにラップし正式にパッケージとしてリリースしているのは @gridsheet/vue-core のみですが今後も同様の形で他フレームワークへの展開がしやすくなっています。やるかどうかはともあれ。
この構成は基本的にうまく機能しますが、描画カスタマイズには一定の制限があります。GridSheet では各セルに任意のコンポーネントを描画できますが、preact-core ではPreact 以外のフレームワークのコンポーネントを直接セルに描画することはできません。
たとえば、Vue ラッパー（vue-core）を使っていても、セルにカスタム描画をしたい場合は、Preact で書かれたコンポーネントを渡す必要があります。
これはある種の割り切りではありますが、設計の一貫性と拡張性を両立するための選択でもあります。
なお文字列操作だけの軽微なカスタマイズであればそのまま使えます。
🔁 Hub の導入で複数シートの連携がシンプルに
v1 では SheetProvider というコンポーネントを使って複数のシートを連携していましたが、v2 ではこれを廃止し、新たに Hub という仕組みを導入しました。
-
Hubは複数のTableをまとめて管理する中核的な存在で、- 履歴（Undo/Redo）
- イベントハンドラ
- 利用可能なレンダラーやパーサー
を シート間で共有できます。
- 離れた位置にあるシート同士でもスムーズに連携でき、v1 に比べてはるかに柔軟になりました。
- また、
Tableクラスが持っていた責務の一部をHubに移すことで、全体の設計もよりスッキリしています。
🛡️ Policy の導入でビジネス要件にも対応
v1 では、ユーザーの入力値を制御するためにパーサーを使うしかありませんでしたが、これは本来の使い方とは違い柔軟性にも限界がありました。
そこで v2 では Policy という新しい仕組みを導入しました。
- セルごとに バリデーション を設定できる
- 候補リストからの オートコンプリート に対応
- セキュリティ要件に応じて クリップボード操作の制限 も可能
といったように、入力確定前のタイミングで細かく制御できるようになり、ビジネス用途にも十分応えられるようになっています。
🖱️ Drag API の廃止と onMouse ベースへの移行
ドラッグ操作についても v2 で見直しを行いました。
従来はブラウザの drag API を使っていましたが、細かい挙動の調整がしにくく、スクロールや選択周りの制御に課題がありました。
そのため、v2 では drag API を廃止し、代わりに onMouse 系のイベントを使って独自に実装しました。
この変更によって、
- シート外にドラッグしたときに自動でスクロールする
- 秒数の経過によりスクロールを加速する
といったことが実現できるようになりました。
🛠️ その他の改良ポイント
- メソッド名の見直しや統合など、API 全体を整理してわかりやすくしました。
- バグ修正も多数対応し、安定性も大幅にアップ。
- E2E テストを約 3 倍に増強し、細かいユースケースでも壊れにくい設計になっています。
📚 ドキュメント & サンプル
今回のアップデートに合わせて、専用ドキュメントサイトも新設しました：
内容はほとんどAIに書いてもらいました。流石にすべてそのまま使えるというほどの精度ではありませんが、自分で書くよりは遥かに楽でした。もう自分で文章書かなくていい時代になったのかもしれません👼
特にデモは10ケースあり、男ってこういうのが好きなんでしょ？っていうのをAIは理解しているようです🤖
📝 おわりに
v2 では内部構造から UI の操作感まで、かなり大掛かりな刷新を行いました。とても大変だったのは覚えていますが細かいことはほとんど覚えていません(瀕死)
もし以前に GridSheet を試して「あと一歩だな」と感じた方がいれば、ぜひもう一度試してみてください。
何かしらビジネス的な相談だけでなく個人的に話がしたいとかあれば Reddit にDMください。過去に作って全く使っていなかったアカウントですが、これから活用していく所存です。(アカウントID変えたい)
もしオープンな雑談がしたい場合はこちらに投稿してもOK。
リポジトリはこちらから。ソースコードとドキュメントを一元管理するモノレポです。
Discussion