Web SDK

インストールと基本的な使い方

この章では、Univer Bases のインストール方法と基本的な使い方を説明します。Bases は Univer Office SDK 製品として提供されており、現在はプラグインモードを使用します。

Univer の中心的な概念に馴染みがない場合は、先にクイックスタートをお読みください。

Univer にはプリセットモードとプラグインモードの 2 つの導入方法があります。プリセットモードは構成済みのプラグインをまとめて読み込むため、簡単に導入できます。高度なカスタマイズや拡張が必要な場合は、プラグインを個別に組み合わせて設定できるプラグインモードを推奨します。

プラグインモードでのセットアップ

ブラウザー向けの Bases アプリケーションでは、通常、共通の Univer ランタイム、レンダリングエンジン、UI シェル、数式エンジン、ライセンスを登録してから、Bases のモデルプラグインと UI プラグインを登録します。

パッケージマネージャーの使用

ES Modules と package.json の exports フィールドに対応したビルドツールを使用してください。

インストール

Univer は UI に React、データストリームに RxJS を使用し、Vue や Angular アプリにも組み込めます。peer dependencies1 の react、react-dom、rxjs がインストールされていることを確認してください。以下の Yarn コマンドにはこれらを明示的に含めています。

すべての @univerjs/* と @univerjs-pro/* パッケージのバージョンを揃えてください。

Shell
pnpm add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/ui @univerjs-pro/bases @univerjs-pro/bases-ui @univerjs-pro/engine-formula @univerjs-pro/license

使い方

Univer の初期化前にコンテナーを作成し、高さを指定してください：

HTML
<div id="app" style="height: 600px"></div>

FUniver.newAPI(univer) を呼び出す前に、以下の例で使用する facade エントリーをインポートしてください。CSS は @univerjs/design、@univerjs/ui、製品 CSS の順にインポートします。

注意

  • Bases プラグインより先に UniverLicensePlugin を登録してください。
  • 製品固有の UI CSS より先に、共通の UI CSS をインポートしてください。
  • Bases（ダッシュボードの図形を含む）には、@univerjs-pro/engine-formula の UniverProFormulaEnginePlugin を使用します。同じ Univer インスタンスで複数の製品を組み合わせる場合は、既存の UniverFormulaEnginePlugin のインポートと登録を置き換え、両方の数式エンジンを登録しないでください。

  1. スタイル、ロケールパック、必要なプラグインをインポートします。

    TypeScript
    import { UniverBasesPlugin } from '@univerjs-pro/bases'import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'import BasesUIEnUS from '@univerjs-pro/bases-ui/locale/en-US'import BasesEnUS from '@univerjs-pro/bases/locale/en-US'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/bases-ui/lib/index.css'

  2. Facade API2 を使用する場合は、Facade のエントリをインポートします。

    TypeScript
    import { FUniver } from '@univerjs/core/facade'import '@univerjs-pro/bases/facade'import '@univerjs-pro/bases-ui/facade'

  3. Univer インスタンスを作成してプラグインを登録し、Base ユニットを作成します。

    TypeScript
    const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DesignEnUS,      UIEnUS,      BasesEnUS,      BasesUIEnUS,    ),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverBasesPlugin)univer.registerPlugin(UniverBasesUIPlugin)univer.createUnit(UniverInstanceType.UNIVER_BASE, {})const univerAPI = FUniver.newAPI(univer)

univer.registerPlugin と univer.registerPlugins メソッド

univer.registerPlugin メソッドは、Univer インスタンスにプラグインを登録するために使用されます。Univer インスタンスを作成した後、このメソッドを呼び出してプラグインを登録できます。

univer.registerPlugin(Plugin, options) メソッドを使用してプラグインを登録できます。ここで Plugin は登録するプラグイン、options はオプションの設定項目で、各プラグインは異なる設定項目を持つ場合があります。

univer.registerPlugins に配列を渡して複数のプラグインを一度に登録することも可能です。これは、プラグインを一元管理する必要があるシナリオで便利です。

TypeScript
univer.registerPlugins([  UniverRenderEnginePlugin,  [UniverUIPlugin, { container: 'app' }],  UniverProFormulaEnginePlugin,  [UniverLicensePlugin, {    license: process.env.CLIENT_LICENSE_TEXT,  }],  UniverBasesPlugin,  UniverBasesUIPlugin,])

モバイル対応

現在の @univerjs-pro/bases-ui は独立したモバイル UI プラグインをエクスポートしていません。存在しない MobileUIPlugin や mobile: true オプションを使わないでください。狭いコンテナーだけではタッチ操作の完全な対応を確認できません。対象端末で既存 UI を検証してください。

その他のリリース

安定版リリースに加えて、Univer は alpha/beta および nightly チャンネルも提供しています。これらのバージョンでは、まだ正式にリリースされていない最新機能に早期にアクセスできます。ただし、機能が多いということはリスクも多いということを覚えておいてください。これらのバージョンにはバグ、不完全な機能、または不安定な機能が含まれている可能性があります。可能な限り、本番環境でのこれらのバージョンの使用は避けてください。

Alpha/Beta リリース

Univer 開発チームが新機能や重要な変更を完了すると、alpha または beta チャンネルにプレリリースすることがあります。以下のコマンドを使用して Univer パッケージの alpha/beta バージョンをインストールできます：

Shell
pnpm add @univerjs-pro/bases@alpha # Alpha バージョン
pnpm add @univerjs-pro/bases@beta # Beta バージョン

alpha/beta バージョンを使用中に問題が発生したり、フィードバックがある場合は、GitHub Issues から Univer 開発チームに報告してください。

これらの早期リリースについてのフィードバックを歓迎します。

次のステップ

Footnotes

  1. peerDependencies は、ホストアプリケーションが互換性のあるバージョンを用意する依存パッケージです。Univer とアプリケーションが React などのライブラリを共有できます。 ↩

  2. Facade は、登録済みプラグインの機能をアプリケーションから操作する API です。Facade のエントリをインポートすると API メソッドが追加されますが、機能プラグイン自体は登録されません。 ↩

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.