Web で Excel ライクな帳票を作る — ブラウザでも Excel の操作感は再現できる

「帳票は Excel で作るもの」と思い込んでいませんか？

見積書・請求書・発注書・納品書――日本のビジネス現場では今もなお、こうした帳票の多くが Excel ファイルとして管理されています。それ自体は悪くないのですが、「Web アプリから帳票を出力したい」「ブラウザ上でデータを入力させたい」となったとたんに、話が複雑になります。PDF 生成ライブラリを導入する、サーバーで Excel を処理する、<table> を組んでスタイルを当てる……どれも「Excel みたいに見える」ところまでは行けても、「Excel みたいに使える」にはなかなか届きません。

実は、ブラウザだけで Excel とほぼ同じ帳票体験を実現できるツールがあります。 ReoGrid Web がそれです。

ReoGrid Web は何ができるのか

ReoGrid Web は、Canvas ベースのスプレッドシートエンジンをブラウザ上で動かすライブラリです。「スプレッドシート」と聞くと Google スプレッドシートのような独立した Web アプリを想像するかもしれませんが、ReoGrid Web は 自分の Web アプリに埋め込むコンポーネント です。React / Vue / バニラ JS のどれでも使えます。

帳票に必要な機能を具体的に挙げると、次のようなものが揃っています。

Excel 互換の表現力

帳票の見た目を再現するには、Excel と同じレベルの書式設定が不可欠です。ReoGrid Web は以下のすべてに対応しています。

• セルスタイル — フォント・サイズ・色・太字・斜体・下線・背景色
• 罫線 — 太さ・色・スタイル（実線／破線／点線）を辺ごとに指定
• セルの結合 — タイトル行や合計ブロックなど、複雑なレイアウトに対応
• 数値・日付書式 — ¥#,##0・yyyy年m月d日 など Excel 互換のパターン

帳票を Excel で作ったことがある方なら、同じ感覚でそのままレイアウトできます。

数式・計算

数量 × 単価 = 金額、小計・消費税・合計といった計算は、Excel と同じ数式構文で書けます。=C2*D2 や =SUM(E10:E14) がそのまま動きます。ユーザーがセルを編集すると、連鎖する計算がリアルタイムに更新されます。

ReoGrid Web Pro には 数式ビルダー が付属しており、ユーザーが GUI で数式を組み立てることもできます。

拡張機能

スプレッドシートとしての機能も充実しています。

• フィルター・ソート — データを絞り込んで整理
• セル型 — チェックボックス・ドロップダウン・ボタン・プログレスバーなど
• ウィンドウ枠の固定 — ヘッダー行を固定したまま大量データをスクロール
• アウトライン（グルーピング） — 行・列の折りたたみで階層構造を整理
• 条件付き書式 — 値に応じてセルの色やスタイルを自動変更

Web に特化した高速処理

単一の <canvas> 要素で描画するため、DOM ベースのグリッドとは根本的に違うパフォーマンス特性を持ちます。

• 高速レンダリング — 10,000 行でも 60fps を維持
• suspendRender() / resumeRender() — 大量データを一括書き込みするときに描画をまとめて 1 回に絞る
• バルクロード API — 数千セルを一気に流し込む場面に特化した書き込みパス

Excel ファイルをそのまま読み込める

ReoGrid Web の大きな特徴のひとつが、既存の .xlsx ファイルをブラウザ上で直接読み込んで表示できる ことです。ファイルをサーバーに送る必要はありません。

const fileInput = document.getElementById('file') as HTMLInputElement;
fileInput.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files![0];
  await worksheet.loadXlsx(file);   // ブラウザ内でパースして即描画
});

セルのスタイル・罫線・結合・ウィンドウ枠固定・数式・条件付き書式がすべて維持されます。「今まで Excel で管理していた帳票をそのまま Web アプリに持ち込む」という移行がごく自然に行えます。

3 つの開発アプローチ

ReoGrid Web で帳票を実装するとき、大きく 3 つのアプローチがあります。目的や既存資産によって選び方が変わります。

アプローチ 1 — Excel テンプレートを読み込んで Web で使う

「既存の Excel 帳票をそのまま Web に持ち込みたい」

これが最もすばやく結果が出るアプローチです。

