Univer - Web上でExcel/Word/PowerPointを実現する全部入りフレームワーク

はじめに

Web上でExcelライクなスプレッドシートを実装したいと思ったこと、ありませんか。

業務システムを作っていると、「ここはExcelみたいに操作できるようにしてほしい」という要望がかなりの頻度で出てくるんですよね。30代になって社内ツールの開発に関わることが増えてから、この手の要望と格闘する機会が本当に多くなりました。

Univerは、そんな要望に応えてくれるフルスタックフレームワークです。スプレッドシートだけでなく、ドキュメントやプレゼンテーションまでカバーしていて、ブラウザでもNode.jsでも動く。GitHub Starは約26,000。Apache License 2.0で公開されていて、商用利用も可能です。

Univerとは

Univerは「スプレッドシート、ドキュメント、プレゼンテーションの作成・編集に対応したフルスタックフレームワーク」です。

わかりやすく言うと、Webアプリケーションに本格的なオフィス機能を組み込むためのライブラリ。Google Sheetsのような表計算、Google Docsのようなドキュメント編集、Google Slidesのようなプレゼン作成を、自前のアプリに埋め込めます。

中国の dream-num 社が開発を主導していて、ドキュメントやUIは英語・中国語両対応。国際的に使われているライブラリです。

特徴・メリット

驚異的なパフォーマンス

Univerの最大の強みは、独自開発のCanvasベースレンダリングエンジンによる高パフォーマンスです。

数千万セルを扱えるスプレッドシート、100万文字を処理できるドキュメント。サーバーサイド計算では、単一シートで200万を超える数式に対応しています。

業務システムで大量データを扱うケースでも、パフォーマンス面での心配はほぼ不要。これは正直すごいなと。

500以上の関数をサポート

スプレッドシート機能では、500以上の数式関数をサポートしています。Excelでおなじみの関数はほぼ網羅されていると思っていい。

41種類のセル形式、18種類の条件付き書式、20種類以上のグラフ。機能面では本家Excelに引けを取らないレベルです。

リアルタイム協調編集

最大200人の同時編集、1000人の同時閲覧に対応しています。OT（Operational Transformation）アルゴリズムで編集の競合を解決する仕組み。

Google Docsのようなリアルタイムコラボレーション機能を、自社アプリに組み込める。これができると、社内ツールの使い勝手が格段に上がりますね。

プラグインアーキテクチャ

100個以上の組み込みプラグインがあり、レゴブロックのように必要な機能を組み合わせられます。

全部入りで重くなるのではなく、必要な機能だけを選んでバンドルできる設計。アプリのサイズを最適化しつつ、必要十分な機能を実現できます。

ブラウザ・サーバー両対応

同一のAPIでブラウザとNode.js両方で動作します。

フロントエンドで表示するのはもちろん、サーバーサイドでExcelファイルを処理したり、バッチで帳票を生成したりといったユースケースにも対応できる。この「isomorphic」な設計は、実務では地味にありがたいですね。

XLSX対応

Excelファイルのインポートとエクスポートもサポートしています。既存のExcelファイルを読み込んで編集し、またExcel形式で出力する、という業務フローに対応できます。

インストール方法

Univerには「プリセットモード」と「プラグインモード」の2つの導入方法があります。

プリセットモード（推奨）

まずはこちらから試すのがおすすめです。必要な機能がパッケージ化されていて、セットアップが簡単。

# npm
npm install @univerjs/presets @univerjs/preset-sheets-core

# pnpm
pnpm add @univerjs/presets @univerjs/preset-sheets-core

# yarn
yarn add @univerjs/presets @univerjs/preset-sheets-core

プラグインモード

より細かい制御が必要な場合はこちら。個別のプラグインを組み合わせて構成します。

npm install @univerjs/core @univerjs/sheets @univerjs/sheets-ui \
  @univerjs/engine-formula @univerjs/engine-render \
  @univerjs/design @univerjs/ui

依存関係の管理が必要になりますが、バンドルサイズを最小限に抑えたい場合に有効です。

基本的な使い方

プリセットモードでの実装例

最小限のコードでスプレッドシートを表示できます。

import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import { createUniver, LocaleType } from '@univerjs/presets'
import '@univerjs/preset-sheets-core/lib/index.css'

// Univerインスタンスの作成
const { univer, univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  presets: [
    UniverSheetsCorePreset({
      container: 'app'  // 表示先のDOM要素ID
    })
  ],
})

