01. VibeCodingでスマホアプリを作る全体像

バイブコーディングを使えば、AIに相談しながらスマホアプリを作れるようになります。

ただし、いきなりコードを書き始めると、次のようなところで迷いやすくなります。

どのAIツールを使えばいいのか
どのIDEを使えばいいのか
Expoとは何か
iPhoneで動作確認するには何が必要か
Androidでも確認できるのか
ExpoアカウントやGitHubアカウントは必要なのか
App StoreやGoogle Playに公開するには何が必要なのか

この記事では、バイブコーディングでExpoアプリを作るために、最初に必要なものと、今後の学習ロードマップを整理します。

この記事のサブコンテンツ

この記事は、次のサブコンテンツに分けて整理します。

バイブコーディングでExpoアプリを作る全体像
物理的な準備（ハードウェア・端末）
ソフトウェアの準備（開発・実行環境）
アカウントの準備（サービス連携）
最初から用意しなくてもよいもの
準備チェックリスト
このサイトで進めるロードマップ
まとめ

1. バイブコーディングでExpoアプリを作る全体像

バイブコーディングとは

バイブコーディングとは、AIに自然言語で指示を出しながら、アプリやWebサービスを作っていく開発スタイルです。

従来の開発では、自分でコードを細かく書いていく必要がありました。

一方で、バイブコーディングでは、次のような指示をAIに出しながら開発を進めます。

こういうアプリを作りたい
この画面を追加してほしい
このエラーを直してほしい
このコードを整理してほしい
もっと使いやすいUIにしてほしい
この機能を追加するための手順を教えてほしい

もちろん、AIが書いたコードをすべてそのまま信じてよいわけではありません。

しかし、仕様書作成、画面実装、エラー修正、コード整理などをAIに手伝ってもらうことで、個人でもアプリ開発を進めやすくなります。

このサイトでは、ExpoアプリをAIと一緒に作っていく方法を扱います。

なぜExpoを使うのか

Expoは、React Nativeを使ってiOS・Androidアプリを作るための開発環境です。

Expoを使うと、比較的少ない準備でスマホアプリ開発を始められます。

Expoを使う主なメリットは次のとおりです。

iOS / Androidアプリを同じコードベースで作れる
Expo Goを使ってスマホ実機で確認しやすい
React / JavaScript / TypeScriptの知識を活かしやすい
EAS Buildを使ってアプリ公開用のビルドを作れる
カメラ、通知、位置情報などスマホらしい機能を扱いやすい

このサイトでは、Expoを使って、最初の小さなアプリから、公開・収益化を目指せるアプリまで段階的に作っていきます。

このサイトで作っていくもの

このサイトでは、いきなり大きなアプリを作るのではなく、小さなアプリを少しずつ育てていきます。

最初は、次のようなシンプルなアプリから始めます。

メモアプリ
タスク管理アプリ
習慣記録アプリ
シンプルな一覧管理アプリ

そこから、次のような機能を順番に追加していきます。

画面遷移
一覧画面
詳細画面
作成フォーム
編集フォーム
検索
ローカル保存
ログイン
データベース連携
通知
画像アップロード
広告
アプリ内課金
ストア公開

2. 物理的な準備（ハードウェア・端末）

バイブコーディングを始めるために、まずは物理的な環境を整えます。

パソコン（Mac推奨）

Expoアプリを開発するには、基本的にパソコンが必要です。

このサイトでは、Macでの開発を強く推奨します。

Mac推奨の理由: iOSシミュレータでの動作確認、Xcodeの利用、TestFlightでの配布、App Storeへの公開など、iOS向けの作業がスムーズに行えるためです。
Windowsの場合: Android向けの開発やExpo Goでの実機確認は可能ですが、iOS向けのビルドや公開作業で制限が生じる場合があります。

スマートフォン実機（iPhone / Android）

Expoアプリは、シミュレータだけでなく実機で確認しながら開発するのがおすすめです。

