SpreadJSのAIアシスタント機能で数式の自動生成と分析を行う

2026年3月26日にリリースされた「SpreadJS（スプレッドJS）」の最新バージョン「V19J」では、AIプラットフォームのAPIを利用する「AIアシスタント」を使用して、数式エディタパネル上で数式の自動生成やそのロジックの解析を自然言語による指示で実施できるようになりました。

本機能の使用により、たとえば次のような操作を自然言語による指示で実現できるので、Excel関数に不慣れなユーザーでも高度なデータ分析が容易になります。

「売上が最大の店舗を求めたい」と入力するだけで数式を自動生成
既存の複雑な数式の処理ロジックを、ステップごとに分かりやすく解説
「この関数を使わずに書き直して」といった指示で数式を改善

本記事では数式エディタの「AIアシスタント」機能の特長や導入メリット、具体的な使用方法についてご紹介します。
※ AIアシスタント機能の使用には、あらかじめAIプラットフォームのAPIキーを準備・設定する必要があります。

数式エディタパネルのAIアシスタントとは
数式エディタパネルのAIアシスタント機能を使ってみよう
AIアシスタントの動作確認
さいごに

数式エディタパネルのAIアシスタントとは

SpreadJSのAIアシスタント機能は前回の記事で紹介したAI関数に加えて、数式エディタパネル上で数式の自動生成や、生成された数式や既存の数式のロジックの詳細な説明の取得を自然言語による指示で実現できる機能を提供します。

数式の自動生成

自然言語で要件を入力すると、その要件を満たすExcel関数を自動で生成できます。

数式の分析

数式エディタの［数式を説明する］ボタンをクリックすると、既存の数式を分析し、そのロジックを分解してわかりやすく説明します。

AIアシスタントの特長

SpreadJSのAIアシスタントには以下のような特長があります。

コンテキスト認識

SpreadJSのAIアシスタント機能は単にAIプラットフォームのAPIを呼び出すだけではなく、ワークシートのデータ（テーブル構造、名前付き範囲、セル内容など）を自動的に抽出、理解し、AIモデルに適切なコンテキスト（文脈情報）として渡します。これにより、AIは数式に「table[販売店]」や「table[価格]」を使用するなど、シートの実際の構造に基づいた精度の高い応答を生成できます。

AI機能を後付けできるプラガブルな設計

AI関数を含めたSpreadJSのAIアシスタント機能は、既存のSpreadJS環境に後付けで導入できる設計となっています。本機能はAIアドオンのモジュール参照を追加することで利用が可能となっており、参照方式は用途や開発環境に応じて以下から選択できます。

scriptタグによる参照

<script src="gc.spread.sheets.ai.x.x.x.min.js"></script>

ESモジュール（import）による参照

import '@mescius/spread-sheets-ai-addon';

いずれの方式でも、既存のSpreadJSアプリケーションの構成を大きく変更することなく、AI 機能を組み込むことが可能です。

注記：

本番環境でAIアシスタント機能を利用する場合は、APIキーの保護などセキュリティの観点から、AIサービスへのリクエストはサーバーを経由して送信する構成が推奨されます。これは一般的なAI連携と同様の構成であり、フロントエンド側の実装やUI構成を大きく作り替える必要はありません。

さまざまなAIプラットフォームと連携できる

AI関数を含めたSpreadJSのAIアシスタント機能は、OpenAI形式のAPIと互換性のあるリクエスト／レスポンス設計を採用しておりますが、異なるAIプラットフォームを使用する場合であっても、リクエストやレスポンス形式の差分を適切な形式に整合させるカスタムアダプターを独自で用意することで連携が実現可能となっています。

本記事後半では一例として「Gemini API」と連携する方法をご紹介します。

AIアシスタントのメリット

AIアシスタントを使った数式生成と数式解析の機能には、次のような利点があります。

関数知識がなくても自然言語で数式を作成できる

