vega-multi-tv-migration

Vega マルチプラットフォームへの移行

概要

Vega OS（Fire TV）アプリをマルチプラットフォームの React Native モノレポに移行し、Android TV、Apple TV、Vega OS 間でコードの 70～85％を再利用します。

適用するタイミング

ユーザーが次の内容に言及した場合、このスキルを使用します。

• Vega／Fire TV アプリを他のプラットフォームに移行する
• マルチプラットフォームの TV アプリケーションを構築する
• 単一プラットフォーム向けの TV アプリをモノレポに変換する
• Android TV または Apple TV のサポートを追加する
• TV プラットフォーム間でコードを共有する
• TV アプリ向けに Yarn ワークスペースを設定する

フェーズの優先度ガイド

優先度	フェーズ	影響度	使用するタイミング
1	分析	重大	移行の開始時、既存の分析がない場合
2	実装	重大	分析が完了し、モノレポ構成が必要な場合
3	プラットフォームのサポート	高	Vega のモノレポが稼働しており、プラットフォームを追加する場合
4	設定	中	ビルドや解決に関する問題のトラブルシューティング

クイック意思決定ツリー

User has existing Vega app?
├─ YES → Do they have migration analysis?
│  ├─ NO → Start Phase 1 (Analysis)
│  └─ YES → Is monorepo set up?
│     ├─ NO → Start Phase 2 (Implementation)
│     └─ YES → Start Phase 3 (Platform Support)
└─ NO → Starting from scratch?
   └─ YES → Skip Phase 1, start Phase 2 with new project

クイックリファレンス

重大：プロジェクト構成

# Verify monorepo structure exists
ls -la packages/shared packages/vega packages/expotv

# Check Yarn workspaces configured
grep -A5 "workspaces:" package.json

重大：依存関係の分類

分析における一般的なパターン：

• 共有：ビジネスロジック、UI コンポーネント、ユーティリティ、状態管理
• プラットフォーム固有：ナビゲーション、動画プレーヤー、DRM、ネイティブモジュール
• VMRP 互換：Vega の同等機能にマッピングされる標準的な RN ライブラリ

高：VMRP の設定

VMRP が動作しているかをすばやく確認します。

# Should see @vega-tv/react-native-module-resolver-preset
grep "vmrp" packages/vega/babel.config.js

参考資料

フェーズ 1：分析（analysis-*）

ファイル	影響度	説明
PHASE1_ANALYSIS.md	重大	コードベースの分析、依存関係の分類、移行計画

使用するタイミング：移行を開始するとき、既存の分析ドキュメントがない場合

フェーズ 2：実装（impl-*）

ファイル	影響度	説明
PHASE2_IMPLEMENTATION.md	重大	モノレポのひな形作成、コードの移行、テンプレートを参照した VMRP のセットアップ

使用するタイミング：分析が完了し、モノレポ構成を構築する準備ができた場合

フェーズ 3：プラットフォームのサポート（platform-*）

ファイル	影響度	説明
PHASE3_PLATFORM_SUPPORT.md	高	Android TV と Apple TV の実装

使用するタイミング：Vega のモノレポが稼働しており、新しいプラットフォームを追加する場合

テンプレート

すべての設定テンプレートは assets/templates/ にあり、各テンプレートには対応する .md ドキュメントがあります。

• root-package.json - Yarn ワークスペースのセットアップ
• root-tsconfig.json - TypeScript のプロジェクト参照
• yarnrc.yml - 依存関係の重複排除（重大）
• shared-package.json + .md - ルール付きの共有パッケージ設定
• vega-metro.config.js - モノレポ解決機能を備えた Vega Metro
• expotv-package.json + .md - Expo TV パッケージの設定
• expotv-app.json + .md - プラグインを含む Expo TV の設定
• expotv-metro.config.js - TV 拡張機能を備えた Expo Metro

問題 → スキル対応表

問題	最初に参照するもの
既存の Vega アプリを分析する必要がある	PHASE1_ANALYSIS.md
分析が完了し、モノレポのセットアップが必要	PHASE2_IMPLEMENTATION.md → テンプレート
モノレポがあり、Android TV を追加する	PHASE3_PLATFORM_SUPPORT.md
Metro の解決エラー	PHASE2_IMPLEMENTATION.md → Metro 設定
React のバージョンが重複している	PHASE2_IMPLEMENTATION.md → .yarnrc.yml
VMRP がインポートをマッピングしない	PHASE2_IMPLEMENTATION.md → VMRP セクション
TypeScript のパスエラー	PHASE2_IMPLEMENTATION.md → TypeScript 設定
ネイティブモジュールの統合	PHASE3_PLATFORM_SUPPORT.md → ネイティブモジュール
ビルド設定の問題	PHASE2_IMPLEMENTATION.md → 設定ファイル
ゼロから開始する	PHASE2_IMPLEMENTATION.md（フェーズ 1 を省略）

ワークフロー

1. 上記の判断ツリーを使って開始フェーズを決定します
2. そのフェーズに適したリファレンスファイルを読み込みます
3. 各リファレンスの「クイックスタート → 詳細解説」の流れに従います
4. 次のフェーズに進む前に、各フェーズのチェックポイントで確認します
5. 網羅的な確認には VALIDATION_CHECKLIST.md を使用します

クレジット

Vega OS のマルチプラットフォーム移行パターンと React Native のモノレポのベストプラクティスに基づいています。