1. 普段使いの Excel で帳票（見積書や請求書のテンプレート）を仕上げる
2. .xlsx ファイルとして保存し、アプリに同梱（または CDN に配置）
3. アプリ起動時に loadXlsx() でロード
4. セル保護機能 で、入力してほしいセルだけを編集可能にし、それ以外をロック

// xlsx を読み込んで表示
await worksheet.loadXlsx('/templates/quotation-template.xlsx');

// 入力エリアだけロック解除、それ以外は保護
worksheet.protected = true;                        // シート全体を保護
worksheet.range('C11:C15').setLock('unlocked');    // 数量列だけ編集可
worksheet.range('D11:D15').setLock('unlocked');    // 単価列だけ編集可

デザイナーが Excel で帳票レイアウトを管理し、エンジニアはロジックに集中できる――役割分担がしやすいアプローチです。完成したらそのまま saveAsXlsx() で Excel として書き出すこともできます。

アプローチ 2 — コードでワークシートをゼロから構築する

「デザインも含めてコードで完全に制御したい」

セル・スタイル・数式・罫線のすべてをコードで組み立てます。テンプレートファイルを管理する必要がなく、動的なデータとレイアウトをプログラムで組み合わせられます。

// タイトル
ws.range('A1:E1').merge().setValue('御 見 積 書')
  .setStyle({ fontSize: 18, bold: true, backgroundColor: '#1e3a5f', color: '#fff' });

// 明細行を動的に生成
items.forEach(([name, qty, price], i) => {
  ws.cell(`B${i + 10}`).setValue(name);
  ws.setCellInput(i + 9, 2, String(qty));
  ws.setCellInput(i + 9, 4, `=C${i + 10}*D${i + 10}`);  // 金額は数式
});

前回の記事「編集可能な数式付き React 製インボイスを約 60 行で構築する」では、このアプローチで請求書を組む手順を詳しく解説しています。

アプローチ 3 — Excel でテンプレートを作り、動的データを流し込む（ハイブリッド）

「レイアウトは Excel で管理して、データはシステムから入れたい」

アプローチ 1 と 2 の中間で、実務では最も多いパターンです。

1. Excel でレイアウト・スタイル・固定テキスト（会社名・見出し・書式）を作り込む
2. ロード後、変動するデータ（品名・数量・金額など）だけをコードで注入

// テンプレートを読み込む
await worksheet.loadXlsx('/templates/invoice-base.xlsx');

// API から取得したデータを流し込む
const { items, client, issueDate } = await fetchInvoiceData(invoiceId);
worksheet.cell('B3').setValue(client.name);
worksheet.cell('E3').setValue(issueDate);

worksheet.suspendRender();
items.forEach(({ name, qty, price }, i) => {
  worksheet.cell(`B${10 + i}`).setValue(name);
  worksheet.setCellInput(9 + i, 2, String(qty));
  worksheet.setCellInput(9 + i, 3, String(price));
});
worksheet.resumeRender();

デザインの変更は Excel ファイルの差し替えだけで済み、コードの修正が不要です。また、バックエンドのデータモデルが変わっても、注入部分だけを修正すれば対応できます。

どのアプローチを選ぶか

「Excel を開かずに済む」体験を提供する

ReoGrid Web の本質は、ユーザーが Excel を持っていなくても、Excel と同等の帳票体験をブラウザで完結できる 点にあります。

• 既存の .xlsx テンプレートをそのままロードして表示できる
• Excel 互換のスタイル・数式・書式で視覚的に同等の帳票を再現できる
• セル保護でデータ入力専用の UI/UX を作れる
• 完成したらそのまま .xlsx として書き出せる（Pro）

「帳票 = Excel ファイルの往復」というフローから脱却して、Web アプリ内で帳票を完結させる選択肢として、ぜひ検討してみてください。

さっそく試す

デモページ では請求書デモをライブで操作できます。数量・単価を変更すると合計がリアルタイムに更新されるのを体験してみてください。

npm install @reogrid/lite     # 無料・主要機能
npm install @reogrid/pro      # 全機能（xlsx エクスポート・数式ビルダーなど）

関連ドキュメント：

• はじめる
• xlsx 入出力
• セルの保護
• 数式
• 条件付き書式