ユーザーはワークシート上に設定されたテーブルなどのコンテキストに基づいた単語（このサンプルでは「販売店」や「商品名」）を用いて、関数の知識がなくても自然言語での指示で数式を自動で生成できます。

複雑な数式の理解コストを削減し、数式ミスの発見や改善を支援できる

AIアシスタントは自動生成された数式や既存の数式について、そのロジックを手順ごとに分解して説明します。ユーザーは学習コストを掛けずに数式の処理内容を理解することが可能になるので、数式の妥当性の評価や、改善の手掛かりの取得を手軽に実施できます。

数式エディタパネルのAIアシスタント機能を使ってみよう

ここからは実際にSpreadJSでAIアシスタントを使って数式を生成し、生成した数式の詳細な説明を表示する方法について解説していきます。

事前準備

開発環境

この記事では以下の開発環境を使用します。

Visual Studio Code
Express 5.2.1
dotenv 17.4.2
Google Gen AI SDK 2.3.0
SpreadJS 19.0.6

Gemini APIのAPIキーの入手

このプロジェクトでは、AIプラットフォームとして無料でも利用できる「Gemini API」を使用します。Gemini APIについてはこちらの記事もご参考にしていただければと思います。

Gemini APIを使うために必要なAPIキーを入手するには、Gemini APIのページを開いて上部にある［APIキーを取得する］ボタンをクリックします。

続いて、表示された「APIキー」ページで右上の［APIキーを作成］ボタンをクリックすると、キーが発行されます。リンク表示になっているキー部分をクリックするとキーの内容を確認できます。

なお、Gemini APIにはレート制限があります。無料のキーにはかなり厳しい制限があるので、最初にレート制限を確認することをお勧めします。

SpreadJSでAI連携する仕組み

今回作成するプロジェクトは、下図のような構造になります。

前述の通り、SpreadJSのAI機能はOpenAI形式のリクエストとレスポンスを処理するように設計されています。そのため、OpenAI以外のAIプラットフォームを利用する場合は、バックエンドでリクエストとレスポンスのフォーマットを変換する必要があります。

また、AIプラットフォームを利用するには何らかの方法でAPIキー（認証情報）を設定する必要がありますが、こちらも前述の通り、セキュアな構成にするために、バックエンドを経由することでAPIキーを秘匿することが推奨されています。

SpreadJSをAIプラットフォームと連携する方法やその際に注意すべき点については、ヘルプでも詳しく解説しているので、ぜひご一読ください。

プロジェクトのファイル構成

今回作成するプロジェクトのファイル構成は次のとおりです。バックエンドを構成するファイルはプロジェクトのルートに置き、フロントエンドを構成するものは「public」フォルダ内に配置します。

project/
├── server.js
├── package.json
├── .env
└── public/
    ├── index.html
    ├── css/
    ｜  ├── gc.spread.sheets.excel2013white.19.0.6.css
    ｜  └── styles.css
    └── scripts/
        ├── app.js
        ├── gc.spread.sheets.all.19.0.6.min.js
        ├── plugins/
        ｜  └── gc.spread.sheets.ai.19.0.6.min.js
        ｜  └── gc.spread.sheets.formulapanel.19.0.6.min.js
        └── resources/
            └── gc.spread.sheets.resources.ja.19.0.6.min.js

バックエンドの作成

このプロジェクトでは、SpreadJSコントロールをバックエンドのサーバーを経由してGemini APIと連携します。

バックエンドを作成する具体的な手順などについては、前回の記事で詳しく解説しているのでそちらをご参照ください。

フロントエンドの作成

フロントエンドは次のように実装します。

ページ本体にSpreadJSコントロールと数式エディタを配置
AIアシスタントによる数式の生成と分析を検証するためのコードを記述
バックエンドとの通信機能を実装

プロジェクト直下に「public」フォルダを作成し、以下の3つのファイルを作成します。

