対象読者
- Next.jsで業務システムを開発している方
- 帳票機能の組み込みを検討している方
- ActiveReportsJSやWijmoに興味がある方
前提環境
筆者の検証環境は以下の通りです。
- macOS Tahoe 16.1
- Node.js 25.2.1
- npm 11.6.2
- Next.js 16.1.3
- React 19.2.3
- Wijmo 5.20252.44
- ActiveReportsJS 6.0.1
- Firebase 12.8.0
はじめに
前回は、Next.js + Firebase + Wijmo + ActiveReportsJSの4つの技術スタックを組み込み、FlexGridやTreeViewといったWijmoコンポーネントと、ActiveReportsJS Viewerによる基本的な帳票表示を確認しました。ただし、データは仮のモックデータを使い、帳票にはまだ業務データが反映されていない状態でした。
今回は、データバインドの仕組みを理解した上で、以下の2つを実現します。
- 業務データをActiveReportsJSの帳票に反映する（データバインド）
- WijmoのFlexGridで選択したデータを帳票に連携する（Wijmo → ActiveReportsJS連携）
これにより、UIで操作した内容がそのまま帳票に反映される、実践的な業務システムの姿を構築します。
ActiveReportsJSのデータバインド
ActiveReportsJSでJSONデータを帳票に反映するには、「データソース（DataSource）」と「データセット（DataSet）」という2つの概念を理解する必要があります。まずDesignerを使ってこれらの概念と設定手順を確認し、続いてプログラムから実行時にデータをバインドする実装を見ていきます。
Designerでのデータソース設定
ActiveReportsJS Designerを使って、データソースとデータセットを設定しましょう。
Designerのデータタブを開き、データソース右側の「+追加」アイコンをクリックすると、データソース編集ダイアログが表示されます（図1）。ダイアログで以下を設定します。
-
名前：
ProductsDataSource（任意） - 種類：JSON
- 形式：埋め込み
「埋め込み」形式は、実行時にプログラムからデータを渡す際に使用します。サンプルとなるJSONデータをあらかじめ入力しておくことで、設計時にフィールド構造を確認できます。ここでは、サンプルプロジェクトに含まれている「products.json」を入力しています。
次に、データソース名横の「+」アイコンをクリックします（図2）。
データセットダイアログが表示されるので、以下のように設定します（図3）。
-
名前：
Products（任意） -
クエリ（JSONPath式）：
$.*（配列のルートから各要素を取得する指定）
「検証」ボタンをクリックすると、サンプルデータからフィールドが自動検出されます。code、name、price、stock、unitといったフィールドがデータセットに追加されます。フィールドをレポートアイテムにバインドする際はDataFieldを指定します（Valueを直接指定するとデータがバインドされず、フィールド名がそのまま表示されてしまいます）。
実行時のデータバインド
ReportViewerWithDataコンポーネントでは、レポート定義を取得した後にConnectStringを書き換えることで、任意のJSONデータをレポートにバインドしています（リスト1）。
// レポート定義を取得
const response = await fetch(reportUri);
const reportDef = await response.json();
// データソースにデータをバインド
if (reportDef.DataSources && reportDef.DataSources.length > 0) {
reportDef.DataSources[0].ConnectionProperties.ConnectString =
"jsondata=" + JSON.stringify(data);
}
// Viewer を動的インポートして初期化
const ArViewer = await import("@mescius/activereportsjs/reportviewer");
if (!viewerRef.current) {
viewerRef.current = new ArViewer.Viewer(hostRef.current);
}
// レポートを開く
await viewerRef.current.open(reportDef);
"jsondata="プレフィックスに続けてJSON文字列を設定することで、外部ファイルではなくプログラムから渡したデータをレポートに反映できます。レポート定義のJSON取得 → ConnectString書き換え → Viewerでオープン、という3ステップがデータバインドの基本フローです。
図3は、この仕組みで商品データをバインドした帳票の表示例です。