iPhone: iOS特有の動作確認や、将来的なApp Store公開を目指す場合に必要です。
Androidスマホ: Android特有の動作確認や、Google Play公開を目指す場合に必要です。

まずは手元にあるスマートフォン1台から始めれば問題ありません。

安定したインターネット回線

バイブコーディングではAIツールを頻繁に使い、パッケージのインストールやビルド作業でも通信が発生するため、安定したネット環境が必須です。

3. ソフトウェアの準備（開発・実行環境）

次に、パソコンにインストールするソフトウェアや、用途別のツールを準備します。

ターミナル（Oh My Zsh推奨）

コマンド（命令文）を入力して操作するためのツールです。バイブコーディングではAIが指示したコマンドを実行する場面が多いため、必須のツールとなります。Macなら標準の「ターミナル」、あるいは「iTerm2」などが使われます。このサイトでは、より使いやすくカスタマイズされた Oh My Zsh の導入を推奨しています。

Homebrew（必須ツール管理）

macOSにおける「パッケージ管理ツール」です。バイブコーディングで必要な各種ツール（Git, Node.js管理ツールなど）を簡単にインストール・更新するために、Macユーザーには必須のツールとなります。

インストールは、ターミナルで公式サイト（brew.sh）に記載されている以下のコマンドを実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストール後、画面に表示される指示に従って「Next steps」の手順（パスを通す作業）を必ず完了させてください。

Node.js（nvmでのインストール推奨）

JavaScript/TypeScriptの開発環境として必須です。

このサイトでは、nvm (Node Version Manager) を使ったインストールを推奨します。プロジェクトごとにNode.jsのバージョンを簡単に切り替えられるため、トラブルを防ぎやすくなります。基本的にはLTS版（長期サポート版）をインストールしてください。

npm / npx

Node.jsをインストールすると、パッケージ管理ツールの npm と npx も一緒に使えるようになります。Expoのプロジェクト作成では npx create-expo-app@latest というコマンドを頻繁に使うため、これらが正しく動作することを確認しておきましょう。

Git（バージョン管理）

コードの変更履歴を管理するツールです。バイブコーディングではAIがコードを大きく書き換えることがあるため、作業の切り戻しや履歴確認のために必須となります。

推奨IDE（Antigravity / Firebase Studio / Cursor）

AIに指示を出してコードを書かせるためのメインツールです。

Antigravity（本サイト推奨）: AIエージェントとの協調開発に特化しており、Expoプロジェクトの作成から修正までスムーズに行えます。
Firebase Studio: 特にFirebaseやGoogle系サービスと組み合わせてアプリを作りたい場合に強力な選択肢となります。
Cursor: VS CodeベースのAIエディタで、既存のVS Codeユーザーに馴染みやすいツールです。

Expo Orbit（推奨デスクトップツール）

macOS/Windowsで動作する便利な管理ツールです。ビルドしたアプリをシミュレータや実機にワンクリックでインストール・起動でき、開発のテンポが劇的に向上します。

Expo Go（実機確認用アプリ）

iPhoneやAndroidのストアからインストールできる、動作確認用のアプリです。パソコンで開発中のコードを、QRコードを読み取るだけで手元のスマホで即座に動かすことができます。

EAS CLI（ビルド・公開用ツール）

Expoアプリをビルドしたり、App StoreやGoogle Playに公開したりするために必要なコマンドラインツールです。

最初の「Expo Goでの確認」段階では必須ではありませんが、実機向けのインストールファイルを生成したり、ストア申請に進む際には npm install -g eas-cli でのインストールが必要になります。

ブラウザ（Chrome / Safari等）

AIチャット（ChatGPT / Claude / Gemini）の利用、FirebaseやGitHubの設定、公式ドキュメントの参照などで頻繁に使います。特にAI開発では「AIに相談しながらドキュメントを読み込む」作業が多いため、使い慣れたブラウザを準備しておきましょう。

Xcode / Android Studio（オプション）