index.html	ページ本体。ページの要素としてSpreadJSと数式エディタを配置します
scripts/app.js	SpreadJSと数式エディタを作成するコードを記載します
css/styles.css	ページ上の各要素のスタイル定義を記載します

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="scripts/gc.spread.sheets.all.19.0.6.min.js"></script>
  <script src="scripts/plugins/gc.spread.sheets.formulapanel.19.0.6.min.js"></script>
  <script src="scripts/plugins/gc.spread.sheets.ai.19.0.6.min.js"></script>
  <script src="scripts/resources/gc.spread.sheets.resources.ja.19.0.6.min.js"></script>
  <link href="css/gc.spread.sheets.excel2013white.19.0.6.css" rel="stylesheet" />
  <link href="css/styles.css" rel="stylesheet" />
  <script src="scripts/app.js"></script>
</head>

<body>
  <div class="main-panel">
    <div id="ss"></div>
    <div class="formulaeditor-panel">
      <button id="apply" type="button">数式の適用</button>
      <button id="test1" type="button">テスト用文字列１</button>
      <button id="test2" type="button">テスト用文字列２</button>
      <div id="fe"></div>
    </div>
  </div>
</body>

</html>

上記で参照しているSpreadJSのモジュールはnpmなどから入手する方法もありますが、今回は環境に直接SpreadJSのモジュールを配置していきます。あらかじめSpreadJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。CSSファイルは以下に記載のもの含め7種類あるのでお好みのテーマのものを選択してください。

scripts/gc.spread.sheets.all.19.0.6.min.js
scripts/plugins/gc.spread.sheets.ai.19.0.6.min.js
scripts/resources/gc.spread.sheets.resources.ja.19.0.6.min.js
css/gc.spread.sheets.excel2013white.19.0.6.css

「app.js」では、SpreadJSの初期化処理や、バックエンドとの連携処理を行います。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

// 名前空間のエイリアス名
const spreadNS = GC.Spread.Sheets;

// ライセンスキーとカルチャの設定
// spreadNS.LicenseKey = 'ここにSpreadJSのライセンスキーを設定します';
GC.Spread.Common.CultureManager.culture("ja-jp");

document.addEventListener("DOMContentLoaded", () => {
  // SpreadJSの生成
  const spread = new spreadNS.Workbook("ss");
  spread.options.allowDynamicArray = true;
  injectAI(spread);
  initSheet(spread);

  // 数式エディタの生成
  const formulaEditor = new spreadNS.FormulaPanel.FormulaEditor("fe");
  formulaEditor.options.formatWidthLimit = -1;
  formulaEditor.options.tabSize = 4;
  formulaEditor.attach(spread);

  // 数式をセルに反映
  document.getElementById("apply").addEventListener('click', (e) => {
    formulaEditor.commandManager().execute({ cmd: 'commitContentToActiveCell' });
  });

  // クリップボードにテスト用文字列を設定
  document.getElementById("test1").addEventListener('click', (e) => {
    const test1 = "COUNTIF関数を使って最も商品の多い販売店を調べてください。";
    navigator.clipboard.writeText(test1);
  });

  document.getElementById("test2").addEventListener('click', (e) => {
    const test2 = "COUNTIF関数を使わないでMODE関数を使うように変更してください。";
    navigator.clipboard.writeText(test2);
  });
});

