VULKでReact Nativeアプリを作る方法

2026年7月18日更新 — 検証済みプラットフォームデータと、React Nativeプレビューの現在の正直なステータスで刷新。

VULKでReact Nativeアプリはどう作る?

完全な答え:プロンプトでアプリを記述すると、VULKが完全なReact Native + Expoプロジェクトを生成します — Expo Routerのファイルベースナビゲーション、NativeWind(React Native向けTailwind)スタイリング、全面的なTypeScript、バンドル識別子と権限が設定済みのapp.json。その後プロジェクトをダウンロードし、npx expo startを実行すれば、数分でExpo Goを使って自分のスマートフォンでテストできます。本番ビルドはEAS Build(eas build)を通じてApp StoreとGoogle Playに出荷します。

最初にひとつ明言します。正直さはマーケティングに勝るからです:VULKは現在、React Nativeアプリをアプリ内ライブプレビューでレンダリングしません。 React NativeはMetroでバンドルされ、VULKのウェブスタックを担うブラウザベースのプレビューでは動かせません — エディタ内RNプレビューは開発中で、まだ提供されていません。今日得られるのは、完全で本物の生成コードと、それをデバイスで動かす標準Expoワークフローです。需要は確かにありますがFlutterより小さい:React Native/Expoを求めた累計ユーザープロンプトは213件、Flutterは381件(VULKプラットフォームデータ、2026年7月、N = 11,355プロジェクト) — Flutterが先にプラットフォーム内ビルドサービスを得たのもそのためです。

VULKは正確に何を生成する?

これはWebViewでラップしたウェブアプリではありません。VULKは本物のネイティブコンポーネント — View、Text、ScrollView、FlatList、TouchableOpacity — を生成し、iOSとAndroidでプラットフォームネイティブのウィジェットにコンパイルされます。

生成されるファイルツリーはこのようになります:

app/
  _layout.tsx          # Root layout with navigation container
  index.tsx            # Home screen
  (tabs)/
    _layout.tsx        # Tab navigator layout
    home.tsx           # Home tab
    profile.tsx        # Profile tab
    settings.tsx       # Settings tab
  [id].tsx             # Dynamic route
components/
  Button.tsx
  Card.tsx
  Header.tsx
assets/
  fonts/
  images/
tailwind.config.js
app.json
package.json

良いモバイルアプリを生むプロンプトの書き方は?

プロンプトこそ、生成されるアプリの品質が決まる場所です。堅実な結果を生む実際のプロンプトを紹介します。

基本プロンプト(動くが汎用的):

React Nativeでフィットネストラッキングアプリを作って

より良いプロンプト(具体的な機能):

Expo Routerのタブナビゲーション付きReact Nativeフィットネストラッキングアプリを作って。ユーザーがセット・レップ・重量付きでエクササイズを追加できるワークアウトログ画面を含めて。週間ボリュームを示すチャート付きの進捗画面を追加。ダークテーマでNativeWindを使ってスタイリング。セット間の休憩用タイマーコンポーネントを含めて。

上級プロンプト(本番品質):

次の画面を持つReact Native + Expoフィットネストラッカーを作って:(1)今日のワークアウトプランと週間統計を表示するダッシュボード、(2)検索と筋肉グループフィルター付きのエクササイズライブラリ、(3)進行中タイマー、セット記録、休憩タイマー付きのアクティブワークアウト画面、(4)30日間の筋肉グループ別挙上重量の折れ線グラフ付き進捗タブ、(5)単位(kg/lbs)と休憩タイマーのデフォルト設定付きプロフィール。メインナビゲーションはExpo Routerのタブ、各タブ内はスタックナビゲーション。ダークテーマのNativeWindでスタイリング(zinc-900背景、emerald-500アクセント)。データはAsyncStorageでローカル保存。ボタンフィードバックにexpo-hapticsを使用。

これらのプロンプトの違いは具体性です。VULKのAIモデルは、画面、データ構造、インタラクションパターンを明示的に記述したときに最高の結果を出します — VULKの中央値プロンプトはわずか364文字ですが、最高品質のモバイル生成は上の上級例のようなプロンプトから生まれます(VULKプラットフォームデータ、2026年7月)。

生成コードでNativeWindはどう機能する?

NativeWindにより、VULKはReact NativeでTailwind CSSのクラス名を使えます。生成コードはStyleSheet.createの代わりにclassNameプロップを使います:

// What VULK generates with NativeWind
export default function WorkoutCard({ exercise, sets }: WorkoutCardProps) {
  return (
    <View className="bg-zinc-800 rounded-2xl p-4 mb-3">
      <Text className="text-white text-lg font-semibold">
        {exercise.name}
      </Text>
      <Text className="text-zinc-400 text-sm mt-1">
        {sets} sets completed
      </Text>
    </View>
  );
}

