はじめに

これは、Jspreadsheet Advent Calendar 2024の1日目の記事となります。

筆者は、opengl-8080氏のHandsontable 使い方メモシリーズを開発する際に何度も参考にし、2018年にはHandsontable Advent Calendar 2018を主催するようになりました。

Jspreadsheet は日本語の記事が少ないです、開発する際に参考となるようにしていきたいです。とほほさんに負けないようにね。

Jspreadsheetとは

WEBで Excel のようなスプレッドシートライクな入力を可能にしてくれる JavaScript ライブラリです。
Jspreadsheet の開発しているのはイギリスにある会社となります。2019年に jExcel から Jspreadsheet に名称を変更しました。同様ライブラリーには、Handsontable があります。画面等が似ているのは初期ごろの Handsontable をフォークしたためです。

販売形態としては下記3つの構成になっています。

無償版(MITライセンス)の Jspreadsheet CE
有償版の Jspreadsheet Pro
クラウド版の Jspreadsheet Cloud

次項目以降は、無償版(MITライセンス)の Jspreadsheet CE のみの説明になります。

Jspreadsheet CE Version 5

2024/12/19にJspreadsheet CE Version 5 beta 3がリリースされました。
2025年中には、beta が取れて正式リリースとなることでしょう。

Version 5 は主に2つが大きく変更されています。

複数シートの操作の可能
Pluginとカスタムエディターのサポート

導入

幾つかの方法があります。

CDN

【2025/03/01追記】
2025/02/22からバージョンを指定しない場合、ver 5になりました。
ver 4を使用する場合、jspreadsheet-ce@4を指定します。

v4

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce@4/dist/jspreadsheet.min.css"" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce@4/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>

v5

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>

補足

Jsuites は、Jspreadsheet の作者が作成している JavaScript Plugins となります。
MITライセンスとなっています。

NPM

【2025/03/01追記】
2025/02/22からバージョンを指定しない場合、ver 5になりました。

v4

npm install jspreadsheet-ce@4
npm install jsuites

v5

npm install jspreadsheet-ce
npm install jsuites

ダウンロード

v4

https://github.com/jspreadsheet/v4/releases
https://github.com/jsuites/jsuites

v5

保留

使い方

これから記事を書いてリンクしていきます。

Tips

アプリのパフォーマンス改善でライブラリの実装の理解が役立った話

プラグイン

Jspreadsheetの機能を拡張するプラグインがあります。
今のところ Pro版のみですが、CE Version 5 からプラグインがサポートされるため参考になりそうです。

改善点

Version 5 でも修正されていなかったため、issue に登録しました。
これで修正されるといいのですが・・・

作者からの回答があり、残念ながらCE版の制限となりました。

サンプル

CSVファイルの読み込みや、数式対応およびツールバーなど実装しています。

最後に

少しずつでも記事を増やしていく予定です。