ReoGrid は元々、WinForms と WPF 向けの .NET スプレッドシートコントロールとして生まれ、長年デスクトップの業務アプリに組み込まれてきました。ReoGrid Web は、その発想をブラウザに持ち込んだものです。React・Vue・バニラ JavaScript 向けの、キャンバスベースで Excel ライクなスプレッドシートです。
デスクトップのツールを Web へ移す — あるいは既存の .NET アプリの Web 版を作る — なら、良い知らせがあります。思考モデルは同じです。あなたはすでに ReoGrid の考え方を知っています。この記事は、その知識を Web 版に対応づけます。
.NET 版そのものをお探しですか？ それは reogrid.net にあります。この記事は JavaScript/Web 版についてです。
引き継がれるもの
スプレッドシートのモデル全体が共通です。
- セル・範囲・行・列という中核のアドレッシングモデル。
- セル単位のスタイル — フォント、色、背景、配置。
- 結合セル、罫線、表示形式。
- 編集時に再計算される依存グラフを持つ数式。
- 高い再現性の xlsx 入出力 — スタイル・結合・書式がラウンドトリップを生き残ります。
- Excel ライクな編集 UX — セル内編集、選択、フィル、元に戻す/やり直し。
デスクトップで ReoGrid を使って請求書・帳票・設定フォームを作ったなら、同じパターンが Web でもそれらを作ります。
変わるもの
当然プラットフォーム — そしてそれに伴う API のスタイルです。
| 観点 | ReoGrid .NET（WinForms/WPF） | ReoGrid Web |
|---|---|---|
| 言語 | C# / VB.NET | TypeScript / JavaScript |
| 描画 | GDI+ / WPF | HTML <canvas> |
| 配布 | NuGet | npm（@reogrid/lite、@reogrid/pro） |
| API の形 | プロパティ＆インデクサ（sheet["A1"] = …） | フルエントハンドル（worksheet.cell('A1').setValue(…)） |
| UI ホスト | Form/Window 上のコントロール | グリッドがマウントする <div> |
| フレームワーク | WinForms, WPF | React, Vue, バニラ JS |
日々の最大の違いは API のエルゴノミクスです。.NET 版はプロパティとインデクサに依拠し、Web 版はフルエントハンドル API を使います。各操作がチェーンできるハンドルを返します。
同じ処理を、両エディションで
いくつかの一般的な操作の概念的な対応です。（.NET のコードは説明用です。正確なシグネチャは .NET ドキュメントを確認してください。Web のコードは正確です。）
セルの値とスタイルを設定
// ReoGrid .NET（概念）
var sheet = reoGridControl.CurrentWorksheet;
sheet["A1"] = "Product";
sheet.Cells["A1"].Style.Bold = true;// ReoGrid Web
const { worksheet } = createReogrid('#grid');
worksheet.cell('A1').setValue('Product').setStyle({ bold: true });範囲を結合
sheet.MergeRange("A1:D1"); // .NET（概念）worksheet.range('A1:D1').merge(); // Web数式
sheet["D2"] = "=B2*C2"; // .NET（概念）worksheet.setCellInput(1, 3, '=B2*C2'); // Web — setValue ではなく setCellInput に注意（Web 版では setValue('=B2*C2') はリテラル文字列を保存してしまいます。数式は setCellInput を通します。）
xlsx の読み込みと保存
reoGridControl.Load("report.xlsx"); // .NET（概念）
reoGridControl.Save("out.xlsx");await worksheet.loadFromUrl('/report.xlsx'); // Web
worksheet.saveAsXlsx({ filename: 'out.xlsx' }); // Web（Pro）形は違っても、概念は同一です。ReoGrid .NET で作れるものは、ReoGrid Web でも作れます。
xlsx の橋渡し: 両エディションを会話させる
どちらか一方を選ぶ必要はありません。xlsx が両者の交換フォーマットです。 .NET デスクトップアプリが .xlsx を書き出し、ReoGrid Web で作った Web アプリがそれを loadFromFile/loadFromUrl で読み込み、忠実に描画し、ユーザーに編集させ、saveAsXlsx で書き戻す — そして .NET アプリがその結果を再び開ける。同じファイル、同じ再現性、両端で。
これにより段階的な移行が現実的になります。デスクトップアプリは残したまま、同じファイルを読む Web ビューを追加し、機能を自分のペースで移していけます。
Web で始める
npm install @reogrid/lite # 無料ティア
# または
npm install @reogrid/pro # 数式、並べ替え/フィルター、固定、xlsx エクスポートimport { createReogrid } from '@reogrid/lite';
const { worksheet } = createReogrid('#grid');
worksheet.cell('A1').setValue('Hello from the web').setStyle({ bold: true });そこから:
- はじめに — React・Vue・バニラのセットアップ。
- Angular をお使いですか？ Angular で ReoGrid — コア API がそのままコンポーネントに収まります。
- ライブデモ — 請求書、見積、ビッグデータ、条件付き書式。
- ファイルを閲覧したいだけ？ 無料オンライン XLSX ビューアは Web 版の実演です。
あなたが知っているのと同じスプレッドシートが — 今度はブラウザのタブで動きます。