// ワークシートの初期化
const initSheet = (spread) => {
  // データの設定
  const data = [
    { カテゴリ: 'PC本体', 商品名: 'デスクトップPC1', 価格: 128000, '販売店': 'PCショップA' },
    { カテゴリ: 'PC本体', 商品名: 'ラップトップPC1', 価格: 249000, '販売店': 'PCショップA' },
    { カテゴリ: '周辺機器', 商品名: 'マウス1', 価格: 1980, '販売店': 'PCショップA' },
    { カテゴリ: '周辺機器', 商品名: 'キーボード2', 価格: 5680, '販売店': '家電量販店B' },
    { カテゴリ: '周辺機器', 商品名: 'プリンタ1', 価格: 14480, '販売店': '家電量販店B' },
    { カテゴリ: 'PCパーツ', 商品名: 'SSD1', 価格: 7980, '販売店': 'ネットショップC' },
    { カテゴリ: 'PC本体', 商品名: 'デスクトップPC2', 価格: 168000, '販売店': 'PCショップA' },
    { カテゴリ: 'PC本体', 商品名: 'ラップトップPC2', 価格: 326000, '販売店': 'PCショップA' },
    { カテゴリ: '周辺機器', 商品名: 'マウス2', 価格: 4980, '販売店': 'PCショップA' },
    { カテゴリ: '周辺機器', 商品名: 'キーボード1', 価格: 4680, '販売店': '家電量販店B' },
  ];

  // ワークシートの基本設定
  const sheet = spread.getSheet(0);
  sheet.defaults.colWidth = 40;
  sheet.setColumnWidth(1, 120);
  sheet.setColumnWidth(2, 120);
  sheet.setColumnWidth(3, 120);
  sheet.setColumnWidth(4, 120);

  // テーブルの作成
  const tableStyle = spreadNS.Tables.TableThemes.medium7;
  const table = sheet.tables.addFromDataSource("table", 1, 1, data, tableStyle);

  // 項目ヘッダのスタイル
  const headerStyle = new spreadNS.Style();
  headerStyle.backColor = "royalblue";
  headerStyle.foreColor = "white";
  headerStyle.font = "11pt メイリオ";
  headerStyle.hAlign = spreadNS.HorizontalAlign.center;
  headerStyle.vAlign = spreadNS.VerticalAlign.center;

  // 項目のスタイル
  const cellStyle = new spreadNS.Style();
  cellStyle.foreColor = "blue";
  cellStyle.font = "bold 12pt メイリオ";
  cellStyle.hAlign = spreadNS.HorizontalAlign.center;
  cellStyle.vAlign = spreadNS.VerticalAlign.center;
  cellStyle.watermark = "AIアシスタントを使って生成した数式をこのセルに設定します";

  // AIアシスタントで生成した数式の設定
  sheet.addSpan(13, 1, 1, 4);
  sheet.setValue(13, 1, "AIアシスタントで生成した数式の設定");
  sheet.setStyle(13, 1, headerStyle);
  sheet.getRange(13, 1, 11, 4).setBorder(
    new GC.Spread.Sheets.LineBorder("royalblue", spreadNS.LineStyle.medium),
    { outline: true }
  );
  sheet.addSpan(14, 1, 10, 4);
  sheet.setStyle(14, 1, cellStyle);
  sheet.setActiveCell(14, 1);
}

// AIリクエストをサーバーを経由してAIサービスに送信
const serverCallback = async (requestBody) => {
  const response = await fetch("/api/queryAI", {
    method: 'POST',
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(requestBody),
  });
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response;
};

const injectAI = (spread) => {
  spread.injectAI(serverCallback);
}

上記のコードでは、SpreadJSのワークシート上にテーブルを作成し、自然言語を入力して数式を表示する数式エディタと動作確認時にテスト用文字列をクリップボードに設定するボタンも実装しています。数式エディタについては、以下の記事で解説していますので、そちらもご参考にしていただければと思います。

数式エディタで生成した数式をSpreadJSコントロールのアクティブセルに設定するために次のコードを記述していますが、リボンコンテナを使用する場合には、数式エディタ上に表示される［保存］ボタンをクリックするだけで数式をアクティブセルに設定できます。

formulaEditor.commandManager().execute({ cmd: 'commitContentToActiveCell' });

また、コードの最後の部分では、serverCallback関数式とWorkbookクラスのinjectAIメソッドを使ってバックエンドとやりとりを行っています。injectAIメソッドはSpreadJSのAI機能と外部AIサービスを接続するための重要なポイントとなっており、ここで指定したコールバック関数がAIリクエスト送信時に実行されます。

