TinyVueの設計とVue 2・Vue 3対応を読む
プロジェクト概要：TinyVue は、OpenTiny コミュニティのエンタープライズ クラスの UI コンポーネント ライブラリであり、Vue.js 2 と Vue.js 3 の両方、および PC とモバイルをサポートします。
ひと目でわかる
- これは何？
- opentiny/tiny-vueは、PCとモバイル、Vue 2とVue 3を一つのコードベースで扱うことを掲げるUIコンポーネントライブラリです。
- 誰に向いている？
- TinyVueは、Vue 2とVue 3をまたぐ画面を管理し、PCとモバイルでコンポーネントの扱いを揃えたいチームに検討余地があります。READMEは104個のコンポーネント、レンダーレス設計、関連ライブラリ、tiny-vue-skillの導入方法を説明していますが、ブラウザ対応表、ベンチマーク、セキュリティ認証までは示していません。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 1 日前です。
- 何の言語で書かれている？
- 主に Less です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月17日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
一つのライブラリで二つのVue世代を扱う
TinyVueはOpenTinyコミュニティのUIコンポーネントライブラリです。READMEとリポジトリの説明では、Vue.js 2とVue.js 3、PCとモバイルをそれぞれ一つのコードで扱う方針が示されています。READMEに載るコンポーネントは104個です。ボタン、入力、レイアウトなど、業務画面で繰り返し使う部品をまとめて採用したい場合に、まず候補に入る構成です。
ただし、「ワンコード」が実際のプロジェクトでどこまで同じになるかは、既存のVue API、ビルド設定、スタイル上書きによって変わります。READMEは国際化、テーマのカスタマイズ、設定駆動型の部品、ローコード利用にも触れていますが、各機能のブラウザ別の制約や移行手順を網羅してはいません。Vue 2とVue 3の両方を残す必要があるチームほど、同じ部品を二つの版で表示して差分を記録するべきです。特にフォームとポップアップは利用者の操作結果に直結するため、見た目だけでなくフォーカス移動、キーボード操作、検証メッセージを比べます。
レンダーレスを軸にした部品の分離
TinyVueの設計説明では、見た目と振る舞いを切り離すレンダーレスの考え方が紹介されています。READMEは、これによりエンドやフレームワークをまたいだ再利用を目指すと説明します。利用者がそのまま画面に置ける部品だけでなく、状態管理や操作のロジックを別の見た目へつなぐ余地を持つ設計です。
クレジットには、ElementのコンポーネントAPIとの互換性、Floating UIを使うツールチップやドロップダウン、vxe-tableを基にしたGrid、Sortableを使う並べ替えが挙げられています。これらは依存関係と設計の出所を知る手掛かりです。個々の実装が互換ライブラリと同じ制約で動くことまで意味しないため、ポップアップの位置計算、表の大量行、ドラッグ操作を実画面で確かめます。
tiny-vue-skillが担う開発者支援
READMEにはtiny-vue-skillというAIコーディングアシスタント向けのスキルも紹介されています。TinyVueの使い方、API、ベストプラクティスをAIに理解させるための補助ツールという位置づけです。例として、npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursorが示されています。--agentの値は利用するツールに合わせて変更できます。
対応表にはAmp、Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilotなどが含まれます。ここで確認できるのは導入入口と対象ツールであり、スキルが生成するコードの正確さ、参照するAPI版、社内コンポーネントとの相性を保証する説明ではありません。AIに画面を作らせる場合は、生成結果を手動で型検査し、Vue 2向けとVue 3向けのビルドを別々に通す運用が必要です。
Vue 2とVue 3の導入差分
Vue 3ではnpm i @opentiny/vue@3、Vue 2ではnpm i @opentiny/vue@2を使う手順がREADMEにあります。インストール後は、App.vueでimport { Button as TinyButton } from '@opentiny/vue'のように読み込み、<tiny-button>として使用する例が示されています。TypeScriptのsetup構文を使ったサンプルなので、プロジェクトのビルド方式に合わせて組み込む必要があります。
ローカル開発では、リポジトリを取得してpnpm iを実行し、Vue 3はpnpm dev、Vue 2はpnpm dev2で起動します。READMEのローカルURLはhttp://127.0.0.1:7130/です。依存パッケージの解決結果を保存し、二つの開発コマンドが同時に同じポートを使わないか、既存のテーマ設定が上書きされないかを確認するのが初回作業になります。Vue 2とVue 3を同じ開発機で切り替える場合は、起動中のプロセスと読み込まれる版を確認し、誤った版の画面を評価しないようにします。
コミュニティ、開発状態、文書の空白
TinyVueのREADMEは、コントリビューションガイド、公式WeChatアシスタントopentiny-official、メーリングリストopentiny@googlegroups.comを案内しています。コントリビューターは少なくとも一つのプルリクエストがマージされたコミュニティメンバーとして説明されています。開発者が変更を戻す経路は用意されていますが、問題の応答時間や各コンポーネントの保守担当まではREADMEに書かれていません。
メタデータでは、主な言語はLess、既定ブランチはdev、ライセンスはMITです。取得時点のstarは資料内で2万前後の規模ですが、数値は変動するため評価の中心には置きません。ブラウザ対応一覧、性能測定、セキュリティ認証はREADMEで確認できません。採用資料では、必要な部品、対象ブラウザ、版の更新頻度を自分たちの検証項目として残してください。
MITライセンスが許すことと許さないこと
TinyVueのライセンスはMITで、著作権者としてTinyVue AuthorsとHuawei Cloud Computing Technologies Co., Ltd.が記載されています。表示と許諾文を保持することを条件に、使用、複製、改変、統合、公開、配布、再許諾、販売が認められます。ソフトウェアは現状のまま提供され、ライセンスは安全性、サポート、本番適合性を保証しません。
導入対象は、共通UIを一つのリポジトリで管理し、Vue世代の違いを検証できるチームです。すでに片方のVueだけで構成され、互換性を増やす理由がない場合は、104部品という数だけで乗り換える必要はありません。最初にButton、入力、ポップアップ、表など実際に使う部品を各版で表示し、テーマ、アクセシビリティ、ビルド成果物を確認したうえで範囲を広げてください。
部品を採用する順序を決める
104個の部品を最初から一度に評価すると、互換性の問題がどこで起きたか分かりにくくなります。まずButtonと入力を使う画面を作り、Vue 2とVue 3でイベント、型、検証表示を比べます。次にポップアップとGridを追加し、キーボード操作、スクロール、並べ替えの結果を確認します。
テーマを変更する場合は、標準色から社内の色へ置き換えた状態をスクリーンショットとCSSで保存します。レンダーレス設計やFloating UIなどの説明は選定理由になりますが、実際の問題を隠すものではありません。各部品の採用版、依存版、未解決の差分を一覧にすれば、更新時に再確認する対象が明確になります。
編集部の結論
TinyVueは、Vue 2とVue 3をまたぐ画面を管理し、PCとモバイルでコンポーネントの扱いを揃えたいチームに検討余地があります。READMEは104個のコンポーネント、レンダーレス設計、関連ライブラリ、tiny-vue-skillの導入方法を説明していますが、ブラウザ対応表、ベンチマーク、セキュリティ認証までは示していません。既存画面の主要部品を移植して、版ごとの挙動を確認してから採用範囲を決めてください。
コミュニティノート