無料で使えるWeb高性能スプレッドシートライブラリ ReoGrid

ReoGrid Web（以下ReoGrid）は、無料で高機能かつ、NPMパッケージ一つでExcelライクなスプレッドシートをWebアプリに組み込めるライブラリです。豊富なセルスタイル、書式、セルタイプの設定機能を内蔵しているため、Excelのような帳票をWebアプリでも簡単に実現できることが最大の強みです。

パッケージ１つをインストールするだけで、Excelファイルの読み込み、セルスタイル、罫線設定、数式機能をすべて利用できます。

---

ReoGrid を使ってみる

高機能なら動作が重い、他のライブラリなどに依存すると思われがちですが、このライブラリは何にも依存せず、配布パッケージのサイズもわずか300KBです。さらにgzipすると約70KBです。同類のライブラリの調査結果によると、この軽量化は世界一クラスです。

インストール

npm install @reogrid/lite

Reactの初期化方法

// React
import { Reogrid } from '@reogrid/lite/react';

<Reogrid style={{ width: '100%', height: '400px' }} />

Vueの初期化方法

<!-- Vue -->
<script setup>
import { Reogrid } from '@reogrid/lite/vue';
</script>

<template>
  <Reogrid style="width: 100%; height: 400px" />
</template>

Excel を読み込む

Excel の帳票があれば、loadFromUrl を使って Excel ファイルを読み込むことができます。

import { useRef } from 'react';
import { Reogrid, type ReogridInstance } from '@reogrid/lite/react';

function InvoiceSheet() {
  async function handleReady(instance: ReogridInstance) {
    await instance.worksheet.loadFromUrl('/data/invoice.xlsx');
  }

  return (
    <Reogrid onReady={handleReady} style={{ width: '100%', height: '500px' }} />
  );
}

ゼロからワークシートを構築

import { Reogrid, type ReogridInstance } from '@reogrid/lite/react';

function InvoiceSheet() {
  async function handleReady(instance: ReogridInstance) {

    const { worksheet } = instance;

    // ヘッダー行
    worksheet.cell('A1').setValue('商品名').setStyle({ bold: true });
    worksheet.cell('B1').setValue('単価').setStyle({ bold: true });
    worksheet.cell('C1').setValue('数量').setStyle({ bold: true });
    worksheet.cell('D1').setValue('金額').setStyle({ bold: true });

    // データ行
    worksheet.cell('A2').value = 'ReoGrid Pro ライセンス';
    worksheet.cell('B2').value = 50000;
    worksheet.cell('C2').value = 3;
    worksheet.cell('D2').setValue('=B2*C2'); // 数式で自動計算
  }

  return (
    <Reogrid onReady={handleReady} style={{ width: '100%', height: '500px' }} />
  );
}

その他の機能

セルスタイルを設定

// 単一セルのスタイル
worksheet.cell('A1').setStyle({
  bold: true,
  fontSize: 14,
  color: '#ffffff',
  backgroundColor: '#1e40af',
  textAlign: 'center',
});

// 範囲に一括設定
worksheet.range('A1:D1').setStyle({
  bold: true,
  backgroundColor: '#dbeafe',
});

セルを結合する

// A1:D1 を結合（RangeHandle）
worksheet.range('A1:D1').merge();

// 行・列番号で指定する場合
worksheet.mergeCells(0, 0, 0, 3); // 1行目、A〜D列を結合

罫線を設定

// 外枠のみ
worksheet
  .range('A1:D5')
  .border({ style: 'solid', color: 'green', width: 4 }, ['outside']);

// 内側の罫線
worksheet
  .range('A1:D5')
  .border({ style: 'dotted', color: 'red', width: 2 }, ['inside']);

書式を設定

// 通貨書式（日本円）
worksheet.cell('B2').setFormat('¥#,##0');

// パーセント書式
worksheet.cell('C2').setFormat('0.0%');

// 日付書式（元号）— 令和7年3月26日
worksheet.cell('D2').setFormat('ggge年M月d日');

// 範囲に一括設定
worksheet.range('B2:B10').setFormat('¥#,##0');

日本の帳票に必要な書式はすべてネイティブ対応しています。

セルにチェックボックスを追加

// 単一セルにチェックボックスを設定
worksheet.cell('E2').setType({ type: 'checkbox' });

// 複数セルに一括設定
for (let row = 1; row <= 10; row++) {
  worksheet.cell(row, 4).setType({ type: 'checkbox' });
}

以上の機能はすべて無料版で利用できます。Pro版ではさらに以下の機能を提供しています。

• Excelファイル出力
• 高度な数式計算（関数利用）
• 高度なセルタイプ（セル内チャートやリンクなど）
• セルを固定する
• フィルターとソート
• シートとセルを保護する（読み取り専用モード）

その他の特徴

最適化された高速描画エンジン

表示領域のセルのみを描画するアルゴリズムにより、10,000行を超えるデータも滑らかに表示します。実測で 10万セル（1万行×10列）を約200ms（1セルあたり2μs） で初期化。他社製品に比べ約95倍の処理速度です（※弊社調べ）。

日本語・日本書式にネイティブ対応

日本の数値書式（¥1,234）・日付書式（yyyy年M月d日）・元号対応など、ローカライズではなくネイティブ実装で対応しています。

今後のロードマップ

今後の機能追加は以下を予定しています。

予定時期	内容
まもなく	条件付き書式
2026年夏	オンラインPDF生成対応
2026年秋	100以上のExcel関数対応
開発予定	AI機能（自然言語での操作・数式開発支援）
開発予定	データ・数式の自動補完

---

ReoGrid は.NETプラットフォーム向けのライブラリとして、最初の設計思想の段階から軽量かつ高性能であることを追求し、10年に渡って、その考えをしっかりと守りながら機能を追加し、成長してきました。

ユーザーからWeb版に対する多くの要望をいただいたことから、弊社は.NET版での設計思想を踏まえて、Web版をゼロからTypeScriptで開発してきました。ぜひ一度お試しください。フィードバックやご要望もお待ちしています。

• 製品サイト（日本語）: https://web.reogrid.net/jp
• デモギャラリー: https://web.reogrid.net/jp/demos
• npm: https://www.npmjs.com/package/@reogrid/lite