【個人開発者に必見】Bolt.new でiOSアプリを爆速開発
本記事について
「アプリのアイデアはあるけど、開発に時間がかかってすぐ試せない...」
「Webサイトは生成AIで作れるのに、iOSアプリはどうするの?」
そんなあなたに朗報です!
Bolt.new × Expo × React Native を使えば、ほとんどコードを書かずに iOSアプリを App Store にリリース できます!
本記事では、Bolt.new を使って iOS アプリをリリース申請できる状態まで準備する手順 について解説します!
この記事が参考になったら、「いいね」してもらえると嬉しいです!励みになります🙇♂️✨
Bolt.new とは?
Bolt.newは、AIが自動でコードを書いてくれる開発ツールのことです。
- ブラウザでそのまま開発(インストール不要)
- 自然な文章で指示するだけでアプリが作れる
- 作ったアプリをすぐデプロイできる
コスト
無料プランでは、1日あたり15万トークン、月間100万トークンの制限があります。
最も安いプランは月額20ドル(約2,900円)です。
なお、トークンの繰り越しはできません。
また、共同作業が可能な「Teamsプラン」も用意されています。
詳細はこちら
Expo とは?
Expoは、React Nativeの開発を簡単にするためのフレームワーク。
- Expo Goアプリを使用することで、実機でのテストが容易
- Expo SDKには、カメラや通知などのネイティブ特有の機能も提供
React Nativeとは?
React Native は、JavaScript(または TypeScript) を使って iOS や Android のネイティブアプリ を開発できるフレームワークです。
iOSアプリをリリース申請できる状態までの手順
Step 1: Bolt.new でアプリ作成
Bolt.new にアクセス
作りたいアプリのプロンプトを記述
具体的な指示はお任せしますが、React Native (Expo)
と明記しておくと良いと思います。
// プロンプト
React Native (Expo) を使用して、メモアプリ「~~」のコードを作成してください。
要件:
- 投稿(メモ)を作成・保存・編集・削除できる。
- 各投稿には、タイトル・本文・作成日時・最終更新日時が含まれる。
- 各投稿にスレッド(コメント)を追加できる。
- スレッドは投稿に紐づき、本文・作成日時・最終更新日時を持つ。
必要なコンポーネント:
- ホーム画面(投稿一覧、新規投稿ボタン)
...など
入力を終えると、以下のようにコードを自動で生成してくれます。
Expo Goで実機確認
コード生成が完了し、プレビューできる状態になったら、QRコードが表示されます。
「Expo Go」というアプリをインストールし、QRで読み取ると実機で作成したアプリを確認することができます。
また、Previewのタブを選択すると、ブラウザ上でもアプリの動作確認ができます。
Step 2: ローカル環境で動作確認
現在、bolt.new上ではiOSアプリをデプロイできません。(Webは可能)
bolt.newで作成したソースコードをローカル環境に取り込み、Expoのサービスを利用してデプロイし、アプリのリリース申請を行う必要があります。
その下準備について解説します。
ソースコードをダウンロード
Exportのタブを選択し、Downloadを選択します。
zipを解凍し、projectフォルダを取り出します。
お使いのエディタでこのようなフォルダ構成であることが確認できます。
依存関係のダウンロード
ターミナルを開き、projectフォルダに移動します。
依存関係のダウンロードし、node modulesが追加されていることを確認します。
$ npm install
あとは、Expoサーバーを立ち上げることで、ローカル環境で動作確認できます。
$ npx expo start
微調整などがあればやっておきましょう🏃♀️
これでデプロイの準備が整いました。
Step 3: EASでアプリをWeb上にデプロイする
EAS(Expo Application Services)とは、iOSアプリをデプロイできるExpoのサービスです。
ターミナル上でコマンドを実行することで、iOSアプリのビルドやデプロイを行えます。
-
EAS CLI をインストール
npm install -g eas-cli
-
EAS の設定
eas login
expoのアカウントが必要なので、コマンド入力前に作成しましょう。
コマンド入力後には、メールアドレスとパスワードの入力が必要になります。 -
app.jsonで名前を変更
{ "expo": { "name": "アプリ名", "slug": "app-name", // 一意な識別子にする。ハイフン推奨 ...略 } }
-
EASにプロジェクトを作成し、プロジェクトを紐付ける
eas init
コマンド入力後、使用するアカウントを聞かれるのでY(yes)かn(no)を入力します。
✔ Project successfully linked
と表示されたら、プロジェクトの紐付けが完了です。また、以下のリンクにアクセスすると、EASでプロジェクトが作成していることを確認できます。
-
EASビルド
eas build:configure
- Would you like us to run 'git init' in … yes
- Commit message: … Initial commit → そのままenter
- Which platforms would you like to configure for EAS Build? … All
-
エクスポートする
npx expo export --platform web
distフォルダが作成されていることが確認できます。
-
本番環境にデプロイ
eas deploy --prod
Step 4: EASでiOSアプリをデプロイ
このStepでは、Apple Accountが必要になります。
- iOSアプリのビルド
eas build -s
-
Select platform › iOS
と選択 - What would you like your iOS bundle identifier to be?→提案されたものエンター
- iOS app only uses standard/exempt encryption? … yes
- Do you want to log in to your Apple account? … yes、その後Apple IDとパスワード入力
- Generate a new Apple Distribution Certificate? … yes
- Generate a new Apple Provisioning Profile? … yes
- Generate a new App Store Connect API Key? … yes
-
Apple Store Connectにアクセスしたら、アプリ一覧にビルドしたアプリが表示されます。
TestFlight not ready, retrying in 25 seconds...で止まったら、以下の内部テスターの設定が必要です。
- iOSアプリのビルド
最後にCtrl+Cでプロセスを止めます。ExpoのSubmissionsのページでiOS App Store submissionがfinishedになっていることを確認してください。Waiting for submission to complete. You can press Ctrl+C to exit. ⠴ Submitting your app to Apple App Store Connect: waiting for an available submitter
これでApp Store Connectの方でビルドが選択できるようになり、リリース申請できる状態になりました🎉
TestFlightでも動作確認できると思います。
さいごに
いかがでしたか?
私は普段、Swiftを使ってiOSアプリを開発しています。Xcodeの生成AI対応は、Cursorなどと比べるとまだ十分に活用できるレベルではないため、Web開発の環境が少し羨ましく感じることもあります...。
しかし、今回の方法でiOSアプリをApp Storeに公開することも可能なので、実現したいアイデアを素早く試し、検証することができるのはとても嬉しいなと思いました。
Swiftでも実現できることを首を長くして待ちたいと思います。
参考にした動画はこちら:
YouTube: Build an app and deploy it with Bolt.new and Expo | AI Coder
この記事に誤りがありましたら、ご指摘いただけると幸いです。
Discussion