Firebase × Next.js × Wijmo × ActiveReportsJSでつくる、現場が自走できる業務システム

第1回

　「帳票のレイアウトを少し直したいのに、開発会社に依頼すると時間もコストもかかる」といった話は、業務システムの現場でよく耳にする悩みです。本シリーズでは、WijmoとActiveReportsJSを組み合わせ、現場担当者が自分で帳票を修正できる仕組みを実現します。

対象読者

• Next.jsで業務システムを開発している方
• 帳票機能の組み込みを検討している方
• WijmoやActiveReportsJSに興味がある方

前提環境

　筆者の検証環境は以下の通りです。

• 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

はじめに

　業務システムの開発において、データの一覧表示や帳票の作成・確認は重要な要素です。Reactベースのフロントエンドでは、Wijmoが提供する豊富なUIコンポーネントを活用することで、効率的に業務アプリケーションを構築できます。また、帳票機能にはActiveReportsJSを組み合わせることで、柔軟なレイアウト設計と現場での編集が可能です。この組み合わせにより、見た目の品質を担保しつつ、開発現場はビジネスロジックに集中できます。

　本連載では、メシウスが提供する高機能UIコントロールを多数備えたJavaScript開発ライブラリ「Wijmo」と、JavaScript帳票ライブラリである「ActiveReportsJS」を軸に、業務システムの基盤構築から帳票連携までのステップを解説します。アプリケーションフレームワークとしては、ReactでのデファクトスタンダードとなっているNext.jsを採用します。データベースとしてはサンプルにFirebase Firestoreを採用していますが、Firestore特有の機能は使いませんので、現場では任意のデータベースを利用して構いません。連載の全体像としては、次の順序で解説します。

1. WijmoとActiveReportsJSを組み合わせた業務システムの基盤構築（本記事）
2. Firestoreデータとの連携とWijmoからActiveReportsJSへのデータフローの実装
3. レポートパーツやマスターレポートを活用した帳票の部品化と、ActiveReportsJS Designerによる現場での帳票編集機能の実現

　本記事では、第1回としてNext.jsアプリケーションにWijmoとActiveReportsJS Viewerを組み込み、仮データを使ってUIの表示ができることを目指します。

プロジェクト構成の概要

　今回構築する受発注管理システムは、商品・取引先・商品分類のマスタ管理と、受発注データの管理を行います。主要なデータモデルとして、Product（商品）、Partner（取引先）、Category（商品分類）、Order（受発注）を定義しています（リスト1）。

［リスト1］src/lib/firebase/types.ts（データモデル抜粋）

export interface Product {
  id: string;           // FirestoreドキュメントID
  code: string;         // 商品コード（表示用）
  name: string;
  categoryId: string;   // 商品分類への参照
  price: number;
  stock: number;
  unit: string;         // 単位（個、箱、kgなど）
  …中略…
}

export interface Partner {/* 省略 */}

export interface Category {/* 省略 */}

export interface Order {
  id: string;
  orderNumber: string;            // 伝票番号
  type: "purchase" | "sales";     // 発注 or 受注
  partnerId: string;
  partnerName: string;            // 非正規化した取引先名
  …中略…
  items: OrderItem[];             // 明細行の配列
  totalAmount: number;
  …中略…
}

　これらのデータモデルは、Firestoreのドキュメント構造に対応しています。partnerNameのように一部のフィールドに非正規化した値を持たせることで、一覧表示時のクエリを効率化しています。

Wijmoの組み込み

　WijmoをNext.jsに組み込む際の最大のポイントは、SSR（サーバーサイドレンダリング）の無効化です。Wijmoはクライアント側で実行されることを前提としたライブラリのため、サーバー側で実行するとエラーになります。"use client"ディレクティブとdynamic関数を組み合わせて対応します（リスト2）。

［リスト2］src/app/products/page.tsx（SSR無効化パターン）

"use client";  // クライアントコンポーネントとして宣言

import dynamic from "next/dynamic";

const ProductsGrid = dynamic(
  () => import("@/components/wijmo/ProductsGrid"),
  { ssr: false }  // サーバーサイドレンダリングを無効化
);

　この2段階のアプローチ（"use client"とdynamic import）により、Wijmoコンポーネントはブラウザでのみロードされるようになります。ライセンス設定は、環境変数から読み込んでsetLicenseKey()で適用します（リスト3）。NEXT_PUBLIC_プレフィックスにより、クライアントサイドからアクセス可能になります。

［リスト3］src/components/wijmo/WijmoLicense.tsx

"use client";

import { setLicenseKey } from "@mescius/wijmo";

// 環境変数からライセンスキーを取得
const licenseKey = process.env.NEXT_PUBLIC_WIJMO_LICENSE_KEY;
if (licenseKey) {
  setLicenseKey(licenseKey);  // アプリケーション全体に適用
}

　このコンポーネントをルートレイアウトで読み込むことで、すべてのWijmoコンポーネントにライセンスが適用されます。評価版の場合はこの設定を省略できます。

　Wijmoは多言語対応しており、日本語カルチャを適用することで日本語表示が可能になります。言語設定は「カルチャ」と呼ばれており、日本語向けの設定はコンポーネントで@mescius/wijmo.cultures/wijmo.culture.jaをインポートするだけで適用されます。