【Jspreadsheet】導入と設定

# はじめに
これは、[Jspreadsheet Advent Calendar 2024](https://qiita.com/advent-calendar/2024/jspreadsheet)の1日目の記事となります。

筆者は、opengl-8080氏の[Handsontable 使い方メモ](https://qiita.com/opengl-8080/items/ac19deec388c357cd498) シリーズを開発する際に何度も参考にし、2018年には[Handsontable Advent Calendar 2018](https://qiita.com/advent-calendar/2018/handsontable)を主催するようになりました。

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

https://www.tohoho-web.com/ex/jspreadsheet.html

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

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

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

https://qiita.com/d_mizuno/items/0c62b1f41d7200f56dfe

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

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

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

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

https://bossanova.uk/jspreadsheet/docs/upgrade-from-v4-to-v5

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

https://www.npmjs.com/package/jspreadsheet-ce

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

### v4

```html
<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

```html
<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ライセンスとなっています。

https://github.com/jsuites/jsuites

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

### v4
```bat
npm install jspreadsheet-ce@4
npm install jsuites
```

### v5
```bat
npm install jspreadsheet-ce
npm install jsuites
```

## ダウンロード
### v4
https://github.com/jspreadsheet/v4/releases
https://github.com/jsuites/jsuites

### v5
保留

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

* [Jspreadsheet 使い方メモ１（基本）](https://qiita.com/yaju/items/cc3aa56990978a9c2374)
* [Jspreadsheet 使い方メモ２-1（グリッドのオプション）](https://qiita.com/yaju/items/2a348462b95a26e118f4)
* [Jspreadsheet 使い方メモ２-2（グリッドのオプション）](https://qiita.com/yaju/items/f3b781316b0552cbd5fb)
* [Jspreadsheet 使い方メモ２-3（グリッドのオプション）](https://qiita.com/yaju/items/692d3d2a77cab89e293b)
* Jspreadsheet 使い方メモ２-4（グリッドのオプション）
* [Jspreadsheet 使い方メモ３（カラム・セルオプション）](https://qiita.com/yaju/items/0939873d6ffee8c62ec0)
* [Jspreadsheet 使い方メモ４-1（メソッド）](https://qiita.com/yaju/items/98d4b0f492f8c042e6e6)
* [Jspreadsheet 使い方メモ４-2（メソッド）](https://qiita.com/yaju/items/657a3a10ffe4c2de1da7)
* [Jspreadsheet 使い方メモ４-3（メソッド）](https://qiita.com/yaju/items/7a55e2e92a4155754c62)

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

https://github.com/GBonnaire/jspreadsheet-plugins-and-editors

# 改善点
https://qiita.com/tm777/items/1ce39b3dffe67d5bc497

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

https://github.com/jspreadsheet/ce/issues/1724

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

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

https://qiita.com/yaju/items/66678f9abb530f169a80

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