React Nativeは常に、開発者がプラットフォーム間で知識を再利用できるよう支援することに焦点を当ててきました。AndroidとiOSから始まったものが、Apple TV、Windows、macOS、そしてreact-strict-domによるWebまで着実に拡張されてきました。2021年のMany Platform Visionの投稿では、React Nativeがエコシステムを分断することなく新しいデバイスやフォームファクターに適応できる未来を描きました。React Conf 2025では、Meta QuestデバイスへのReact Nativeの公式サポートを発表することで、そのビジョンに向けてさらなる一歩を踏み出しました。この投稿では、Meta QuestでReact Nativeを始める方法、現在利用可能な機能、そして開発者が慣れ親しんだツールとパターンを使用してVRアプリを構築・配布する方法に焦点を当てています。
ハイライト
- Meta QuestでのReact Native
- Meta Questでの開発開始
- 開発ビルドとネイティブ機能
- プラットフォーム固有のセットアップとモバイルとの違い
- VRにおけるデザインとUXの考慮事項
Meta QuestでのReact Native
Meta QuestでReact Nativeアプリを実行している様子。
Meta QuestデバイスはMeta Horizon OS（Androidベースのオペレーティングシステム）で動作します。React Nativeの観点から見ると、これは既存のAndroidツール、ビルドシステム、デバッグワークフローが最小限の変更で動作することを意味します。すでにAndroidでReact Nativeアプリを構築している開発者にとって、既存の開発モデルの多くがそのまま適用されます。
これは、React Nativeが時間をかけて他のAndroidベースの環境に拡張してきた方法と一致しています。新しいランタイムや開発モデルを導入するのではなく、Meta Questは同じAndroid基盤の上に構築され、React Nativeの既存の抽象化と統合されます。これにより、フレームワークを分断したり、開発に対する別のアプローチを必要とすることなく、プラットフォーム固有の機能を追加できます。
Meta Questでの開発開始
このセクションでは、Expo Goから始めて開発ビルドとプラットフォーム固有の設定に移行する、Meta Questでの基本的な開発ワークフローを説明します。
ステップバイステップ：Meta QuestでExpoアプリを実行する
Meta QuestでExpoアプリを実行するには、標準的なExpoプロジェクトを開始し、開発サーバーを起動し、ヘッドセット上の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
開発サーバーを開始
npx expo start
Expo Goを使用してQuestと接続
ヘッドセット上でExpo Goを開き、Expo CLIによって表示されるQRコードをヘッドセットのカメラでスキャンします。アプリケーションはデバイス上の新しいウィンドウで起動し、ライブリロードと高速な反復が可能になります。
通常通り反復
コードの変更はデバイス上で即座に反映され、AndroidやiOSで使用されるのと同じ編集-更新サイクルに従います。
開発ビルドとネイティブ機能
Expo Goは初期開発とUI作業には十分です。ネイティブモジュールへのアクセスやより深いプラットフォーム統合が必要な場合は、代わりに開発ビルドを使用します。これらのビルドは標準的なExpo開発ビルドワークフローに従い、Questデバイス上で直接実行されます。
プラットフォーム固有のセットアップとモバイルとの違い
全体的なワークフローは同じですが、Meta Questには小さなプラットフォーム固有の調整が必要です。
Meta Horizon OSのプロジェクト設定
Meta Questアプリケーションは、正しく動作し、ストア提出の対象となるために特定の要件を満たす必要があります。これには、プラットフォーム固有のAndroid設定、プロダクトフレーバー、アプリケーションメタデータが含まれます。
ExpoはMeta Horizon OS用のプラグインを提供し、ビルド時にこれらの要件を適用します。このプラグインを使用することで、ネイティブファイルの手動変更なしに、プロジェクト設定がMeta Questの期待に沿うことが保証されます。
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でReact Nativeを始める最も簡単な方法を提供します。フレームワークなしでビルドしたい場合は、必要なMeta Horizon OS設定をAndroidプロジェクトに直接適用することもできます。
最低限、これには以下が含まれます：
- android/app/build.gradleでMeta Quest固有のビルドフレーバーを作成
- 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プラットフォームを提供します。開発の観点から見ると、これはアプリケーションが標準的なAndroid APIで動作するが、Play ServicesやPlay Store固有の統合などのGoogle Mobile Servicesにアクセスできないことを意味します。
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';
if (ExpoHorizon.isHorizonDevice) {
console.log('Meta Horizon OSで実行中！');
}
if (ExpoHorizon.isHorizonBuild) {
console.log('これはHorizonビルドバリアントです');
}
const appId = ExpoHorizon.horizonAppId;
console.log('Horizon App ID:', appId ?? '設定されていません');
VRにおけるデザインとUXの考慮事項
ヘッドマウントディスプレイ向けのデザインには、タッチベースのモバイルデバイスとは異なる制約があります。インターフェースは距離を置いて表示され、空間内でレンダリングされ、より幅広い入力方法を使用して操作されます。
UI要素は一般的により大きなヒットターゲット、増加した間隔、そして様々な距離で読みやすいタイポグラフィが必要です。これらの課題は、アプリケーションがリサイズ可能なウィンドウで実行され、レイアウトが動的に適応する必要があるデスクトップ、タブレット、折りたたみ式デバイスで遭遇するものと似ています。
Meta QuestとAndroidモバイルの主な違いの一つは入力です。主にタッチに依存する代わりに、Meta Questアプリケーションは一般的にコントローラー、ハンドトラッキング、そしてオプションでマウスとキーボードを通じて制御されます。コントローラーはポインターデバイスのように動作し、ホバーやフォーカスベースのナビゲーションを含む、WebやデスクトップUIに近い相互作用パターンを導入します。
React Nativeのイベントシステムとコンポーネントモデルはこれらの相互作用パターンをサポートできますが、アプリケーションはタッチ専用の前提を避け、UI要素がポインティングデバイスを通じて制御される際に明確なフォーカス状態と予測可能なナビゲーションを提供することを確実にする必要があります。
これらの考慮事項を合わせると、レスポンシブレイアウトと入力に依存しない相互作用が有利になります。React Nativeのレイアウトシステムとコンポーネントモデルは、快適で使いやすいVRインターフェースを構築するための堅実な基盤を提供します。
注意
詳細については、公式デザインガイドラインをご確認ください。
例と参考資料
参考プロジェクト
- この記事で使用されたすべてのセットアップを含む参考プロジェクト
- React ConfからのCallstack Meta Horizon OSショーケースアプリ
詳細情報
- 公式Meta Questドキュメント
- React Native Developer's Guide to Meta Horizon OS（電子書籍）
- How to Add Meta Quest Support to Your Expo Development Builds（記事）
- Bringing React Native to VR on Meta Quest（ポッドキャスト）
- React Native on Meta Quest: What We Learned About Building for VR（ライブストリーム）
- Getting started with Meta Horizon Development using Expo
- プラットフォーム進化のためのフィードバックチャンネル
謝辞
React Nativeを新しいプラットフォームに導入するには、コード以上のものが必要です。この過程で時間、フィードバック、サポートを提供してくださったすべての方に感謝いたします。