03. 開発環境を選ぶ

ExpoやReact Nativeでアプリを作るとき、IDE（統合開発環境）はもはや単なる「エディタ」ではありません。AIコーディングが当たり前になった現在、IDEはAIエージェントと共同作業するための司令室へと進化しています。

バイブコーディング（Vibe Coding）では、細かいコードを一行ずつ書くよりも、次のような指示をAIに出しながら開発を進めます。

「このアプリにログイン機能を追加して」
「この画面をもっとAppleっぽく洗練させて」
「Firebase Authenticationを使ってユーザープロフィールを保存して」
「このエラーの原因を調べて直して」

この記事では、Expo開発と特に相性の良い3つのAI IDEを、それぞれの設計思想と強みに焦点を当てて詳しく解説します。

3つのIDEの設計思想と特徴

IDE	設計思想	特徴的なキーワード
Antigravity	自律型エージェント司令室	Gemini 3 Flash枠、Google連携、エージェント特化
Firebase Studio	Firebase特化型クラウド開発環境	Nix、再現性、Firebase統合
Cursor	VS Code進化型AIエディタ	Composer、コードベース理解、Auto＋Composerのお得枠

1. Antigravity：AIエージェントを使いこなす「司令室」

Antigravityは、AIが単なる補助ではなく、タスクを自律的に進めるエージェントとして振る舞うことを前提とした、エージェント・ファーストな開発環境です。

主要機能とExpo開発でのメリット

Gemini 3 Flash の多めの割り当て: 高速かつ高性能な最新モデル「Gemini 3 Flash」を、非常に寛容な利用枠（クォータ）で利用できるのが大きな魅力です。バイブコーディングにおいて、試行錯誤の回数を気にせずAIと対話できることは、開発のテンポを維持する上で決定的な優位性となります。
Googleサービスとの手厚い連携: Googleが提供するIDEであるため、Firebase、Google Cloud、さらにはGoogle Workspaceなど、他のGoogleエコシステムとの連携が極めてスムーズです。ExpoアプリでバックエンドにFirebaseを採用する場合、その真価を発揮します。
エージェント開発への特化: 単にコードを提案するだけでなく、AIエージェントが「計画を立て、ブラウザで調査し、自律的にコードを書き換える」という一連のプロセスを、IDEの機能として深く統合しています。ユーザーはディレクターとして、エージェントの動きを「司令室」から見守り、指示を出すだけで開発が進んでいきます。

2. Firebase Studio：環境の再現性とバックエンドの統合

Firebase Studioは、GoogleのFirebaseエコシステムを最大限に活用するために作られた、環境構築とバックエンド重視のクラウドIDEです。

主要機能とExpo開発でのメリット

Nixによる環境構築: 開発環境をコードで定義する「Nix」を採用しています。これにより、Node.jsのバージョン管理やFirebase CLI、依存ライブラリの設定などが自動化されます。
再現性（Reproducibility）: Nixの最大の恩恵は「再現性」にあります。**「誰が、いつ、どのPCでプロジェクトを開いても、寸分違わず同じ開発環境が数秒で立ち上がる」**ことを保証します。チーム内での環境差分によるエラーを根絶し、将来のメンテナンス性も劇的に向上させます。
Firebaseとの密結合: Firestoreのデータ構造設計、Authenticationの認証ルール、Cloud FunctionsのデプロイがIDE内で完結します。

3. Cursor：圧倒的なコストパフォーマンスと実装スピード

Cursorは、VS Codeの操作感を保ちながら、AI機能を深く統合した現在最も人気のあるAIエディタです。

主要機能とExpo開発でのメリット

Composer（コンポーザー）: プロジェクト全体を俯瞰し、複数ファイルを同時に編集します。「ログイン画面とプロフィール編集画面、それを繋ぐAPIフックを一気に作って」という指示で、関連ファイルを横断して書き換える体験は圧巻です。
コードベースの深い理解: @Codebase を指定することで、プロジェクト内の全ファイルを背景知識としてAIに渡せます。
Auto ＋ Composer を利用できるお得な利用枠: 他のAIツールと比較して、**「Auto（自動補完・編集）とComposer（複数ファイル編集）を非常に寛容な制限（お得な利用枠）で使い倒せる」**点が最大の強みです。バイブコーディングにおいて、AIと対話しながら大量にコードを生成する際のコストパフォーマンスは圧倒的です。

まとめ：どのIDEを選ぶべきか

この記事で紹介した3つのツールは、いずれも甲乙つけがたい性能を持っていますが、IDEとしての立ち位置が異なります。自分の開発スタイルに合った「メインのIDE」を一つ選ぶのが、バイブコーディング成功の第一歩です。

AIエージェントに「お任せ」して、自分はディレクターとして進めたいなら：Antigravity
環境構築の手間をゼロにし、Firebaseバックエンドとの再現性を重視するなら：Firebase Studio
Auto＋Composerのお得な枠を活かして、圧倒的な実装スピードを享受したいなら：Cursor

IDEとCLIの融合：Antigravity × Claude Code CLI

IDE（統合開発環境）としての比較をしてきましたが、このサイトが最終的に推奨する「最強のバイブコーディング環境」は、IDEとしての Antigravity と、CLIツール（コマンドライン・インターフェース）としての Claude Code CLI を組み合わせて使うスタイルです。なぜ、似たようなAIエージェント機能を持ちながら、あえてこの2つを組み合わせるのか。その理由は、それぞれの「得意とする戦場」が異なるからです。

1. Antigravity：VS Codeの利便性をそのまま「司令室」に

Antigravityは、VS Codeの拡張機能として動作するため、使い慣れたエディタの機能をそのまま活かせるのが最大の利点です。

