Expo × Antigravity でクロスプラットフォームアプリを効率的に開発

取り組みの背景

Expo は React Native アプリ開発を大幅に簡略化するオープンソースフレームワークです。ネイティブコードを書かずに iOS・Android・Web 向けアプリを同時開発できる強力なエコシステムを持っています。

Google Antigravity の AIエージェントと組み合わせることで、コンポーネント生成からデプロイまでの作業を大幅に自動化できます。ここでは Expo プロジェクトを Antigravity で効率的に開発する方法を詳しく解説します。

前提知識

Node.js 20 以上がインストール済みであること
Antigravity の基本操作を理解していること（入門記事を参照）
React / React Native の基礎知識

Expo プロジェクトのセットアップ

まず新しい Expo プロジェクトを作成します。Antigravity の Manager Surface を開き、新しいエージェントに以下を指示してください。

npx create-expo-app@latest MyApp --template blank-typescript
cd MyApp
npx expo install

Antigravity のエージェントはプロジェクト構成を自動解析し、package.json・app.json・tsconfig.json を最適化した状態で提案します。

Antigravity に最初のセットアップを任せる

Manager Surface で次のように指示します：

Expo プロジェクト「MyApp」をセットアップして。
- TypeScript strict モードを有効化
- Expo Router v3 を導入
- NativeWind でスタイリングを設定
- Zustand で状態管理を構成

エージェントは必要な依存パッケージのインストールから設定ファイルの作成まで自動で行います。

Expo Router との連携

Expo Router は ファイルベースルーティング を採用しており、app/ ディレクトリ配下のファイル構成がそのままナビゲーション構造になります。

画面コンポーネントの自動生成

Antigravity の Editor View で以下のように入力すると、ルーティング対応の画面コンポーネントを一括生成できます：

app/ 以下に以下の画面を作成して：
- (tabs)/_layout.tsx  ← タブナビゲーション
- (tabs)/index.tsx    ← ホーム画面
- (tabs)/explore.tsx  ← 探索画面
- modal.tsx           ← モーダル画面

生成されたコードは TypeScript の型が正確に付与され、Expo Router の規約に準拠しています。

// app/(tabs)/index.tsx（Antigravity が生成するサンプル）
import { StyleSheet, Text, View } from 'react-native';
import { Link } from 'expo-router';
 
export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>ホーム</Text>
      <Link href="/modal">モーダルを開く</Link>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

EAS Build の設定と自動化

EAS（Expo Application Services）Build は Expo 公式のクラウドビルドサービスです。Antigravity で EAS の設定を自動化しましょう。

eas.json の最適化

eas.json を作成して。development・preview・production の3プロファイルを設定して。
iOS は distribution: internal、Android は buildType: apk（preview）と buildType: app-bundle（production）にして。

Antigravity が生成する eas.json：

{
  "cli": {
    "version": ">= 7.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "distribution": "internal"
      },
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "ios": {
        "distribution": "store"
      },
      "android": {
        "buildType": "app-bundle"
      }
    }
  }
}

GitHub Actions との連携

Antigravity の MCP（GitHub Actions MCP）を活用して、プッシュ時に自動ビルドが走るワークフローを設定できます。

.github/workflows/eas-build.yml を作成して。
main ブランチへのプッシュで EAS preview ビルドを自動実行するようにして。
ビルド完了後に Slack へ通知も送って。

Over The Air（OTA）アップデートの活用

Expo の EAS Update を使うと、アプリストアの審査を経ずに JavaScript バンドルを更新できます。バグ修正や UI 変更を素早くユーザーに届けられます。

# OTA アップデートの配信（Antigravity エージェントに実行させる例）
npx eas update --branch production --message "Fix: ログイン画面のバリデーションエラーを修正"

Antigravity のエージェントに「本番環境に OTA アップデートを配信して」と指示するだけで、ビルド・テスト・配信まで一連の作業を自動化できます。

カスタムネイティブモジュールへの対応

Expo の Bare Workflow や Config Plugin を使用する場合、ネイティブコードの編集が必要になることがあります。Antigravity はネイティブコードの生成・修正にも対応しています。

iOS の Info.plist にカメラアクセスの権限説明を追加するConfig Pluginを作成して。
Android の AndroidManifest.xml にも対応する権限を追加して。

Antigravity は Expo Config Plugin の仕様を理解した上で、プラットフォームごとに適切なネイティブ設定を生成します。

デバッグとテスト

Expo Go での実機確認

npx expo start

起動後、Antigravity のエージェントに「このコンポーネントのユニットテストを書いて」と指示すれば、Jest + React Native Testing Library を使ったテストコードを自動生成します。

エラー解析

実機でクラッシュが発生した場合、スタックトレースを Antigravity に貼り付けるだけで原因分析と修正案を提示してくれます：

このクラッシュレポートを解析して修正して：
TypeError: undefined is not an object (evaluating 'user.profile.avatar')
  at ProfileScreen (app/(tabs)/profile.tsx:42)

まとめ

Expo と Antigravity の組み合わせは、クロスプラットフォームモバイルアプリ開発を大幅に加速します。

プロジェクトセットアップ: create-expo-app から依存関係の設定まで自動化
コンポーネント生成: Expo Router・NativeWind 対応のコードを即時生成
ビルド・デプロイ: EAS Build / EAS Update を Antigravity エージェントが管理
デバッグ: クラッシュレポートの解析と修正を自動化

Antigravity の AIエージェントを活用することで、ボイラープレートコードの記述に費やす時間を最小化し、アプリのコアロジックと UX 設計に集中できます。ぜひ試してみてください。