Skip to content

03. 開発環境を選ぶ

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

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

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

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


3つの開発ツールの設計思想と特徴

Section titled “3つの開発ツールの設計思想と特徴”
ツール名設計思想特徴的なキーワード
Antigravity IDEVS Code進化型AIエディタVS Code互換、GUIでのGit管理、人間主導の編集+AI支援
Antigravity 2.0自律型エージェント管制塔スタンドアロンアプリ、Gemini 3.5 Flash、サブエージェント、定時実行
Firebase StudioFirebase特化型クラウド開発環境Nix、再現性、Firebase統合

1. Antigravity IDE:VS Codeの操作感とAIの融合

Section titled “1. Antigravity IDE:VS Codeの操作感とAIの融合”

Antigravity IDEは、VS Codeをベースにした使い慣れたエディタ環境でありながら、強力なAIエージェント機能をシームレスにブレンドしたコードエディタです。

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

Section titled “主要機能とExpo開発でのメリット”
  • VS Codeエコシステムの完全な継承: VS Codeの拡張機能(TypeScript、Expo Tools、ESLintなど)やキーバインド、コマンドパレットをそのまま利用できます。既存の開発スタイルを崩さずにAIのパワーを取り入れたい開発者に最適です。
  • 人間主導の編集とAI支援: エディタ画面で自分で直接コードを書きながら、必要なときにだけAIエージェントに「この関数をリファクタリングして」「エラーを直して」と頼むといった、ハイブリッドな開発に適しています。
  • 直感的なGUIでのGit/ファイル管理: AIが提案した変更点をVS Codeおなじみの差分表示(Diffビュー)で確認し、手動で細かい修正(微調整)を加えた上でコミットする、といった確認・レビュー作業が非常に行いやすいです。

2. Antigravity 2.0:自律型エージェントの「管制塔」

Section titled “2. Antigravity 2.0:自律型エージェントの「管制塔」”

Antigravity 2.0は、従来のコードエディタの枠を超えた、自律AIエージェントのオーケストレーション(管理・実行)に特化したスタンドアロンのデスクトップアプリケーションです。エディタUIを持たず、AIエージェントにタスクを完全に任せることに特化しています。

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

Section titled “主要機能とExpo開発でのメリット”
  • 動的なサブエージェント(Subagents): メインのAIエージェントが、自身でタスクを並行処理するための「特化型サブエージェント」を動的に生成して作業を任せます。これにより、複雑なExpoアプリ開発でもコンテキストウィンドウの破綻を防ぎ、高い精度で並行開発が可能です。
  • 定時実行タスク(Scheduled Tasks): cron形式(スケジュール設定)でAIエージェントにタスクを実行させることができます。「毎晩テストスイートを走らせてエラーがあれば修正案をコミットする」「週に一度、npmライブラリのセキュリティアップデートと依存関係チェックを行う」といった自動保守が可能です。
  • Gemini 3.5 Flashへの最適化: 高速かつ高度なエージェント処理に特化した最新モデル「Gemini 3.5 Flash」を搭載し、圧倒的な応答スピードで自律的にタスクを完了させます。
  • 非同期・バックグラウンド処理: コマンドの実行やブラウザによる情報収集などのタスクを完全にバックグラウンドで非同期実行します。処理の完了を待つ間も、次の指示を出したり別の作業を進めたりできます。

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

Section titled “3. Firebase Studio:環境の再現性とバックエンドの統合”

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

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

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

まとめ:どの環境を選ぶべきか

Section titled “まとめ:どの環境を選ぶべきか”

この記事で紹介した3つのツールは、いずれも甲乙つけがたい性能を持っていますが、開発におけるアプローチが大きく異なります。

  • VS Codeの慣れ親しんだ操作感で、手動コーディングとAI支援のバランスを重視したいなら:Antigravity IDE
  • AIエージェントにタスクを完全に「丸投げ」し、自分は司令官(ディレクター)として並行作業させたいなら:Antigravity 2.0
  • 環境構築の手間をゼロにし、Firebaseバックエンドとの強固な連携や再現性を重視するなら:Firebase Studio

デュアル・ウィールド(二刀流)という選択肢

Section titled “デュアル・ウィールド(二刀流)という選択肢”

Googleは従来の「Antigravity IDE」の提供も継続しています。そのため、**「Antigravity 2.0で高レベルなタスク管理やサブエージェントの並行処理を行い、コードの直接編集やUIの微調整はAntigravity IDEで行う」**という、2つのツールを併用するスタイル(二刀流)もプロの開発者の間で非常に有効なアプローチとされています。


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

Section titled “IDEとCLIの融合:Antigravity IDE × Claude Code CLI”

IDE(統合開発環境)としての比較をしてきましたが、このサイトが最終的に推奨する「最強のバイブコーディング環境」は、IDEとしての Antigravity IDE (VS Code版) と、CLIツールとしての Claude Code CLI を組み合わせて使うスタイルです。

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

Section titled “1. Antigravity IDE:VS Codeの利便性をそのまま「司令室」に”

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

  • VS Code拡張機能の完全活用: 既存の強力な拡張機能群をそのまま使いながら、AIエージェントの力を上乗せできます。
  • 視覚的なGit管理と操作: Gitの履歴確認やブランチ管理をGUIで直感的に行えるため、AIが提案した変更を視覚的にレビューし、安全に管理できます。

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

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

Section titled “2. Claude Code CLI:抽象を具現化する「実戦部隊」”

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

  • 高い抽象解釈能力: 「いい感じのUIにして」「このロジックをより堅牢に書き換えて」といった抽象的な指示の意図を正確に汲み取り、具体的かつ高品質なコードに落とし込む能力が極めて高いです。
  • 爆速のターミナル駆動: CLAUDE.md(ルール)やHooks( there-in のワークフロー)を駆使し、複雑なディレクトリ移動や一括リファクタリングを迷いなく遂行します。

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

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

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

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


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

Section titled “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 IDEAntigravity 2.0Claude Code CLIFirebase Studio
ルールRulesProject Rules / SettingsCLAUDE.mdGeminiへの指示 / 文脈
ワークフローWorkflowsAsynchronous Task Planning / SubagentsSlash Commands / HooksPrototyping agent
スキルAgent SkillsMulti-Agent SkillsClaude SkillsFirebase統合テンプレート
外部連携GitHub / MCP経由などGoogle Cloud / Android / Multi-repo MCPGitHub / Slack / MCP等Firebase / Google Cloud
実行環境ローカルIDE (VS Code)デスクトップアプリ (OS sandbox)ターミナル (CLI)クラウドIDE / Nix

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

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

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

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

Section titled “1. 「ツール」レイヤー:AIが自分のPCを操作する(組み込みスキル)”

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

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

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

Section titled “2. 「外部連携」と「プロトコル」レイヤー:外の世界と繋がる(MCP)”

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

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

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

次の記事では、本サイト推奨の環境を使って実際に最初のプロジェクトを動かす「04. AntigravityでExpo開発環境を作る」へ進みます。