バイブコーディングでExpoアプリを作る全体ロードマップ
バイブコーディングを使えば、AIに相談しながらスマホアプリを作れるようになります。
ただし、いきなりコードを書き始めると、次のようなところで迷いやすくなります。
- どのAIツールを使えばいいのか
- どのIDEを使えばいいのか
- Expoとは何か
- iPhoneで動作確認するには何が必要か
- Androidでも確認できるのか
- ExpoアカウントやGitHubアカウントは必要なのか
- App StoreやGoogle Playに公開するには何が必要なのか
この記事では、バイブコーディングでExpoアプリを作るために、最初に必要なものと、今後の学習ロードマップを整理します。
この記事のサブコンテンツ
Section titled “この記事のサブコンテンツ”この記事は、次のサブコンテンツに分けて整理します。
- バイブコーディングでExpoアプリを作る全体像
- 最初に必要なもの
- iOSで動作確認したい場合に必要なもの
- Androidで動作確認したい場合に必要なもの
- 作っておきたいアカウント
- AIツールとIDEの推奨構成
- 最初から用意しなくてもよいもの
- 準備チェックリスト
- このサイトで進めるロードマップ
- まとめ
1. バイブコーディングでExpoアプリを作る全体像
Section titled “1. バイブコーディングでExpoアプリを作る全体像”バイブコーディングとは
Section titled “バイブコーディングとは”バイブコーディングとは、AIに自然言語で指示を出しながら、アプリやWebサービスを作っていく開発スタイルです。
従来の開発では、自分でコードを細かく書いていく必要がありました。
一方で、バイブコーディングでは、次のような指示をAIに出しながら開発を進めます。
- こういうアプリを作りたい
- この画面を追加してほしい
- このエラーを直してほしい
- このコードを整理してほしい
- もっと使いやすいUIにしてほしい
- この機能を追加するための手順を教えてほしい
もちろん、AIが書いたコードをすべてそのまま信じてよいわけではありません。
しかし、仕様書作成、画面実装、エラー修正、コード整理などをAIに手伝ってもらうことで、個人でもアプリ開発を進めやすくなります。
このサイトでは、ExpoアプリをAIと一緒に作っていく方法を扱います。
なぜExpoを使うのか
Section titled “なぜExpoを使うのか”Expoは、React Nativeを使ってiOS・Androidアプリを作るための開発環境です。
Expoを使うと、比較的少ない準備でスマホアプリ開発を始められます。
Expoを使う主なメリットは次のとおりです。
- iOS / Androidアプリを同じコードベースで作れる
- Expo Goを使ってスマホ実機で確認しやすい
- React / JavaScript / TypeScriptの知識を活かしやすい
- EAS Buildを使ってアプリ公開用のビルドを作れる
- カメラ、通知、位置情報などスマホらしい機能を扱いやすい
このサイトでは、Expoを使って、最初の小さなアプリから、公開・収益化を目指せるアプリまで段階的に作っていきます。
このサイトで作っていくもの
Section titled “このサイトで作っていくもの”このサイトでは、いきなり大きなアプリを作るのではなく、小さなアプリを少しずつ育てていきます。
最初は、次のようなシンプルなアプリから始めます。
- メモアプリ
- タスク管理アプリ
- 習慣記録アプリ
- シンプルな一覧管理アプリ
そこから、次のような機能を順番に追加していきます。
- 画面遷移
- 一覧画面
- 詳細画面
- 作成フォーム
- 編集フォーム
- 検索
- ローカル保存
- ログイン
- データベース連携
- 通知
- 画像アップロード
- 広告
- アプリ内課金
- ストア公開
2. 最初に必要なもの
Section titled “2. 最初に必要なもの”ここからは、バイブコーディングでExpoアプリを作るために必要なものを整理します。
最初からすべてを完璧に揃える必要はありません。
ただし、途中で詰まらないように、最低限必要なものと、後から必要になるものを分けて理解しておきましょう。
Expoアプリを開発するには、基本的にパソコンが必要です。
このサイトでは、Macでの開発を推奨します。
理由は、iOSでの動作確認や、将来的なApp Store公開まで考えると、Macの方が進めやすいからです。
WindowsでもExpo開発は可能です。
Android向けの開発や、Expo Goを使った確認であればWindowsでも進められます。
ただし、iOSシミュレータを使った確認や、App Store公開まで見据える場合は、Macがあると安心です。
安定したインターネット回線
Section titled “安定したインターネット回線”Expoアプリ開発では、インターネット接続がほぼ必須です。
たとえば、次のような場面でネット接続を使います。
- Node.jsやnpmパッケージのインストール
- Expoプロジェクトの作成
- Expo Goでの実機確認
- AIツールの利用
- GitHubへのコード保存
- EAS Buildでのアプリビルド
- SupabaseやFirebaseなど外部サービスとの連携
特にバイブコーディングでは、AIツールを頻繁に使うため、安定したインターネット回線を用意しておきましょう。
スマートフォン実機
Section titled “スマートフォン実機”Expoアプリは、スマートフォン実機で確認しながら開発するのがおすすめです。
最低限、次のどちらか1台があれば始められます。
- iPhone
- Androidスマホ
理想は、iPhoneとAndroidの両方で確認できる環境です。
ただし、最初から両方を用意する必要はありません。
まずは手元にあるスマートフォンで動かしてみましょう。
Node.js
Section titled “Node.js”Expoアプリを作るには、Node.jsが必要です。
Node.jsは、JavaScriptやTypeScriptの開発環境として使われます。
Expoプロジェクトの作成や、ライブラリのインストールにも必要です。
基本的には、LTS版をインストールしておけば問題ありません。
LTSとは、長期サポート版のことです。
開発で安定して使いやすいバージョンだと考えてください。
Gitは、コードの変更履歴を管理するためのツールです。
バイブコーディングでは、AIが複数のファイルをまとめて編集することがあります。
そのため、次のような作業が重要になります。
- どこを変更したのか確認する
- うまくいかなかった変更を戻す
- 作業の区切りごとに保存する
- GitHubにコードをバックアップする
AIにコードを書かせる場合こそ、Gitで変更履歴を残すことをおすすめします。
3. iOSで動作確認したい場合に必要なもの
Section titled “3. iOSで動作確認したい場合に必要なもの”このサイトでは、iOSでも動作確認する前提で進めます。
iPhoneでアプリを確認したい場合、次のものを用意しておきましょう。
iOSアプリの開発・確認・公開まで見据える場合、Macを使うのがおすすめです。
Expo Goを使った簡単な確認であれば、iPhone実機だけでも進められる範囲があります。
ただし、次のような作業をする場合は、Macがあるとスムーズです。
- iOSシミュレータで確認する
- Xcodeを使う
- iOS向けのDevelopment Buildを扱う
- TestFlightで配布する
- App Storeに公開する
そのため、このサイトではMacを推奨環境とします。
iPhone
Section titled “iPhone”iOS実機で確認するには、iPhoneが必要です。
最初は、iPhoneにExpo Goアプリをインストールして、開発中のExpoアプリを確認します。
Expo Goを使えば、App Storeに公開する前でも、開発中のアプリを手元のiPhoneで確認できます。
Expo Goアプリ
Section titled “Expo Goアプリ”Expo Goは、開発中のExpoアプリをスマートフォンで確認するためのアプリです。
最初の段階では、Expo Goを使って動作確認するのが簡単です。
ただし、すべての機能がExpo Goだけで確認できるわけではありません。
たとえば、次のような機能を扱う段階では、Development Buildが必要になることがあります。
- 一部のネイティブライブラリ
- 広告
- 通知
- 課金
- ネイティブ設定が必要な機能
最初はExpo Goで十分です。
応用編や公開前の段階で、必要に応じてDevelopment Buildを扱います。
Apple ID
Section titled “Apple ID”iPhoneを使っている人であれば、すでにApple IDを持っていることが多いと思います。
Expo Goで確認するだけなら、まずは通常のApple IDがあれば十分です。
ただし、App Store公開やTestFlight配布を行う段階では、Apple Developer Programへの登録が必要になります。
Apple Developer Program
Section titled “Apple Developer Program”Apple Developer Programは、iOSアプリをApp Storeで公開したり、TestFlightで配布したりするために必要な開発者プログラムです。
最初から登録する必要はありません。
このロードマップでは、まずExpoアプリを作って動かすところから始めます。
App Store公開を目指す段階で、Apple Developer Programへの登録を検討すればOKです。
4. Androidで動作確認したい場合に必要なもの
Section titled “4. Androidで動作確認したい場合に必要なもの”Androidでも確認したい場合は、次のものを用意します。
Androidスマホ
Section titled “Androidスマホ”Android実機がある場合は、Expo Goをインストールして確認できます。
iPhoneと同じように、開発中のExpoアプリをスマホ上で動かせます。
Android Studio
Section titled “Android Studio”Android Studioは、Androidアプリ開発の公式IDEです。
Expo開発では、最初から必須ではありません。
ただし、次のような場合には必要になることがあります。
- Androidエミュレータを使いたい
- Androidビルドの細かい確認をしたい
- ネイティブ側の設定を確認したい
最初はAndroid実機とExpo Goだけでも始められます。
Android Studioは、必要になったタイミングで導入しても問題ありません。
5. 作っておきたいアカウント
Section titled “5. 作っておきたいアカウント”Expoアプリ開発を進めるうえで、作っておきたいアカウントがあります。
必須のものと、後から必要になるものを分けて整理します。
Expoアカウント
Section titled “Expoアカウント”このサイトでは、Expoアカウントは作成しておく前提で進めます。
Expoアカウントがあると、次のような作業がしやすくなります。
- Expoプロジェクトの管理
- EAS Buildの利用
- Android / iOS向けビルド
- 公開前の開発ビルド作成
最初のExpo Go確認だけなら不要な場面もありますが、今後の公開やビルドまで考えると、早めに作っておくのがおすすめです。
GitHubアカウント
Section titled “GitHubアカウント”GitHubアカウントは必須ではありませんが、強く推奨します。
理由は、バイブコーディングではAIがコードを大きく変更することがあるからです。
GitHubを使うと、次のようなメリットがあります。
- コードをクラウドに保存できる
- 変更履歴を管理できる
- 作業を戻しやすい
- 別の環境でも作業しやすい
- 将来的にポートフォリオとして見せられる
このサイトでは、GitとGitHubを使ってコードを管理する前提で進めます。
Googleアカウント
Section titled “Googleアカウント”Googleアカウントは、後のPhaseで必要になる場面があります。
たとえば、次のようなサービスを使う場合です。
- Firebase
- Google Play Console
- AdMob
- Google Analytics
最初からすべて設定する必要はありません。
ただし、アプリ公開や収益化を目指すなら、Googleアカウントも用意しておきましょう。
Apple Developer Program / Google Play Console
Section titled “Apple Developer Program / Google Play Console”それぞれApp Store、Google Playでの公開時に必要です。
これらも最初から登録する必要はありません。公開編に進むタイミングで用意すればOKです。
6. AIツールとIDEの推奨構成
Section titled “6. AIツールとIDEの推奨構成”このサイトは、バイブコーディングを前提にしています。
そのため、AIツールとIDE選びは重要です。
このサイトの推奨IDE
Section titled “このサイトの推奨IDE”このサイトでは、主にAntigravityを使います。
推奨順は次のとおりです。
- Antigravity (本サイト推奨)
- Firebase Studio
- Cursor
1. Antigravity
Section titled “1. Antigravity”このサイトで主に使うIDEです。
Antigravityは、AIに指示しながらアプリ開発を進める用途に向いています。
このロードマップでは、Antigravityを使って、Expoアプリの作成、修正、エラー対応、機能追加を進めていきます。
Antigravityで扱う主な作業は次のとおりです。
- Expoプロジェクトの作成
- 画面の追加
- コンポーネントの作成
- エラー修正
- コードの整理
- 機能追加
- リファクタリング
- AIへの作業指示
2. Firebase Studio
Section titled “2. Firebase Studio”Firebase Studioも、バイブコーディングに使える開発環境の候補です。
特に、FirebaseやGoogle系サービスと組み合わせてアプリを作りたい場合に選択肢になります。
3. Cursor
Section titled “3. Cursor”Cursorは、AI機能が組み込まれたコードエディタです。
すでにCursorに慣れている人は、Cursorで進めても問題ありませんが、本サイトではAntigravityを前提に説明します。
AIサブスクの考え方
Section titled “AIサブスクの考え方”IDEとは別に、ChatGPT、Claude、GeminiなどのAIチャットサービスもあると便利です。
- Antigravity：コードを書く・修正する場所
- AIチャット：設計相談・仕様整理・レビューの場所
7. 最初から用意しなくてもよいもの
Section titled “7. 最初から用意しなくてもよいもの”アプリ開発と聞くと、最初からたくさんのサービスに登録しないといけないように感じるかもしれません。
しかし、最初からすべてを用意する必要はありません。
最初は不要なもの:
- Apple Developer Program / Google Play Console
- AdMobアカウント
- Firebase / Supabaseプロジェクト
- Android Studio / Xcode
まずは、Expoアプリを作って、手元のスマートフォンで動かすところを目指しましょう。
8. 準備チェックリスト
Section titled “8. 準備チェックリスト”ここまでの内容をチェックリストにまとめます。
最低限の準備
Section titled “最低限の準備”- MacまたはPCを用意した
- 安定したインターネット回線がある
- iPhoneまたはAndroidスマホがある
- Node.js LTSをインストールした
- Gitをインストールした
- Antigravityを使える状態にした
- Expo Goをスマホにインストールした
- Expoアカウントを作成した
- GitHubアカウントを作成した（推奨）
9. このサイトで進めるロードマップ
Section titled “9. このサイトで進めるロードマップ”Phase 1：準備編（仮）
Section titled “Phase 1：準備編（仮）”開発に必要なツールやアカウントを揃え、AIとの付き合い方を学びます。
Phase 2：Expo基礎編（仮）
Section titled “Phase 2：Expo基礎編（仮）”Expoで最小構成のアプリを作り、スマートフォンで動かします。
Phase 3：フロントエンド編（仮）
Section titled “Phase 3：フロントエンド編（仮）”アプリの見た目や操作部分、共通コンポーネントなどを作ります。
Phase 4：バックエンド編（仮）
Section titled “Phase 4：バックエンド編（仮）”APIの基本や認証の考え方など、アプリの裏側の仕組みを理解します。
Phase 5：データベース編（仮）
Section titled “Phase 5：データベース編（仮）”データの保存方法（ローカル・クラウド）を学びます。
Phase 6：Expo応用編（仮）
Section titled “Phase 6：Expo応用編（仮）”プッシュ通知、カメラ、位置情報など、スマホらしい機能を追加します。
Phase 7：収益化・公開編（仮）
Section titled “Phase 7：収益化・公開編（仮）”AdMob広告、アプリ内課金、ストア申請など、アプリを公開・収益化します。
Phase Ex：品質改善・セキュリティ編（仮）
Section titled “Phase Ex：品質改善・セキュリティ編（仮）”AI生成コードのレビュー、リファクタリング、セキュリティチェックを行います。
10. まとめ
Section titled “10. まとめ”この記事では、バイブコーディングでExpoアプリを作るための全体像と、最初に必要なものを整理しました。
最初はすべてを揃える必要はありません。まずは、Expoアプリを作ってスマホで動かすところから始めましょう。
次の記事では、実際にAntigravityとExpoを使って、開発環境を作る手順を進めていきます。