個々のモジュール

SpreadJS モジュールをnpmからインストールできます。Webpack、Rollup、ESBuild、Vite などの多くの最新のJavaScriptビルドツールやバンドラーは、モジュール、プラグイン、リソースを含む SpreadJS のNPM パッケージとシームレスに連携します。また、SpreadJS をプロジェクトのビルドプロセスに統合して、これらのツールの機能を最大限に活用することができます。

SpreadJSで個々のモジュールを使用する際、次の項目のリストを参照してください。

インストールのコマンド

次のコマンドを実行して、NPMからモジュールをインストールします。

@mescius/spread-common

@mescius/spread-calc-engine

@mescius/spread-calc-engine-basic-functions

@mescius/spread-calc-engine-advanced-functions

@mescius/data-manager

@mescius/spread-sheets-core

@mescius/spread-sheets-bindings

@mescius/spread-sheets-cell-types

@mescius/spread-sheets-sparklines

@mescius/spread-sheets-search

@mescius/spread-sheets-outlines

@mescius/spread-sheets-floating-objects

@mescius/spread-sheets-comments

@mescius/spread-sheets-tables

@mescius/spread-sheets-touch

@mescius/spread-sheets-conditional-formatting

@mescius/spread-sheets-cell-state

@mescius/spread-sheets-data-validation

@mescius/spread-sheets-filter

@mescius/spread-sheets-fill

@mescius/spread-sheets-context-menu

@mescius/spread-sheets-formula-textbox

@mescius/spread-sheets-outline-column

@mescius/spread-sheets-drag-merge

@mescius/spread-sheets-statusbar

@mescius/spread-sheets-auto-merge

@mescius/spread-sheets-calc-engine

@mescius/spread-sheets-hyperlink

@mescius/spread-sheets-namebox

@mescius/spread-sheets-input-mask

これらのモジュールをプラグインやリソースとともに使用するには、ビルドツールまたはCLIのエイリアスに「@mescius/spread-sheets」ではなく、「@mescius/spread-common」を設定する必要があります。

type=warning
メモ：「@mescius/spread-sheets」は、個別のノードモジュール(「@mescius/spread-common」…)で構成される単一のモジュールです。不明なエラーが発生する可能性があるため、「@mescius/spread-sheets」と個別のモジュールを一緒に使用しないでください。

依存関係テーブル

モジュール内の依存関係

次の表は、モジュール内の最小限の依存関係を示しています。

パッケージ	依存関係
@mescius/spread-common
@mescius/spread-calc-engine	@mescius/spread-common
@mescius/spread-calc-engine-basic-functions	@mescius/spread-common @mescius/spread-calc-engine
@mescius/spread-calc-engine-advanced-functions	@mescius/spread-common @mescius/spread-calc-engine
@mescius/data-manager	@mescius/spread-common @mescius/spread-calc-engine
@mescius/spread-sheets-core	@mescius/spread-common
@mescius/spread-sheets-bindings	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-cell-types	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-sparklines	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-search	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-outlines	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-floating-objects	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-comments	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-tables	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column
@mescius/spread-sheets-touch	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-conditional-formatting	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-cell-state	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-data-validation	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting
@mescius/spread-sheets-filter	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column
@mescius/spread-sheets-fill	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-context-menu	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-formula-textbox	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables
@mescius/spread-sheets-outline-column	@mescius/spread-common @mescius/spread-sheets-core @mescius/spread-sheets-outlines
@mescius/spread-sheets-drag-merge	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-statusbar	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-context-menu
@mescius/spread-sheets-auto-merge	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-calc-engine	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core
@mescius/spread-sheets-hyperlink	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-namebox	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-cell-types
@mescius/spread-sheets-input-mask	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-cell-types

プラグイン内の依存関係

次の表は、プラグイン内の最小限の依存関係を示しています。

