React Native が Meta Quest に対応

React Native は常に、プラットフォームをまたいで開発者が知識を再利用できることに注力してきました。Android と iOS から始まった取り組みは、Apple TV、Windows、macOS、さらには react-strict-dom を使ったウェブへと拡張してきました。2021 年の Many Platform Vision 投稿では、エコシステムを分断することなく新しいデバイスやフォームファクタに適応できる将来像が示されました。React Conf 2025 では、そのビジョンに向けたもうひとつの一歩として、Meta Quest デバイス向けの公式な React Native サポートを発表しました。

この記事では、Meta Quest 上での React Native の始め方、現時点で動作する内容、そして開発者が馴染みのあるツールやパターンを使って VR アプリを構築・公開する方法に焦点を当てます。

ハイライト

• React Native on Meta Quest の概要
• Meta Quest での始め方
• 開発ビルドとネイティブ機能の扱い
• モバイルとのプラットフォーム固有のセットアップと差分
• VR におけるデザインと UX の考慮点

React Native on Meta Quest

Meta Quest デバイスは Android ベースの Meta Horizon OS を実行しています。React Native の観点では、既存の Android ツールチェーン、ビルドシステム、デバッグワークフローが最小限の変更で動作するということを意味します。既に Android 向けに React Native アプリを開発している開発者にとって、多くの開発モデルはそのまま持ち越せます。

新しいランタイムや開発モデルを導入するのではなく、Meta Quest は同じ Android 基盤を利用し、React Native の既存抽象化に統合されます。これにより、プラットフォーム固有の機能を追加してもフレームワークが分断されず、別の開発手法を強要されることもありません。

Getting started on Meta Quest

このセクションでは、Expo Go から始めて開発ビルドやプラットフォーム固有の設定へと進む、Meta Quest 上での基本的な開発ワークフローを説明します。

ステップバイステップ: Expo アプリを Meta Quest で実行する

Meta Quest で Expo アプリを実行するには、標準の Expo プロジェクトを作成し、dev サーバを起動してヘッドセット上の Expo Go でアプリを開きます。Meta Horizon OS 固有の要件がいくつかありますが、ワークフローは Android と同じです。

• ヘッドセットに Expo Go をインストールする

  Expo Go は Meta Horizon Store で入手可能で、Meta Quest デバイスに直接インストールできます。開発中の高速な反復に使います。

• Expo プロジェクトを作成（または既存プロジェクトを使用）

  新規で始める場合は標準の Expo アプリを作成します。特別なテンプレートは不要です。

  npx create-expo-app@latest my-quest-app cd my-quest-app

• dev サーバを起動する

  npx expo start

• Expo Go を使って Quest と接続する

  ヘッドセット上で Expo Go を開き、Expo CLI が表示する QR コードをヘッドセットのカメラでスキャンします。アプリはデバイス上の新しいウィンドウで起動し、ライブリロードと高速な反復が可能です。

• 通常どおり反復する

  コード変更はデバイスに即時反映され、Android や iOS と同じ編集→リフレッシュのサイクルで開発できます。

Development builds とネイティブ機能

Expo Go は初期開発や UI 作業には十分です。ネイティブモジュールへのアクセスやより深いプラットフォーム統合が必要な場合は、開発ビルドを使います。これらのビルドは標準の Expo 開発ビルドワークフローに従い、Quest デバイス上で直接実行されます。

プラットフォーム固有のセットアップとモバイルとの違い

全体のワークフローは同じですが、Meta Quest ではいくつかのプラットフォーム固有の調整が必要です。

Meta Horizon OS 向けのプロジェクト設定

Meta Quest アプリは正しく動作し、ストア申請対象とするために特定要件を満たす必要があります。これには Android 固有の設定、product flavors、アプリケーションメタデータが含まれます。Expo にはビルド時にこれらの要件を適用するプラグインが提供されています。

expo-horizon-core をインストールし、app.json または app.config.js に追加します：

{
  "expo": {
    "plugins": [
      [
        "expo-horizon-core",
        {
          "horizonAppId": "your-horizon-app-id",
          "defaultHeight": "640dp",
          "defaultWidth": "1024dp",
          "supportedDevices": "quest2|quest3|quest3s",
          "disableVrHeadtracking": false,
          "allowBackup": false
        }
      ]
    ]
  }
}

また、orientation の値を次のように変更します：

{ ... "orientation": "default", ... }

package.json に Quest 用のスクリプトを追加します：

{
  "scripts": {
    "android": "expo run:android --variant mobileDebug",
    "quest": "expo run:android --variant questDebug",
    "android:release": "expo run:android --variant mobileRelease",
    "quest:release": "expo run:android --variant questRelease"
  }
}

Expo を使わない React Native の場合

Expo は Meta Quest で始める最も簡単な方法ですが、フレームワークを使わずにビルドすることも可能で、必要な Meta Horizon OS 設定を直接 Android プロジェクトに適用できます。最低限必要な作業例は次のとおりです：

• android/app/build.gradle に Meta Quest 専用の build flavor を作成する
• horizonAppId を設定する
• Android マニフェストにデフォルトのパネルサイズを定義する
• サポートするデバイスを宣言する（例: quest2|quest3|quest3s）
• 禁止されている権限を削除する
• 最低サポート Android SDK バージョンを調整する
• isHorizonDevice() や isHorizonBuild() のようなランタイムチェックを追加する

