gridsheet v1をリリースしました
ようやく一旦区切りついてv1リリースしたので報告します。
去年出したかったんですが普通に無理でしたね。
いつものExampleを更新しておきました。
codesandboxの埋め込みだとドラッグ操作ができないので興味のある方はリンク先に飛んでください(早く直してほしい)。
他のExampleはこちら
前回以降の目玉機能としては「セルの保護」と「数式による別シート参照」です。その他に「数式バーの表示」、「E2Eテスト導入」、「Linter導入」「GitHubの各種テンプレート導入」を行いました。
セルの保護
個人的に一番欲しかった機能です。特定の列だけ表示専用にしたいなどの要望を実現するためのものです。
個別のセルに対して preventionフィールドを指定することでセルの変更、(あるいは行、列単位で)追加、削除をできなくします。書き込みだけを防止することもできますし、スタイルの適用だけ、あるいはすべてを防止することもできます。
制限可能な操作はビット単位で定義されておりビット演算により組み合わせて表現できます。
JSでは安全に扱える数値に上限があるため、定義できる操作は53個に限られますが、現在12個しか使っていないので操作が多少増えても多分足りるでしょう。
数式による別シートの参照
Sheet!A1 のように別シートを参照するあれです。
<SheetProvider> によって囲った <GridSheet> コンポーネントに sheetName prop を渡すことで、数式を介して参照できます。 SheetProvider はスタイルを適用しないためシートの並び順、シート名の表示などは開発者が実装する必要があります。Exampleをみてもらうのが早いです。
シート名が変わっても数式はそれを追跡できます。
ただ、ライブラリではシート名の一意性は保証しないため重複しないように注意してください。
単一のシートの場合は、従来通り <GridSheet> コンポーネント単体でも動作します。
今回一番実装が大変だったのはこれです。
数式バーの表示
表の上に見えてる入力欄です。数式を生のテキストとして表示します。開発するうえでも有用なので早くやっておけばよかった。
showFormulaBar: false で非表示にもできます。
E2Eテスト導入
Playwrightを導入し、Storybookに用意したケースが期待通り動作することを確認しています。
まだケース数は足りていないので順次追加していきます。
Github Actions ではビルドしたStorybookをローカルでserveしてテストしています。
最初Nginxでやろうとしたんですがrootディレクトリの設定がうまくいかなかったのでpythonの http.server でやりました。まぁできればなんでもいいです。
Linter導入
eslint(とprettier)を導入しました。いままで無法地帯だったので700個くらいエラーが出て潰すのが大変でした。大半が無視ですが不具合も見つかったのでやっぱりLintは大事だなとしみじみ感じました。
GitHubの各種テンプレート導入
v1.0.0 がリリースされ、利用者が増えてくれることを祈って ISSUEテンプレート と PRテンプレートを導入しました。ISSUEテンプレートはこれをパクったのと、ChatGPT先生に作ってもらいました(正しい使い方)。
おわりに
gridsheetは気軽に導入でき、直感的な操作を実現することを目標にしています。
しかしExcelのようにツールバー(リボン)をつけたり、シート一覧を表示することは今のところ考えていません。このライブラリの位置づけはあくまで core であり、外側のUIはアプリ開発者が考えればよいことです。見た目があまり変わっていないのはそういった思想によるものです。
もし利用者が増えて要望がきたら別途プラグインとして提供していくかもしれません。
品質は当初よりだいぶ向上し、様々な要件を満たすようになってきたと思いますが、不足している機能も多くあります。とくに「マウス操作による数式の挿入」「セル結合」「条件付き書式」「行フィルタ」などは表計算として必要だと考えているので、また時間があるときに対応していきます。
気軽に試してコメントしてくださいね。
Discussion