【Expo】Boltでモバイルアプリを作れるようになったよ + 実際に作ってみた

本日、2025年2月13日、Bolt.newでExpoを使ったモバイルアプリを開発できるようになりました。

Boltでモバイルアプリを作れるようになりました

StackBlitz が提供する AI 搭載の Web 開発エージェント「Bolt」は、プログラミング知識がなくても、自然な日本語でアプリの要件を指示するだけで、フロントエンドからバックエンドまでのWebアプリを自動生成・公開できる革新的なサービスです。

今まで、Next.jsやAstro、Nuxt.jsなどさまざまなフレームワークに対応していましたが、モバイルはNativeScriptのみに対応をしていました。

そして本日、2025年2月13日に、Expoでのモバイルアプリ開発にも対応しました。

Expoの公式ブログにもこの件が掲載されています。
https://expo.dev/blog/bolt-expo-integration-announcement

Expoとは

Expo は React Native をベースとした開発フレームワークで、iOS・Android・Web 向けのアプリを一括で管理・ビルドできる環境を提供しています。加えて下記の特徴が大きなメリットです。

超手軽に実機テストできる

「Expo Go」という専用スマートフォンアプリを利用すると、ローカルでビルドや設定をしなくても、スマートフォンのカメラで表示されたQRコードを読み取るだけで実機テストが可能です。

1. npx create-expo-app@latest（Expoプロジェクト作成）
2. npx expo start（ローカルで起動）
3. ターミナルに表示されたQRコードをスマホで読み取る
   この3Stepで実機テストができます。
   ホットリロードもできるので、とにかく開発体験が良いです。

追加で環境構築がほぼ不要

通常、ネイティブアプリを開発する場合は Xcode や Android Studio、各種 SDK のインストールが必須。しかし Expo はそのあたりを抽象化してくれるため、最小限のコマンド操作で iOS/Android 実機テストやストア申請が行えます。

Bolt とは

Bolt は、StackBlitz が提供するブラウザ上で動作する AI 搭載の開発エージェントです。

• ノーコード指向: 「こんな画面がほしい」「このようにデータを取得して表示してほしい」と自然言語で伝えると、Bolt の AI が自動的にアプリの雛形や機能実装を作り上げます。
• リアルタイムプレビュー: ブラウザだけでアプリのプレビューが確認でき、修正したい箇所をまた自然言語で伝えれば、AI がコードを再生成してくれるフローが特徴です。
• クラウド開発環境: ローカルのツールセットアップが不要で、インターネットとブラウザさえあれば開発が進められます。

このように Bolt は、プロトタイプの作成や迅速なアイデア検証、あるいはノーコード/ローコード開発を実現するうえで非常に強力な補助となるサービスです。

Bolt で Expo を使えるようになると、何が実現するのか

では Bolt が Expo をサポートすることで、具体的にどういった開発体験になるのでしょうか。

1. 自然言語ベースで画面や機能を指定
   「トップページにはアバター画像とプロフィール文、ボタンを押すと詳細ページに移動する構成にしたい」などといった要望を言葉で伝えるだけ。Bolt が Expo 用のコードを生成してくれます。

2. iOS・Android・Web への同時対応が可能
   Expo であれば、同一のコードベースからネイティブアプリ(iOS/Android)と Web アプリを一括で構築できます。Bolt が生成したプロジェクトをほぼそのままストアに提出できる形に仕上げられるので、かなりの時短になります。

3. ローカル環境構築の大半を省略
   本来はモバイルアプリ開発に必要な多くの SDK やエミュレータのセットアップを、Expo が抽象化。さらに Bolt もブラウザ中心のワークフローなので、PC に込み入った環境設定がなくても開発が始められます。

実際に試してみる

実際に、Boltを使用してExpo製のアプリを作ってみます。

1. Boltに指示を出す

Bolt.newのダッシュボードに「Build a mobile app with Expo」という選択肢が追加されています。
それを選択すると、プロンプト入力フォームに「Build a mobile app that ...」と入力されるので、作りたいプロダクトを自然言語で説明します。

今回は「simple todo app with expo」としました。
確定ボタンを押すと、そのままBoltがReact Native(Expo)を使用して自律的に開発を始めます。

画面左側ではBoltとのチャットが、画面右側では実装の様子が示されます

今回は約54秒で最初の実装が完了しました。
次は、実際にそれを動かしてみます。

2. Boltが実装したものを動かしてみる

確認する方法が2種類あります。

2.1. Bolt上で確認

驚いたのですが、Bolt上でプレビューが見れます。
さらに、以下のGIF動画のように、Bolt上でアプリケーションの操作・入力を行えます。

実際にキーボードを利用してタスクを作成してみました

2.2. Expo Goを使用して、スマホ実機で確認

「Expo Go」という専用アプリを使用することで、手元のスマホで実際に確認することもできます。

Expo Goはストア経由でダウンロードできるモバイルアプリです。
説明ページはこちら👉 https://expo.dev/go

まず、画面右上の「Device Preview」ボタンを選択（赤枠部分）

すると、ExpoGoで読み込むためのQRコードが表示されます（紫枠部分）

ExpoGoをインストール済みのスマホで、そのQRコードをカメラから読み込むだけで、簡単に実機確認ができます。