パッケージ	依存関係
@mescius/spread-sheets-languagepackages	@mescius/spread-common @mescius/spread-calc-engine
@mescius/spread-sheets-io	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-charts	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects
@mescius/spread-sheets-shapes	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects
@mescius/spread-sheets-barcode	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-sparklines
@mescius/spread-sheets-print	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine
@mescius/spread-sheets-pdf	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print
@mescius/spread-sheets-slicers	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects @mescius/spread-sheets-shapes @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables
@mescius/spread-sheets-pivot-addon	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-floating-objects @mescius/spread-sheets-shapes @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-slicers @mescius/spread-sheets-formula-textbox
@mescius/spread-sheets-tablesheet	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-formula-textbox @mescius/spread-sheets-context-menu @mescius/spread-sheets-statusbar @mescius/data-manager @mescius/spread-sheets-auto-merge @mescius/spread-sheets-cell-state @mescius/spread-sheets-data-validation
@mescius/spread-sheets-ganttsheet	@mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-conditional-formatting @mescius/spread-sheets-cell-types @mescius/spread-sheets-filter @mescius/spread-sheets-bindings @mescius/spread-sheets-outlines @mescius/spread-sheets-outline-column @mescius/spread-sheets-tables @mescius/spread-sheets-formula-textbox @mescius/spread-sheets-context-menu @mescius/spread-sheets-statusbar @mescius/data-manager @mescius/spread-sheets-auto-merge @mescius/spread-sheets-cell-state @mescius/spread-sheets-data-validation @mescius/spread-sheets-tablesheet

リソース内の依存関係

次の表は、リソース内の最小限の依存関係を示しています。

パッケージ	依存関係
@mescius/spread-sheets-resources-ja	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-resources-ko	@mescius/spread-common @mescius/spread-sheets-core
@mescius/spread-sheets-resources-zh	@mescius/spread-common @mescius/spread-sheets-core

パッケージ

依存関係

@mescius/spread-sheets-resources-ja

@mescius/spread-common

@mescius/spread-sheets-core

@mescius/spread-sheets-resources-ko

@mescius/spread-common

@mescius/spread-sheets-core

@mescius/spread-sheets-resources-zh

@mescius/spread-common

@mescius/spread-sheets-core

モジュールを使用するサンプルコード

グローバル変数でコアモジュールを使用する

次のサンプルコードは、グローバル変数でコアモジュールをグローバル変数と使用する方法を示しています。

<!DOCTYPE html>
<html>
<head>
 <title>Test SJS Modules with Global Variable</title>
 <link rel="stylesheet" type="text/css"
 href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
 <div id="testDiv" style="width:100%;height:300px;"></div>
 <script type='text/javascript' src="./@mescius/spread-common/dist/gc.spread.common.min.js"></script>
 <script type='text/javascript' src="./@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min.js"></script>
 <script type='text/javascript'>
 window.onload = function () {
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
 };
 </script>
</body>
</html>

AMDでコアモジュールを使用する

次のサンプルコードは、AMD でコアモジュールを使用する方法を示しています。

<!DOCTYPE html>
<html>
<head>
    <title>Test SJS Modules with AMD</title>
    <link rel="stylesheet" type="text/css"
        href="./@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
</head>
<body>
    <div id="testDiv" style="width:100%;height:300px;"></div>
    <script type='text/javascript' src="./require.js"></script>
    <script type='text/javascript'>
        window.onload = function () {
            require.config({
                paths: {
                    '@mescius/spread-common': './@mescius/spread-common/dist/gc.spread.common.min',
                    '@mescius/spread-sheets-core': './@mescius/spread-sheets-core/dist/gc.spread.sheets.core.min'
                }
            });
            require(['@mescius/spread-common', '@mescius/spread-sheets-core'], function (GC) {
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
            });
        };
    </script>
</body>
</html>

CommonJSでコアモジュールを使用する

次のサンプルコードは、CommonJSでコアモジュールを使用する方法を示しています。

import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));

CommonJSでスパークラインモジュールを使用する

次のサンプルコードは、CommonJSでスパークラインモジュールを使用する方法を示しています。

import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-sparklines";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setFormula(0, 0, '=PIESPARKLINE(0.25, "red"');
sheet.setRowHeight(0, 60);
sheet.resumePaint();

CommonJSでプリントモジュールを使用する

次のサンプルコードは、CommonJSでプリントモジュールを使用する方法を示しています。

import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));
var sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS!")
spread.print();

CommonJSで中国語のリソースモジュールを使用する

次のサンプルコードは、CommonJSで中国語のリソースモジュールを使用する方法を示しています。

import * as GC from "@mescius/spread-common";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-resources-zh";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("testDiv"));