これはビルド時にネイティブのStyleSheetオブジェクトにコンパイルされる本物のReact Nativeコードです。ランタイムのパフォーマンスペナルティはありません。NativeWindがカバーしないスタイルが必要なら、いつでもstyleプロップにフォールバックできます — プラットフォーム固有のスタイリングが必要な場合、VULKはそれを生成します。

Expo Routerナビゲーションはどう機能する?

VULKはExpo Routerによるファイルベースのルーティングを生成します。これはNext.jsのメンタルモデルを反映しています:app/ディレクトリのファイルがルートになります。

VULKが使う主要パターン:

• タブナビゲーション: expo-router/tabsのTabsコンポーネントを持つ(tabs)/_layout.tsxファイル
• スタックナビゲーション: タブ内のpush/popナビゲーション用にStackコンポーネントを持つネストされた_layout.tsxファイル
• 動的ルート: ルートパラメータを受け取る[id].tsxや[slug].tsxという名前のファイル
• モーダルルート: モーダルオーバーレイとして表示される(modal)/グループ内のファイル

ルートレイアウトには通常、フォント、テーマ、グローバルステートのプロバイダーが含まれます:

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="(modal)" options={{ presentation: 'modal' }} />
      </Stack>
    </ThemeProvider>
  );
}

自分のスマートフォンでアプリをテストするには?

エディタ内RNプレビューがまだないため、テストは自分のデバイスで行います — Expoワークフローならそれも速い:

1. コードをダウンロード VULKのエディタから(ソースZIPエクスポートはBuilderプラン以上に含まれます)
2. 展開して依存関係をインストール: cd your-app && npm install
3. 開発サーバーを起動: npx expo start
4. QRコードをスキャン スマートフォンのExpo Goで(iOSはカメラアプリ、AndroidはExpo Goアプリ)

アプリは数秒でデバイスに読み込まれ、ローカルの変更はホットリロードで即座に反映されます。

Expo Goに含まれないネイティブモジュール(BluetoothやNFCなど)が必要な機能には、npx expo run:iosまたはnpx expo run:androidでdevelopment buildを作成します。VULKが生成するapp.jsonには、一般的なネイティブモジュールのプラグイン設定が含まれています。

最初の生成後のイテレーションは?

VULKの会話フローは反復的なモバイル開発のために設計されています。初回生成後、フォローアップメッセージで磨きます:

• 「ワークアウトリスト画面にpull-to-refreshを追加して」
• 「フラットリストを筋肉グループごとにグループ化したセクションリストに置き換えて」
• 「新しい画面に遷移する代わりにエクササイズピッカーをボトムシートにして」
• 「休憩タイマーに円形の進捗インジケーターを表示して」

各イテレーションは既存コードを保持し、的を絞った変更を適用します。VULKはファイルツリー全体を追跡し、更新が必要なファイルだけを修正します。プラットフォームの中央値ビルド会話は4メッセージ — 一発生成プラス微調整数回です(VULKプラットフォームデータ、2026年7月)。

App StoreとGoogle Playへの出荷は?

本番ビルドはExpoのマネージドビルドサービスEAS Buildを通します:

• Android: eas build --platform androidでAPK(直接インストール)またはAAB(Google Play提出)を生成。ローカルのAndroid Studioは不要。
• iOS: eas build --platform iosでTestFlightとApp Store提出用のIPAを生成。Apple Developerアカウント($99/年)が必要。

VULKが生成するapp.jsonには、EASが期待するバンドル識別子、バージョンフィールド、権限宣言が揃っており、設定の手術なしでビルド可能です。(今日プラットフォーム内APKビルドサービスが欲しいなら、それはVULKのFlutterパスに存在します — 多くのモバイルビルダーがVULKでFlutterを選ぶもうひとつの理由です。)

注意すべき点は?

ナビゲーションの深さ: アプリのネストナビゲーションが3階層を超えるなら、プロンプトで階層を明示的に記述してください。さもないとAIはスタックすべきルートをフラットにするかもしれません。

画像の扱い: VULKは最適化された画像読み込みのためにexpo-imageの使用を生成します。画像中心のアプリ(ギャラリー、ソーシャルフィード)なら、それを伝えてキャッシュとプレースホルダー処理を含めさせましょう。

オフライン対応: オフラインで動く必要があるならプロンプトで述べてください。VULKはAsyncStorageの永続化とネットワーク状態検出を生成しますが、求められたときだけです。