Hello Worldアプリの作成

このチュートリアルでは、Vega SDKのVS Code拡張機能であるVega Studioを使用して、初めてのVegaアプリを作成、ビルド、実行する手順を説明します。この例では、React Nativeアプリテンプレートに基づいてVegaProjectというアプリを作成し、Vega仮想デバイスで実行します。Vega仮想デバイスは、Vega SDKに付属するFire TV Stickシミュレーターです。 Vega CLIやその他のアプリテンプレートの使用など、すべてのビルドオプションを確認するには、アプリの作成を参照してください。

​

前提条件

• Vega SDKをインストールします。SDKには、アプリを作成、ビルド、実行するためのツールが含まれています。
• Visual Studio Codeを開くかダウンロード（英語のみ）します。

​

Hello Worldアプリの作成

​

手順1：Vegaテンプレートから新しいアプリを作成する

1. VS Codeで、アクティビティバーにあるVega拡張機能のアイコンをクリックします。
2. [+] アイコンをクリックして、新しいプロジェクトを作成します。
3. hello-worldテンプレート（React Native 0.72ベースのテンプレート）を選択します。
4. プロジェクトディレクトリを選択するか新しく作成し、そのディレクトリを開きます。
5. プロジェクトとパッケージに名前を付け、それぞれの名前の入力後にEnterキーを押します。この例では次の名前を使用しています。 アプリ名：VegaProject パッケージ名:com.myorg.VegaProject
6. ワークスペースのプロンプトが表示されます。ワークスペースに名前を付け、任意の場所に保存します。

​

手順2：アプリをテストモードでビルドする

1. Vega拡張機能で、ワークスペース内のVegaProjectを見つけて選択します。
2. ビルドモードを [Debug] に設定します。これにより、高速リフレッシュがデフォルトで有効になるため、アプリに保存した変更はすべてリアルタイムでアプリに反映されます。
3. VegaProjectの横にあるビルドボタンをクリックします。
4. VS Codeの [出力] タブで、ビルドの成功メッセージを確認します。
   2025-12-16 15:07:44.151 [info] [native-build] kepler ktbuild exited with code 0
   2025-12-16 15:07:44.198 [info] info build-kepler completed
   

​

手順3：Vega仮想デバイス（VVD）で実行する

VegaのFire TV StickシミュレーターであるVega仮想デバイス（VVD）で、アプリを実行します。

1. 拡張機能パネルの [Devices] で [VirtualDevice:Tv] を探し、その [Play] ボタンをクリックします。
2. VVDウィンドウが開くのを待ちます。
3. VegaProjectの横にある [Play] ボタンをクリックします。

アプリを実行すると、VVDにHello Worldアプリの内容が反映されます。 おめでとうございます！これで初めてのVegaアプリが正常に作成され、実行されました。App.tsx内のテキストの一部を変更して、実行中のアプリに変更がリアルタイムで反映されることを確認してください。

​

関連リソース

初めてのVegaアプリの作成が完了したら、次のリソースを活用して理解を深めてください。

• Vegaのサンプルアプリを使用してアプリ開発を加速させます。
• Vegaビデオアプリのチュートリアルを完了してください。チュートリアルでは、W3Cメディアプレーヤーを使用してビデオアプリを作成する手順を詳しく説明します。
• すべてのビルドオプションを確認し、ほかのテンプレートやネイティブモジュールを試します。
• ドキュメントでその他の開発オプションを確認します。

---