スマホアプリ(iOS / Android)の開発は、ネイティブ言語やビルドの作法を一から覚える必要があり、長らく「専門職の領域」でした。Claude Code を相棒にすると、Web の知識がある人なら会話で指示しながらアプリを組み立てられます。本稿では、もっとも入りやすい Expo(React Native)を軸に、環境づくりから実機確認、ストア公開までを 2026 年時点の実態に沿って、図とともに整理します。
FIG.1 「指示 → 生成 → 画面で確認 → また指示」を小さく回すのが基本リズム
大事なのは、最初から完成形を狙わないこと。1 画面・1 機能ずつ動かして確認し、その結果を言葉で返す——この往復を積み重ねるのが、AI と作るときの一番速いやり方です。
01どの土台で作るか — 選択肢は 3 つ
モバイル開発の「土台(フレームワーク)」は大きく 3 系統。Web 経験があるなら、まずは Expo(React Native)が無難です。理由は、JavaScript / TypeScript と React の知識がそのまま生き、iOS と Android を 1 つのコードで賄えるから。
Expo / React Native
JS・TS で書け、iOS / Android / Web に展開。Web 開発者がそのまま入れる。本稿の主役。
Flutter(Dart)
Google 製。独自言語 Dart を覚える必要はあるが、UI の作り込み自由度が高くデスクトップ展開も可。
ネイティブ(Swift / Kotlin)
iOS は Swift、Android は Kotlin。最高の性能と OS 統合が得られる反面、2 言語ぶんの学習コスト。
Flutter とネイティブも Claude Code で扱えますが、Dart や Swift/Kotlin は Web の知識から少し離れます。「まず動くものを早く」なら Expo、「凝った UI やデスクトップ対応も」なら Flutter、「OS 固有の最先端機能をフルに」ならネイティブ、と目的で選び分けてください。
02Expo で最初のプロジェクトを作る
Expo は React Native の公式系フレームワークで、ビルドや配信の面倒を肩代わりしてくれます。準備するのは Node.js だけ。かつて推奨されていた expo-cli のグローバル導入は不要になり、いまは npx 経由で最新ツールを直接呼ぶのが標準です。
# 新規プロジェクトを作成(--template なしで既定構成) npx create-expo-app@latest my-app cd my-app # このフォルダで Claude Code を起動 claude
2026 年時点の既定テンプレートは、Expo Router(ファイルベースのルーティング)を採用しています。app/ フォルダに置いたファイルが、そのまま 1 画面(ルート)になる仕組みで、Next.js を触ったことがある人には馴染み深いはず。以前のように「画面を増やすたびにナビゲーション設定を手書きする」必要はありません。
FIG.2 Expo Router=ファイル配置がそのまま画面と URL(ディープリンク)になる
03Claude Code にプロジェクトを理解させる
起動したら、いきなり機能を頼む前に現状を把握させるのがコツ。構造と方針を共有してから作り始めると、的外れな実装が減ります。
> このプロジェクトの構成を教えて。Expo Router の前提でいい? > まずシンプルな ToDo アプリを作りたい。どの画面から作るのがおすすめ? > 状態管理は重くしたくない。最小限の構成を提案して
このとき、リポジトリ直下に CLAUDE.md を置いて「使う言語・ライブラリ・命名規則・やってほしくないこと」を書いておくと、毎回の前提共有が省けます。これは Expo に限らず Claude Code 全般で効く定石です。
041 機能ずつ実装する
「全部いっぺんに」ではなく、動かして確かめられる単位に切って依頼します。データの保存ロジック → 画面、の順だと検証しやすい。
データと保存を先に
「ToDo の型と保存ロジックを作って。AsyncStorage で永続化、テストも添えて」。UI の前にデータの土台を固める。
画面を足す
「一覧画面と追加画面を作って。Expo Router のファイルベースで、画面遷移もつないで」。ルートはファイルを足すだけ。
動かして確認
「iOS シミュレータで見たい。起動コマンドは?」。表示を見て、気になった点をまた言葉で返す。
うまくいかない時は、エラーメッセージをそのまま貼って「これはなぜ?どう直す?」と聞けば、原因の切り分けまで手伝ってくれます。
05シミュレータと実機で確認する
書いたコードは必ず画面で確かめます。手段は 3 つ。最短は手持ちスマホに Expo Go を入れて QR で開く方法です。
| 手軽さ重視(Expo Go・実機) | 本番に近い(シミュレータ / 開発ビルド) |
|---|---|
スマホに Expo Go を入れ、npx expo start の QR を読むだけ | iOS は Xcode、Android は Android Studio が必要(Mac / 各 OS 制約あり) |
| セットアップ最短・実機の使用感をすぐ確認 | カメラ・通知などネイティブ機能の検証や、配布前の最終確認に向く |
| 一部のネイティブ拡張は Expo Go では動かないことがある | npx expo start --ios / --android でシミュレータ起動+ホットリロード |
標準機能だけのうちは Expo Go で十分。Expo Go に含まれないネイティブモジュールを使い始めたら、開発ビルド(development build)を作って実機・シミュレータで確認する、という流れに進みます。
06こう頼める — 典型タスク
やりたいことを日常語で投げれば、必要なライブラリ選定から実装まで進めてくれます。例:
- 「メールとパスワードで入力するログイン画面を作って」
- 「カメラを起動して写真を撮るボタンを付けて」
- 「位置情報を取得して地図に現在地を表示して」
- 「プッシュ通知を実装して(Expo Notifications で)」
- 「ユーザー認証を Firebase / Supabase で統合して」
UI を整えたいなら「NativeWind(Tailwind 風)で」「コンポーネントは使い回せる形に」、状態管理なら「Zustand か Jotai で軽く」のように、好みのライブラリ名を添えると意図どおりに進みやすくなります。
07つまずきやすいポイント
- OS 権限:カメラ・位置情報・通知は OS の許可が要ります。「権限の申請コードと、拒否されたときの導線も」と頼むと抜けが減る。
- iOS と Android の差:見た目や挙動が分かれる箇所はプラットフォーム別の分岐が要る。両方で必ず実機確認する。
- ネイティブモジュール:Expo Go に含まれない機能を使うときは、開発ビルドに切り替える(以前の「Bare Workflow へ移行」に相当する考え方)。
- ビルド・公開:手元の Mac が無くても、後述の EAS Build(クラウドビルド)で iOS / Android の配布物を作れる。
08ストアに出す — EAS Build / EAS Submit
公開段階で頼りになるのが Expo の EAS(Expo Application Services)。npx create-expo-app から始めて、クラウドでビルドし、ストアに提出するまでを CLI で通せます。Mac を持っていなくても iOS 向けビルドができるのが大きい利点です。
FIG.3 EAS Build でビルド → EAS Submit で提出 → 各ストアの審査へ
iOS(App Store)
- Apple Developer Program に加入(個人は 年 99 USD)
- EAS Build で
.ipaを作成(Mac 不要) - EAS Submit で App Store Connect へ提出(手動アップロードも可)
- Apple の審査(おおむね 1〜3 日。内容により前後する)
Android(Google Play)
- Google Play Developer に登録(25 USD・初回一回のみ)
- EAS Build で
.aabを作成 - EAS Submit で Play Console へ提出
- Google の審査(数時間〜1 日が目安。初回は長引くことがある)
手元の Mac が無くても、クラウドビルドで iOS まで出せるのが Expo を選ぶ最大の安心材料。
09AI と作るときのコツ
- Web の知識を流用する:React の考え方(コンポーネント・状態・props)はそのまま通用する。
- 1 画面ずつ:「ログイン → ホーム → 詳細」と段階的に。一気に頼むと検証が難しくなる。
- 具体的に頼む:使いたいライブラリ名・画面名・入出力を明示すると、手戻りが減る。
- 必ず画面で確認:ビルドが通っても、実機・シミュレータで見るまで「できた」と判断しない。
10練習に向くサンプル
最初の一本は、保存と一覧だけで完結する小さなものが向きます。慣れたらカメラや位置情報など OS 機能に踏み込みましょう。
家計簿アプリ
入力・一覧・合計だけで形になる。保存と集計の練習に最適。
習慣記録アプリ
チェックと連続日数の表示。通知(リマインド)に発展させやすい。
QR スキャナー
カメラ権限とネイティブ機能の入口。開発ビルドへ進むきっかけにも。
11次のステップ
1 機能ずつの開発に慣れたら、Claude Code に複数の役割を分担させて自律性を高める「サブエージェント活用」へ進みましょう。役割を分けることで、調査・実装・レビューを並行して任せられるようになります。