Xcode: MacでiOSシミュレータを使ったり、iOS向けの詳細な設定を行う場合に必要です。
Android Studio: Androidエミュレータを使ったり、Android向けの詳細な設定を行う場合に必要です。

最初は必須ではありませんが、本格的な開発に進むタイミングで導入します。

4. アカウントの準備（サービス連携）

開発や公開、クラウド連携に必要なオンラインアカウントを作成します。

Expoアカウント（必須級）

プロジェクトの管理や、クラウドでのビルド（EAS Build）を行うために必要です。このサイトの手順では作成している前提で進めます。

GitHubアカウント（推奨）

コードをクラウドに保存し、バックアップや変更履歴の管理を行うために使います。AI開発では特に「壊れたときに戻せる」環境が重要です。

Googleアカウント

Firebase（バックエンド）の利用、Google Play Consoleでの公開、AdMobでの収益化など、Google系サービスを利用する際に必要になります。

Apple ID

iOS実機での確認や、App Store公開に必要です。通常のApple IDがあればまずは始められます。

開発者プログラム（公開時に必要）

Apple Developer Program: App Store公開に必要（年額制）。
Google Play Console: Google Play公開に必要（初回登録料のみ）。

これらはアプリを世界に公開する段階で登録すればOKです。

AIサブスクの考え方

IDEとは別に、ChatGPT、Claude、GeminiなどのAIチャットサービスもあると便利です。

Antigravity：コードを書く・修正する場所
AIチャット：設計相談・仕様整理・レビューの場所

どのサブスクに課金すべきか迷う場合は、「バイブコーディングにおすすめのAIサブスク比較」を参考にしてください。

5. 最初から用意しなくてもよいもの

アプリ開発と聞くと、最初からたくさんのサービスに登録しないといけないように感じるかもしれません。

しかし、最初からすべてを用意する必要はありません。

最初は不要なもの:

Apple Developer Program / Google Play Console
AdMobアカウント
Firebase / Supabaseプロジェクト
Android Studio / Xcode

まずは、Expoアプリを作って、手元のスマートフォンで動かすところを目指しましょう。

6. 準備チェックリスト

ここまでの内容をチェックリストにまとめます。

物理的な準備

MacまたはPCを用意した（Mac推奨）
iPhoneまたはAndroidスマホを用意した
安定したインターネット回線がある

ソフトウェアの準備

アカウントの準備

Expoアカウントを作成した
GitHubアカウントを作成した（推奨）
Googleアカウントを用意した
Apple ID を用意した
開発者プログラム（Apple Developer Program / Google Play Console）を登録した（公開時に必要）

7. このサイトで進めるロードマップ

Phase01：準備編（仮）

開発に必要なツールやアカウントを揃え、AIとの付き合い方を学びます。

Phase02：リサーチ編（仮）

Google Deep Researchを使い、アプリのアイデア、ターゲット、競合調査を行い、企画書を作ります。

Phase03：リデザイン編（仮）

Google Stitchを使い、アプリの画面案、導線設計、配色、デザイン仕様書を作ります。

Phase04：コーディング編（仮）

Microsoft Amplifierを使い、Expo Router、Stitchデザインのコンポーネント化、状態管理を実装します。

Phase05：フィードバック編（仮）

Firebase App Distributionを使い、テスト配布、テスター管理、フィードバック収集を行い改善します。

Phase06：公開＆マネタイズ編（仮）

EAS Buildでのビルド、ストア申請準備、ストア掲載文のAI作成を行い、リリースを目指します。

PhaseEx：発展事項編（仮）

Firebase連携、Push通知、AI機能、課金実装、CI/CDなど、より高度な機能を足していきます。

8. まとめ

この記事では、バイブコーディングでExpoアプリを作るための全体像と、最初に必要なものを整理しました。

最初はすべてを揃える必要はありません。まずは、Expoアプリを作ってスマホで動かすところから始めましょう。

次の記事では、実際にAntigravityとExpoを使って、開発環境を作る手順を進めていきます。