Hello Worldアプリの作成

このチュートリアルでは、Vega SDKのVS Code拡張機能であるVega Studioを使用して、初めてのVegaアプリを作成、ビルド、実行する手順を説明します。この例では、React Nativeアプリテンプレートに基づいてVegaProjectというアプリを作成します。このアプリは、Vega SDKに含まれるシミュレートされたFire TV StickであるVega仮想デバイスで動作します。 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] を選択し、再生ボタンをクリックします。
2. VVDウィンドウが開くのを待ちます。
3. VegaProjectの横にある [Play] ボタンをクリックします。

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

​

関連リソース

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

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

---