はじめに

これは、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 のみの説明になります。

導入

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

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css" type="text/css" />
<link rel="stylesheet" href="hhttps://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

npm install jspreadsheet-ce
npm install jsuites

ダウンロード

https://github.com/jspreadsheet/ce#as-standalone-libraryjs-plugin
https://github.com/jsuites/jsuites

使い方

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

Jspreadsheet 使い方メモ１（基本）
Jspreadsheet 使い方メモ２-1（グリッドのオプション）
Jspreadsheet 使い方メモ２-2（グリッドのオプション）
Jspreadsheet 使い方メモ２-3（グリッドのオプション）
Jspreadsheet 使い方メモ２-4（グリッドのオプション）
Jspreadsheet 使い方メモ３-1（カラム・セルオプション）
Jspreadsheet 使い方メモ３-2（カラム・セルオプション）
Jspreadsheet 使い方メモ４-1（メソッド）
Jspreadsheet 使い方メモ４-2（メソッド）

改善点

サンプル

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

最後に

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