VS Code拡張機能の完全活用: 既存の強力な拡張機能群をそのまま使いながら、AIエージェントの力を上乗せできます。
視覚的なGit管理と操作: Gitの履歴確認やブランチ管理をGUIで直感的に行えるため、AIが提案した変更を視覚的にレビューし、安全に管理できます。
豊富なコマンドパレット: VS Code特有のコマンドパレットによる爆速な操作体系を、AIエージェントと対話しながらシームレスに利用できます。

いわば、Antigravityは**「冷静沈着な軍師」**であり、信頼できるIDEの地盤の上でプロジェクトの品質を守る司令塔です。

2. Claude Code CLI：抽象を具現化する「実戦部隊」

ターミナル上で動作する Claude Code CLI は、その圧倒的な「翻訳能力」と拡張性で、困難な実装を完結させます。

高い抽象解釈能力: 「いい感じのUIにして」「このロジックをより堅牢に書き換えて」といった抽象的な指示の意図を正確に汲み取り、具体的かつ高品質なコードに落とし込む能力が極めて高いです。
豊富なプラグインの活用: 標準機能だけでなく、豊富に用意されたプラグイン（Skills）を組み合わせることで、特定の開発環境やワークフローに合わせた自由自在な能力拡張が可能です。
爆速のターミナル駆動: CLAUDE.md（ルール）やHooks（ワークフロー）を駆使し、複雑なディレクトリ移動や一括リファクタリングを迷いなく遂行します。

Claude Code CLIは、**「百戦練磨の特殊部隊」**であり、人間の曖昧なイメージを最速でコードという現実に変える推進力を提供します。

3. この2つが融合したときの化学反応

Antigravityで「全体のルール」と「洗練された設計図」を描き、その設計図を元に Claude Code CLI が「超高速でコードを叩き出す」。この連携こそが、バイブコーディングを次の次元へと引き上げます。

例えば、新しい機能を開発する場合、まずAntigravityでGoogleサービス連携やGeminiの能力を借りて計画を立て、その計画書を横目で見ながら、ターミナルで Claude Code CLI に「実装」を依頼します。

AIが生成したコードに不安があれば、再びAntigravityでコードベース全体との整合性をレビューさせ、UIの細かな違和感はAntigravityのGUI上で調整する。このように、**「静のAntigravity」と「動のClaude Code」**を交互に使い分けることで、人間は思考のスピードを一切止めることなく、まるで楽器を演奏するようにアプリを作り上げることができます。

AIエージェントの「機能レイヤー」を知る（一般論）

各ツールで呼び方は異なりますが、AI IDEやエージェントツールの機能は、一般論として次の7つのレイヤーに分けて考えると整理しやすくなります。

一般分類	役割	代表例
1. ルール / 永続指示	AIが常に守る方針	コーディング規約、設計方針、禁止事項
2. ワークフロー / 手順	作業をどう進めるか	調査 → 計画 → 実装 → テスト → 報告
3. スキル / 能力パッケージ	特定タスクの専門知識	PRレビュー、デバッグ、Expo移行
4. ツール	AIが実際に操作する機能	ファイル編集、ターミナル、ブラウザ、検索
5. 外部連携	外部サービスとの接続	GitHub、Slack、Notion、Jira、DB
6. 接続プロトコル	外部連携の接続方式	MCP (Model Context Protocol)
7. 実行環境	AIが作業する場所	ローカルCLI、IDE、クラウドIDE、VM

各ツールの対応関係

一般分類	Antigravity	Claude Code CLI	Cursor	Firebase Studio
ルール	Rules	`CLAUDE.md`	Cursor Rules	Geminiへの指示 / 文脈
ワークフロー	Workflows	Slash Commands / Hooks	Rules + Agent指示	Prototyping agent
スキル	Agent Skills	Claude Skills	Rules / プロンプト手順	Firebase統合テンプレート
外部連携	GitHub / MCP経由など	GitHub / Slack / MCP等	MCP / Docs	Firebase / Google Cloud
実行環境	ローカルIDE	ターミナル (CLI)	デスクトップIDE	クラウドIDE / Nix

AIエージェントの「手足」：レイヤー構造を具体例で理解する

先ほど紹介した7つのレイヤーのうち、特にAIが実際に動くための「ツール」「外部連携」「接続プロトコル」の部分は、よく**「スキル」や「プラグイン」**という言葉で呼ばれます。

これらがどう関係しているのか、具体的な「手足」のイメージで整理してみましょう。

1. 「ツール」レイヤー：AIが自分のPCを操作する（組み込みスキル）

これは、AIがあなたのローカルPC上で直接作業を行う機能です。

ターミナル操作: AIがエディタ上で自分で npm install を実行したり、ビルドエラーのログを読んで原因を特定し、自力で修正コマンドを叩いたりします。
ブラウザ操作: AIが内蔵ブラウザを使って、昨日出たばかりのExpoの公式ドキュメントを自ら読みに行き、最新の書き方を学習します。

2. 「外部連携」と「プロトコル」レイヤー：外の世界と繋がる（MCP）

ローカルPCの中にとどまらず、外部のサービスやデータと連携するのがこのレイヤーの役割です。これを実現するための共通規格（USBポートのようなもの）が MCP (Model Context Protocol) です。

これがあるおかげで、AIは次のような「外部連携」ができるようになります。

GitHub連携: 「Issue #42 を読んでバグを直す」
ドキュメント連携: 「Notionの仕様書を読み込む」
コミュニケーション連携: 「完了したらSlackに報告する」

このように、AIエージェントの能力は、**「自分のPCをどれだけ自在に操れるか（ツール）」と、「外部サービスとどれだけスムーズに繋がれるか（外部連携・プロトコル）」**の掛け算で決まります。これからの開発では、この「手足」の充実度が、開発スピードを大きく左右することになります。