// 空のワークブックを作成
univerAPI.createWorkbook({})

HTMLは以下のような感じです。

<!DOCTYPE html>
<html>
<head>
  <title>Univer Demo</title>
  <style>
    #app {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./main.ts"></script>
</body>
</html>

初期データの設定

空のワークブックではなく、データを持った状態で表示する場合はこうなります。

univerAPI.createWorkbook({
  id: 'workbook-01',
  locale: LocaleType.EN_US,
  name: '売上データ',
  sheetOrder: ['sheet-01'],
  sheets: {
    'sheet-01': {
      id: 'sheet-01',
      name: '2024年度',
      rowCount: 100,
      columnCount: 20,
      cellData: {
        0: {
          0: { v: '商品名' },
          1: { v: '売上' },
          2: { v: '単価' },
        },
        1: {
          0: { v: '商品A' },
          1: { v: 10000 },
          2: { v: 500 },
        },
        2: {
          0: { v: '商品B' },
          1: { v: 15000 },
          2: { v: 750 },
        },
      },
    },
  },
})

Facade APIでのデータ操作

Univerでは、データの変更はすべてコマンドまたはFacade APIを通じて行います。これによりUndo/Redo機能が自動的に動作します。

// アクティブなワークブックを取得
const workbook = univerAPI.getActiveWorkbook()

// シートを取得
const sheet = workbook.getActiveSheet()

// セルに値をセット
const range = sheet.getRange('A1:B2')
range.setValues([
  ['名前', '年齢'],
  ['田中', 30]
])

// セルの値を取得
const cellValue = sheet.getRange('A1').getValue()
console.log(cellValue) // '名前'

実践的なユースケース

社内の業務システムへの組み込み

ERPやCRMに表計算機能を組み込むケース。

従来なら「Excelで作業してからインポート」という運用になりがちですが、Univerを使えばシステム内で直接データを編集できます。ユーザーが慣れ親しんだExcelライクなUIで操作できるのは、導入のハードルを下げてくれます。

ノーコード/ローコードプラットフォーム

ノーコードツールにスプレッドシート機能を追加するケース。

プラグインアーキテクチャのおかげで、必要な機能だけを選んで組み込める。カスタムの入力フォームより、スプレッドシートの方が柔軟に対応できることも多いですね。

帳票生成システム

サーバーサイドでExcelファイルを生成するケース。

Node.jsで動作するので、テンプレートを用意しておいて、データベースから取得したデータを流し込んでExcel出力、といった処理が実装できます。

オンライン学習プラットフォーム

数式の練習問題を出すような教育系アプリ。

500以上の関数をサポートしているので、Excel講座のような学習コンテンツにも使えます。リアルタイム協調編集を活かして、講師と受講生が同じシートを見ながら操作する、といった使い方も。

注意点

バージョン管理

公式ドキュメントにも書かれていますが、「すべての依存関係のバージョンを揃える」ことが重要です。プリセット内に含まれるプラグインを個別にインポートすると、競合が起きる可能性があります。

学習コスト

多機能なだけに、使いこなすまでにそれなりの学習コストがかかります。まずはプリセットモードで基本的な使い方を把握してから、徐々にカスタマイズしていくのがおすすめです。

ドキュメントの言語

英語と中国語のドキュメントが充実しています。日本語のドキュメントは現状見当たらないので、英語ドキュメントを読む必要があります。

まとめ

Univerは、Web上で本格的なオフィス機能を実現したいときの有力な選択肢です。

数千万セル対応の高パフォーマンス
500以上の数式関数
リアルタイム協調編集（200人同時編集）
プラグインアーキテクチャによる柔軟なカスタマイズ
ブラウザ・サーバー両対応
Apache License 2.0で商用利用可能

「Excelみたいな画面がほしい」という要望に対して、これまではHandsontableやAG Gridといった選択肢がありましたが、Univerはより本格的なオフィススイートの機能を提供してくれます。

個人的には、協調編集機能とサーバーサイド処理の両方に対応しているのがポイント高いと感じています。社内ツールの開発で「スプレッドシート機能を入れたい」となったとき、検討リストに入れておいて損はないライブラリですね。

公式サイト: https://univer.ai GitHub: https://github.com/dream-num/univer ドキュメント: https://docs.univer.ai/en-US