04. AntigravityでExpo開発環境を作る

バイブコーディングの準備が整ったら、実際にプロジェクトを立ち上げましょう。

この記事では、本サイト推奨の開発環境である Antigravity IDE または Antigravity 2.0 を使って、Expo（TypeScript環境）のプロジェクトを作成し、スマホ実機で動作確認するまでの手順をステップ・バイ・ステップで解説します。

---

1. 開発環境の選択と起動

まずは、ご自身の開発スタイルに合ったAntigravityの環境を起動します。

A. Antigravity IDE（VS Codeベース版）を使う場合

1. パソコン上で空の作業用フォルダー（例: my-expo-app）を作成します。
2. Antigravity IDEを開き、作成したフォルダーをワークスペースとして開きます（File > Open Folder）。
3. AIエージェントチャット（チャットパネル）が右側または左側に開いていることを確認します。

B. Antigravity 2.0（スタンドアロン版）を使う場合

1. Antigravity 2.0 アプリケーションを起動します。
2. 画面の指示に従って新規プロジェクトを作成し、作業用のフォルダーを選択・連携します。
3. エージェント管制画面が開きます。

どちらの環境でも、利用中の開発ツールが提供するAIモデルを使って、あなたの指示に応じたファイル編集やコマンド実行を進めます。利用できるモデル名、料金、上限はツールの公式情報で確認してください。

---

2. AIエージェントにプロジェクト作成を依頼する

バイブコーディングでは、自分でターミナルを開いてコマンドを入力する必要すらありません。すべてAIエージェントに丸投げできます。

チャット欄に、次のように指示（プロンプト）を入力してください。

これからバイブコーディングでiOS/Android両対応のスマホアプリを開発します。
現在のフォルダーに、TypeScriptとExpo Routerを使用した最新のExpoプロジェクトを初期化してください。
必要なライブラリのインストールも自動で進めてください。

エージェントの動き

指示を受けたエージェントは、自動的に以下のプロセスを自律実行します。

1. コマンドの実行: フォルダーのルートで npx create-expo-app@latest ./ --template tabs（またはブランクTypeScriptテンプレート）などの初期化コマンドを自動実行します。
2. 依存関係の解決: npm install などのインストールプロセスを自動で見守り、警告やエラーが発生した場合は自動で修正コマンドを実行します。
3. 完了報告: すべてのファイル展開と環境構築が終わると、完了した旨をチャットで教えてくれます。

---

3. Expo Goとスマートフォン実機の準備

開発中のアプリをスマートフォンでリアルタイムに動かすために、Expo Go アプリを準備します。

1. お手持ちのスマートフォン（iPhone / Android）のアプリストアを開きます。
2. 「Expo Go」と検索し、アプリをインストールします（無料）。
3. PCとスマートフォンが同じWi-Fiルーター（同じネットワーク）に接続されていることを確認してください（ここが異なると接続エラーになります）。

---

4. 開発サーバーの起動

プロジェクトの準備ができたら、開発サーバーを起動してアプリをスマホと同期させます。

チャット欄で、エージェントに次のように指示します。

開発サーバーを起動して、スマホで動作確認できるようにしてください。

エージェントの動き

エージェントはターミナルで次のコマンドを実行し、バックグラウンドタスクとして常駐させます。

npx expo start

サーバーが立ち上がると、エディタ上（またはターミナル上）に大きな QRコード が表示されます。

スマホでの読み取り手順

• iPhone (iOS) の場合: 標準の「カメラ」アプリを起動し、表示されたQRコードをスキャンします。画面上部に表示される「Expo Goで開く」というポップアップをタップします。
• Android の場合: インストールした「Expo Go」アプリを開き、「Scan QR Code」をタップしてQRコードをスキャンします。

スキャン後、アプリのビルド（Javascriptのバンドル）が走り、数秒〜数十秒でスマートフォンの画面に初期状態のアプリが表示されます。

---

5. ファスト・リフレッシュ（Fast Refresh）を体験する

バイブコーディングの醍醐味である、変更が即座に反映される「ファスト・リフレッシュ」を確認してみましょう。

エージェントに、画面上の文字を書き換えるように指示します。

app/(tabs)/index.tsx（またはエントリーファイルの表示テキスト）を編集し、
画面の中央に「Hello Vibe Coding with Antigravity!」と大きく目立つように表示させてください。

エージェントの動き

エージェントは対象のファイルを特定し、コードを書き換えます。

// app/(tabs)/index.tsx
import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello Vibe Coding with Antigravity!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#3b82f6', // 彩度を抑えたきれいなブルー
  },
});

コードの保存が完了した瞬間、スマートフォンの画面が自動的にリロードされ、書き換えた文字が表示されます。

このように、「指示を出す ➡ AIがファイルを書き換える ➡ スマホで即座に確認する」 というサイクルを回していくのが、本サイトで解説するバイブコーディングの基本フローです。

---

6. トラブルシューティング（スマホに画面が表示されない場合）

もしQRコードを読み取ってもエラーになる場合は、以下の項目を確認してください。

1. Wi-Fiネットワークの確認: PCとスマートフォンが完全に同じWi-Fi（SSID）に繋がっているか確認してください。ポケットWi-Fiやスマートフォンのテザリングを使うと安定しやすくなります。
2. 接続モードの変更: どうしても繋がらない場合、ターミナルで npx expo start --tunnel コマンドを実行（またはエージェントに「トンネルモードでサーバーを起動して」と指示）してください。Ngrok経由で異なるネットワーク間でも接続できるようになります。
3. ファイアウォールの確認: PCのセキュリティソフトがExpoのポート接続をブロックしていないか確認してください。

---

次のステップ

無事に初期アプリがスマホで動作したら、次はいよいよAIに指示を出すための「魔法の言葉」を学びます。

次の記事「05. VibeCodingで使う基本プロンプト集」に進み、AIを自在にコントロールするプロンプトテクニックを身につけましょう。