実機確認の様子

アプリダウンロード(初回は少し時間がかかります)→アプリ起動

今回は要件も特に伝えず、一発目のビルド物だったので、確認したアプリでは 「タスクの追加」機能のみを確認 できました。「タスクの完了・削除」はモックとしてのみ用意されてます。
また、ローカルストレージを使用しているので、ブラウザ上と実機スマホ上のタスクは連動しません。

おまけ:Boltではデフォルトでどのようなライブラリを使用しているのか

Boltによって生成されたExpoプロジェクトでは、どのようなライブラリがデフォルトで使われているのかを調べてみました（2025/2/13時点）

• 最初からappディレクトリが作られており、Expo Routerライブラリが導入されています。
• スタイリングにTailwind（NativeWind）は使用されておらず、CSSで書かれています。
• そのほか、package.jsonは以下のようになっていました。

package.jsonの中身

```json:package.json { "name": "bolt-expo-starter", "main": "expo-router/entry", "version": "1.0.0", "private": true, "scripts": { "dev": "EXPO_NO_TELEMETRY=1 expo start", "build:web": "expo export --platform web", "lint": "expo lint" }, "dependencies": { "@expo/vector-icons": "^14.0.2", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/native": "^7.0.14", "expo": "52.0.33", "expo-blur": "^14.0.3", "expo-constants": "^17.0.5", "expo-font": "^13.0.3", "expo-haptics": "^14.0.1", "expo-linear-gradient": "^14.0.2", "expo-linking": "^7.0.5", "expo-router": "4.0.17", "expo-splash-screen": "^0.29.21", "expo-status-bar": "^2.0.1", "expo-symbols": "^0.2.2", "expo-system-ui": "^4.0.7", "expo-web-browser": "^14.0.2", "@react-native-async-storage/async-storage": "1.21.0", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.6", "react-native-gesture-handler": "^2.23.0", "react-native-reanimated": "^3.16.7", "react-native-safe-area-context": "4.12.0", "react-native-screens": "^4.4.0", "react-native-url-polyfill": "^2.0.0", "react-native-web": "^0.19.13", "react-native-webview": "13.12.5" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/react": "~18.3.12", "typescript": "^5.3.3" } } ```

Expoのプロジェクトを開発するにあたり、Boltがデフォルトでどのようなライブラリを採用、不採用するかの判断を参考にすることで、中期目線で考えたときにExpoで主流になる開発手法を追いやすくなるのではないかと個人的に思っています。

まとめ

今回はとりあえず、Boltを用いたExpoのモバイルアプリ開発について、プロジェクト作成から成果物の確認まで行いました。
実際はそこから機能追加・修正を繰り返し、完成したものをストアに提出する工程があります。

参考程度に、Expo製のモバイルアプリをストアに提出する工程について説明いたします。

Expo Application Services (EAS) でビルド & デプロイ

ExpoにはEAS（Expo Application Services）という〇〇があり、作成したアプリをiOS/Android のストアや Webへ簡単にビルド・ホスティングできます。App Store Connect や Google Play Console のややこしい手動設定も最小限で済ませられます。

Today, you can build an app with Bolt and Expo—which is fantastic. The next step in this integration is bringing Expo Application Services (EAS) into Bolt. Once that happens, you’ll be able to build, submit, and deploy your apps in a single seamless motion.

公式情報では、Expo Application Services (EAS) が Bolt に統合される計画も示唆されています。EAS 対応がさらに進むと、Bolt で生成したアプリをBolt の操作だけでビルド・提出・ストア公開といった一連の流れが可能になる見込みです。

実際に、現段階でも、Boltエディタの右上にある「Deploy」ボタンをクリックすると、「Deploy to App Store」という選択肢が出てきます。

こちらは、ストアリリース工程の説明ページにリンクされていました（下記リンク）
https://docs.expo.dev/deploy/submit-to-app-stores/

すこし難しそうな工程ですが、この辺りもEAS正式対応の流れで簡略化されてくると嬉しいです。

おわりに

ここまでお読みいただきありがとうございました。

モバイルアプリ開発はWebと比較すると、シミュレータの設定やアプリストアへの提出など、専門性が高く難しいというという印象がありました。
それが今回、Boltのような自然言語開発環境と、Expoの簡便なテスト手法の組み合わせで、開発難易度が下がってくる兆しが見えました。
そのため、これから今まで以上に多くの方が開発領域に参加できるようになるのではないかと思っています。

今後、Bolt 側で EAS との連携がさらに強化されれば、ブラウザ上の自然言語指示だけでストア公開まで実行できる開発体験が実現するかもしれません。
新しい開発の潮流として、ぜひ注目してみてください。

---

私はふだん、AIをフル活用した個人開発を行なっています。
もともとWEBデザイナーとして、プログラミングに何度も挫折して諦めていたのですが、AIと協業するようになって、今ようやく個人単位で開発ができるようになりました。
普通のエンジニアの方よりも大きくAIに頼り、属人性や技能に依らない開発手法を研究しています。

AIを駆使した開発手法についてよく投稿しています。
ご興味ある方はぜひXのフォローお願いします！
https://x.com/dai_mori219