完全な変更セットは、expo-horizon-core プラグインの実装を参照して手動で再現できます。

Google Play Services なしの Android

Meta Horizon OS は Android Open Source Project (AOSP) を基にしており、Google のプロプライエタリサービスは含まれていません。開発面では標準の Android API 上でアプリが動作しますが、Play Services や Play Store 固有の統合にはアクセスできません。Meta Quest をターゲットにする場合は、Google サービスへの直接依存を避けるか、必要に応じてプラットフォーム固有の代替手段を用意してください。サポートされない依存関係のリストは Meta Horizon OS ドキュメントで確認できます。

権限とデバイス機能

携帯電話で一般的な Android 権限やハードウェア前提は、VR ヘッドセットでは当てはまらないことがあります。SMS のようなセルラ機能、GPS のようなセンサー、一部の制限された権限は利用できないか禁止されています。プロジェクトはこれらの差異をセットアップ時に明示的に考慮する必要があります。

ライブラリ互換性の評価

ほとんどの React Native ライブラリは Meta Quest で動作しますが、互換性はライブラリがプラットフォームについてどのような前提を持っているかに依存します。特に、モバイル専用ハードウェア、タッチ入力、あるいは Horizon OS 上で利用できないサービスを前提とするライブラリは適応が必要です。一般的な指針は次の通りです：

• 標準的な React Native および Android API のみを利用する自己完結型のライブラリは、通常そのまま動作します。
• タッチのみの入力、モバイル専用ハードウェア、Google Mobile Services を前提とするライブラリは、適応または条件付き利用が必要です。
• 制限された権限や利用不可のデバイス機能に依存するライブラリはサポートされません。

位置情報や通知など一部の一般的なユースケースに対しては、Expo が Meta Horizon OS 向けの代替実装を提供しています。他のライブラリは依存関係によってはそのまま動作するか、プラットフォーム固有の処理が必要になります。

プラットフォーム判定のコードパス

Meta Quest と他プラットフォームの両方をターゲットにするアプリは、プラットフォーム固有の挙動をガードする必要があります。Meta Horizon OS は、アプリが Quest デバイス上で動作しているかを判定するランタイムユーティリティを提供しており、必要に応じて未サポート機能を無効化したり置き換えたりできます。

import ExpoHorizon from 'expo-horizon-core';
// Check if running on a Horizon device
if (ExpoHorizon.isHorizonDevice) {
  console.log('Running on Meta Horizon OS!');
}
// Check if this is a Horizon build
if (ExpoHorizon.isHorizonBuild) {
  console.log('This is a Horizon build variant');
}
// Access the Horizon App ID
const appId = ExpoHorizon.horizonAppId;
console.log('Horizon App ID:', appId ?? 'Not configured');

VR におけるデザインと UX の考慮点

ヘッドマウントディスプレイ向けのデザインは、タッチベースのモバイルデバイスとは異なる制約をもたらします。インターフェースは距離を置いて表示され、空間内にレンダリングされ、より多様な入力方法で操作されます。一般的に、UI 要素はより大きなヒットターゲット、広めの間隔、距離変化に応じて可読性を保てるタイポグラフィを必要とします。

これらの課題は、リサイズ可能なウィンドウで動作しレイアウトを動的に適応させるデスクトップ、タブレット、フォルダブル機器と類似しています。

Meta Quest と Android モバイルの主な違いのひとつは入力です。タッチに主に依存する代わりに、Meta Quest アプリはコントローラ、ハンドトラッキング、（オプションで）マウスやキーボードで操作されることが一般的です。コントローラはポインタデバイスに近い振る舞いをするため、ホバーやフォーカスベースのナビゲーションといった、ウェブやデスクトップに近いインタラクションパターンが導入されます。

React Native のイベントシステムとコンポーネントモデルはこれらのインタラクションパターンをサポートできますが、アプリケーションはタッチのみを前提としないようにし、UI 要素が明確なフォーカス状態とポインティングデバイスでの予測可能なナビゲーションを提供することが重要です。

これらを踏まえると、レスポンシブなレイアウトと入力非依存のインタラクションが推奨されます。React Native のレイアウトシステムとコンポーネントモデルは、快適で使いやすい VR インターフェースを構築するための堅実な基盤を提供します。

詳細は公式のデザインガイドラインを参照してください。

例と参考

• リファレンスプロジェクト
  • この記事で使用したすべてのセットアップを含むリファレンスプロジェクト
• Callstack Meta Horizon OS showcase app（React Conf でのデモ）

詳しく学ぶ

• Official Meta Quest documentation
• React Native Developer's Guide to Meta Horizon OS (ebook)
• How to Add Meta Quest Support to Your Expo Development Builds (article)
• Bringing React Native to VR on Meta Quest (podcast)
• React Native on Meta Quest: What We Learned About Building for VR (live stream)
• Getting started with Meta Horizon Development using Expo
• Feedback channel for platform evolution

謝辞

React Native を新しいプラットフォームに広げるにはコード以上のものが必要です。時間、フィードバック、サポートを提供してくれたすべての方々に感謝します。