このコールバック関数では、SpreadJSから渡されたリクエストをそのままバックエンドに送信しており、AIサービスごとの差異はバックエンド側で吸収する設計にすることで、フロントエンドの実装をシンプルに保つことができます。

「styles.css」ではSpreadJSと数式エディタに関連した要素のスタイルを定義します。

/* メインパネルのスタイル */
.main-panel {
  border: 1px solid silver;
  display: flex;
  height: 550px;
  width: 1138px;
  padding: 10px;
}

/* SpreadJSのスタイル */
#ss {
  border: 1px solid gray;
  flex: none;
  height: 550px;
  width: 624px;
}

/* 数式エディタに関連する要素のスタイル */
.formulaeditor-panel {
  flex: none;
  height: 550px;
  width: 500px;
  margin-left: 10px;
}

#apply {
  margin-right: 162px;
}

#fe {
  border: 1px solid gray;
  height: 520px;
  margin-top: 4px;
}

今回作成したサンプルは以下よりダウンロード可能です。実際に動かしながら動作を確認したい方はぜひご利用ください。

AIアシスタントの動作確認

以上ですべての準備が完了したので、以下のコマンドを実行してサーバーを起動します。

node server.js

ブラウザで「http://localhost:3000」にアクセスすると、次のようにSpreadJSが表示されます。

自然言語による数式の生成

次の手順で数式を生成してSpreadJSのアクティブセルに設定してみましょう。

数式エディタ内の右下にある［AI］ボタンをクリックする
「スマート数式生成」領域が数式エディタの下部に表示される
［テスト用文字列１］ボタンをクリックして数式生成用文字列をコピーする
数式エディタ上でCtrl+Vキーを押下してペーストする
数式エディタの［要件をAIに送信］ボタンをクリックする
生成された数式が数式エディタの上部に表示される
［数式の適用］ボタンをクリックして数式をSpreadJSのアクティブセルに設定する

自然言語による数式の調整

続いて次の手順を実行して、COUNTIF関数の代わりにMODE関数を使って同じ処理を実行する数式に変更します。

［テスト用文字列２］ボタンをクリックして数式生成用文字列をコピーする
数式エディタの2行目でCtrl+Vキーを押下してペーストする
数式エディタの［要件をAIに送信］ボタンをクリックする
数式エディタの上部に変更された数式が表示される
［数式の適用］ボタンをクリックして数式をSpreadJSのアクティブセルに設定する

生成した数式の説明を表示

数式エディタの［数式を説明する］ボタンをクリックすると、数式エディタ下部の「数式説明」領域に「数式の分解と解析」や「コンテキストと使用例」などの詳しい説明が表示されます。

注記：

表示される説明の内容は、AIの生成結果に依存するため、動画の内容と異なる場合や、実行する度に変化することがあります。

なお、ヘルプの「AIアシスタント」の末尾にある「AI生成機能に関する注意」に記載しているように、AI生成結果には不正確な情報や不完全な表現、または誤解を招く内容が含まれる可能性があるので、ご留意ください。

今回作成したサンプルは以下よりダウンロード可能です。実際に動かしながら動作を確認したい方はぜひご利用ください。

さいごに

今回の記事では、SpreadJSのAIアシスタントを使った数式生成や数式解析の特長や導入メリット、具体的な利用方法についてご紹介しました。数式エディタのAIアシスタントは特に以下のようなケースで効果を発揮します。

業務システムに非エンジニアが多く関わる
Excel関数の理解に課題がある
高度な分析ロジックを簡単に扱いたい

業務システムへのAI活用に興味のある方はぜひお試しください。

また、次回の記事では、ピボットテーブルで使えるAIアシスタント機能ついて詳しく解説する予定ですので、こちらもぜひご期待ください。

製品サイトでは、SpreadJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／