Tencent/omi

これは何？

主な機能

• 01@tagデコレーターでカスタム要素を定義し、JSXでレンダリングできます。
• 02Signalベースのリアクティビティにより、値が変更された箇所に依存するUIだけを更新します。
• 03コアフレームワークには関数コンポーネント、Suspense、ディレクティブが含まれています。
• 04コンポーネントのスタイル管理と共有にConstructable Stylesheetsを利用できます。
• 05ルーター、フォーム、UIコンポーネントの公式パッケージを提供しています。
• 06omi-cliでViteベースのTypeScriptまたはJavaScriptプロジェクトをスキャフォールディングできます。

ユースケース

• Vue、React、通常のHTMLなど、さまざまな環境で使える再利用可能なUIコンポーネントの構築。
• 提供されているテンプレートを使った、ルーティング、Signal、Tailwind CSSを備えるシングルページアプリの作成。
• omi-formパッケージを使った、フォーム中心のインターフェースの構築。

クイックスタート

1. 1

   npmでomiパッケージをインストールする

   npm i omi
2. 2

   Omi + Vite + TSの新しいプロジェクトを作成する

   npx omi-cli init my-app
3. 3

   プロジェクトフォルダーに移動する

   cd my-app
4. 4

   開発サーバーを起動する

   npm start

使う前に知っておきたいこと

• !リポジトリのメタデータでは認識済みライセンスがない（NOASSERTION）と報告されていますが、READMEにはMITと記載されています。使用前にライセンスファイルを確認してください。

トピック

よくある質問

omi とは？

Omiは、JSX、Signalベースのリアクティビティ、ルーター、Tailwind対応を備え、再利用可能なカスタム要素の構築を目指すWeb Componentsフレームワークです。 Omiは、ブラウザー標準のカスタム要素仕様であるWeb Componentsを構築するためのフレームワークです。コンポーネントは@tag('counter-demo')のようなデコレーターで定義し、JSXでレンダリングします。そのため、カスタム要素が使える通常のHTML、Vue、Reactなど、さまざまな環境で利用できます。

omi は無料で使えますか？ライセンスは？

omi は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

omi は今もメンテナンスされていますか？

活発にメンテナンス中。omi の最終コミットは 2026年10月10日 です。

omi は何に使えますか？

Vue、React、通常のHTMLなど、さまざまな環境で使える再利用可能なUIコンポーネントの構築。 提供されているテンプレートを使った、ルーティング、Signal、Tailwind CSSを備えるシングルページアプリの作成。 omi-formパッケージを使った、フォーム中心のインターフェースの構築。

omi のインストール方法は？

npmでomiパッケージをインストールする: npm i omi Omi + Vite + TSの新しいプロジェクトを作成する: npx omi-cli init my-app プロジェクトフォルダーに移動する: cd my-app 開発サーバーを起動する: npm start

omi はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Tencent/omi