対象読者
- Excel VBAで作成したマクロをWebアプリに移行したい方
- JavaScriptを使ってExcelライクな操作を実現したい方
- SpreadJSを使って業務アプリケーションのUIを改善したい方
SpreadJSとは
SpreadJSは、JavaScriptだけで動作する高機能なスプレッドシートコンポーネントライブラリです。Webブラウザ上でExcelに近い操作感と豊富な表計算機能を実現し、単なるテーブル表示を超えたインタラクティブなユーザー体験を提供します。
まさに「ExcelをそのままWebに持ち込める」ようなライブラリです。SpreadJSの主な特長は以下の通りです。
- Excel互換のUI/UX
- 豊富な関数とセルスタイル
- 大規模データでも高速レンダリング
- 豊富な拡張性とAPI
Excel互換をうたうばかりではなく、「多段ヘッダ」や「ツリー表示」「ガントチャート」など、Excelより高機能な部分もあり、かゆいところに手が届く仕様になっています。
今回紹介するExcel VBA資産のWebアプリ移行だけでなく、BIツールに組み込んだり、既存の帳票を活かした業務アプリケーションを構築したりと、さまざまなシーンで利用できます。また、SpreadJSの機能の基本的な使い方については、公式サイトで利用ガイドが公開されているのでそちらもご覧ください。
前提条件
今回は以下の環境を想定します。SpreadJSの機能だけでなにができるかをわかりやすくするため、フレームワークは使用しませんが、Angular、React、Vue.jsなどとの組み合わせでも利用可能です。
- 使用言語: JavaScript（Pure JS）
- SpreadJSのバージョン: 18.0.6
- 開発環境: Visual Studio Code（以下、「VS Code」）
移行するExcelの紹介と移行の流れ
本記事で移行対象とするExcelファイルは、店舗ごとの売上データを集計シートにまとめるマクロを搭載したサンプルファイルです。
サンプルファイルは以下のようなシートから構成されています。
-
祝日: 集計時に売上対象外とする日付リスト（集計シートの条件付き書式で使用） -
集計: 各店舗のデータを読み込み、全店舗の売り上げ合計や平均を計算するシート -
A店舗／B店舗／C店舗: 各店舗の日次売上データを表形式で記録するシート
なお、SpreadJSはマクロつきExcelファイル（demo.xlsm）に非対応のため、以下ではボタンを削除し、Excelファイル（.xlsx）として保存し直したファイル（demo.xlsx）を使用します。
では、サンプルプロジェクトの構成を確認した上で、SpreadJSの初期化とExcelファイルの読み込みから始めましょう。
サンプルプロジェクトの起動
以下3つのサンプルプロジェクトを用意しています。
-
samples/: サンプルプロジェクトのルートディレクトリ-
01-basic: SpreadJSの初期化とExcelファイルの読み込み -
02-with-buttons: HTMLのボタンからSpreadJSのデータを操作 -
03-with-ribbon: リボンをつけてExcelライクなインターフェースを実現
-
実際の動作確認は、VS CodeでLive Serverを起動して行います。VS Codeに拡張機能「Live Server」をインストールし、以下の手順でサンプルプロジェクトを起動します。
-
プロジェクトのルートディレクトリ（
samples）を開く - 任意のindex.htmlを右クリックし、「Open with Live Server」を選択する
-
ブラウザが起動し、
http://localhost:5500/01-basic/のようなURLが表示される
