Claude Codeでモバイルアプリを作る：A-Z完全ガイド（2026年）

- モバイルのツール類（Expo SDK、EAS）は進化が速いので、このガイドが古くならないように@latest系のコマンドを使っています。

Claude Codeでモバイルアプリは作れる？

はい、Claude Codeでモバイルアプリは作れますし、JavaScriptスタックにこだわれば十分な出来栄えになります。Claude CodeはAnthropicのエージェント型コマンドラインツールです。リポジトリ全体を読み、ファイルを書いたり編集したりし、ターミナルコマンド（npx expo startやeas buildなど）を実行し、エラーログを読んで、アプリが動くまで自分で反復します（Anthropic - Claude Code docs, 2026）。

だからこそClaude Codeは、スマホアプリをバイブコーディングするのに理想的なパートナーになります。アプリが何をすべきかにあなたが集中し、繰り返しの入力作業はClaude Codeが引き受けます。React Native + Expoなら、雛形作成、開発サーバーの起動、.apkやTestFlightビルドのパッケージングまで、一連の流れがすべてCLIコマンドで完結します。そこはまさにClaude Codeが得意とする領域です。

はっきり言っておきます。Claude Codeは、あなたのプロダクト理解を肩代わりしてくれるわけではありません。「AIでモバイルアプリを作る」部分、つまりJS/UIレイヤーでは高速ですが、深いネイティブモジュール（Swift/Kotlin）やストア審査のプロセスは、やはりあなたが必要です。まったくの初心者なら、まずClaude Codeとは何かを読んで、仕組みを把握しておきましょう。

ファイルを1つずつ手で打ち込んだり、チャット画面からコピペしたりするのと比べて、最大の違いは、Claude Codeがプロジェクトの内側で動くことです。Expo Routerのフォルダ構成を見て、package.jsonを読んでどのライブラリを使っているかを把握し、開発サーバーを起動してエラーを自分で読み返せます。「編集し、実行し、エラーを読み、また直す」というループが、ターミナルの中で完結するので、ブラウザとエディタを行き来することはほとんどありません。この働き方こそ、変更のたびにExpo Goで再実行して確認する必要があるモバイルにぴったりなのです。

準備：スタックを選び、環境を整える

コマンドを1つ打つ前に、まずスタックを選びましょう。私が判断に使っているマトリクスは以下のとおりで、AgentKitのmobile-appスキルと同じ考え方です。

このガイドでは、動くアプリに最速でたどり着けるのでExpo + React Nativeを採用します。必要なものは次のとおりです。

• Node LTS（最新リリース。これでnpxが動きます）。
• Expo Goを実機（iOS App Store / Google Play）にインストール。ビルドなしで即座にアプリを確認できます。
• Claude Codeをマシンにインストール。Claude Codeインストールガイドを参照してください。
• macOSが必要なのは、App Store向けにiOS版をビルドするときだけです。それ以外（コーディング、Androidでのテスト、Expo Goでの開発）は、Windows/Linuxでも問題なく動きます。

始めるのにXcodeやAndroid Studioのインストールは不要です。テスト実行はExpo Goが担い、ネイティブのビルド工程はEASを通じてクラウドで行われます（ステップ6で解説します）。

ステップ1 - Claude Codeでアプリを計画する

AIに「アプリを作って」と言って、いきなり入力へ突っ走らせてはいけません。最も価値ある一手は、コードを1行も書く前にスコープを固めることです。私はClaude Codeをプランモードで開き、作りたいアプリを説明します。このガイドでは小さな習慣トラッカーを作ります。習慣のリスト、日々のチェックオフ、そして連続記録（ストリーク）の表示です。

私が使うプロンプトは、だいたいこんな感じです。

I want to build a habit-tracker mobile app with Expo + React Native.
Before writing code, propose:
1. A list of screens (list, detail, add/edit a habit, stats)
2. A data model (habit, daily tick log)
3. State + local storage (offline-first)
Do not write code yet. Just settle the plan for me to review.

Claude Codeは、レビュー用の画面マップとデータモデルを返してくれます。計画のレイヤーで直すほうが、20個のファイルができてから直すよりずっと安上がりです。このテクニックをさらに深掘りするなら、Claude Codeでプロジェクトを計画する方法をご覧ください。

ステップ2 - Expoプロジェクトの雛形とモバイル用CLAUDE.mdを用意する

計画が固まったら、Claude Code（またはあなた自身）にプロジェクト作成コマンドを実行させましょう。

npx create-expo-app@latest habit-tracker
cd habit-tracker
npx expo start

create-expo-appはExpo Router（Next.jsのようなファイルベースのルーティング）で構成をセットアップします。npx expo startは開発サーバーを起動し、QRコードを表示します。スマホのExpo Goでそれをスキャンすれば、ビルドなしでアプリがすぐに動きます。

出力品質に最も大きな差を生む唯一のものが、モバイル用のCLAUDE.mdです。これはClaude Codeが作業のたびに読む「規約ファイル」で、リポジトリのルートに置きます。私のコピペ用テンプレートはこちらです。

# CLAUDE.md - Habit Tracker (Expo + React Native)

## Stack
- Expo (latest SDK) + React Native + TypeScript
- Routing: Expo Router (file-based, app/ directory)
- State: Zustand
- Local storage: AsyncStorage (offline-first, no network dependency)

## Code conventions
- Function components + hooks; NO class components
- File names kebab-case; components PascalCase
- Absolute imports via the @/ alias (configured in metro/tsconfig)
- Style with StyleSheet.create; no hardcoded colors - use the theme in constants/

## Working rules
- Before committing: run `npx tsc --noEmit` and `npx expo lint`, fix all errors
- Each screen lives in app/; split logic into hooks/ if over 100 lines
- Never hardcode API keys; read from env vars / expo-constants
- After a UI change, remind me to re-test on Expo Go

このファイルがあると、Claude Codeはセッション全体を通して同じ規約に従い続けます。毎回ちがうやり方で作られることがなくなります。CLAUDE.mdの仕組みを深く理解するには、CLAUDE.mdガイドをご覧ください。

ステップ3 - Claude Codeで画面（UI）を組み立てる

ここでバイブコーディングの真価が発揮されます。私がいつも守るルールは、1画面ずつ作り、そのたびにExpo Goで確認することです。AIに6画面をいっぺんに吐き出させて、あとでその絡まりをほどこうと座り込む、なんてことはやめましょう。

習慣トラッカーで私がたどる順序は、リスト画面、次に詳細画面、そして追加/編集フォームです。最初の画面のプロンプトは、だいたいこんな感じです。

Build the habit list screen (app/index.tsx):
- FlatList rendering the habits from the Zustand store
- Each item: habit name, current streak, a "tick today" button
- Empty state: text "No habits yet, add one now"
- Tapping an item navigates to app/habit/[id].tsx (Expo Router)
Follow the conventions in CLAUDE.md. When done, tell me to open Expo Go to check.

各画面のあとで、Expo GoでQRを再スキャンして実物を確認します。何かおかしければ（余白、色、ナビゲーション）、それをClaude Codeに伝えて直し続けてもらいます。ホットリロードのおかげで、このループはとても速いです。インターフェースを組み立てる部分では、UIのプロンプト術はWebとまったく同じです。Claude CodeでReactのUIを作る方法やClaude Codeと働くためのUI/UXのコツをご覧ください。

ステップ4 - 状態、データ、バックエンドを追加する

これでアプリにはUIができましたが、まだ何も「覚えて」いません。データを接続するときです。小〜中規模のアプリでは、状態管理にZustand、ローカル永続化にAsyncStorageを使います。そして最も重要なのがオフラインファーストです。モバイルの通信は不安定なので、電波が途切れても動き、あとで同期できるようにしておく必要があります。

Claude Codeにストアと永続化を作らせましょう。

Create a Zustand store (store/habits.ts):
- state: list of habits + daily tick log
- actions: addHabit, toggleTickToday, computeStreak
- persist everything to AsyncStorage (offline-first)
- restore state on app launch
Write full TypeScript types alongside it.

複数端末での同期やログインが必要になったら、そこがバックエンドを追加するタイミングです。手軽で軽量な選択肢としては、認証+データベース用のBaaS（Backend-as-a-Service。たとえばSupabase）があります。Claude CodeはAPI呼び出しレイヤーとスキーマの両方を書けます。自前のAPIを立てたいならClaude CodeでバックエンドAPIを作るを、テーブル設計についてはClaude Codeでデータベースを扱うをご覧ください。

実用的なコツを1つ。ストレージレイヤー（ストア+永続化）を、最初からUIレイヤーと分けるようClaude Codeに頼みましょう。あとでAsyncStorageを本物のバックエンドに差し替えるとき、すべての画面を掘り返す代わりに、1か所だけ触れば済みます。またこのタイミングで、（computeStreakのような）小さな計算関数をいくつかテスト付きで書かせておくとよいです。日付のロジックは、気づきにくい形で間違えやすいからです。

省いてはいけないセキュリティのルールを1つ。APIキーを絶対にハードコードしないことです（アプリを逆コンパイルされると簡単に露出します）。環境変数を使い、機微なデータはKeychain（iOS）/ KeyStore（Android）経由で保存しましょう。ログイン画面があるなら、OAuth2 + JWTを選び、モバイルらしい快適さのために生体認証によるロック解除（Face ID / 指紋）も検討しましょう。

ステップ5 - 実機でデバッグとテストをする

モバイルの初心者が全員、いちばん高い授業料を払って学ぶ教訓があります。シミュレータは性能について嘘をつくということです。シミュレータはあなたの高性能なPCのCPU上で動くので何もかも滑らかに感じますが、ミドルレンジのスマホでは、カクつき、バッテリー消費、遅い読み込みがようやく姿を現します。リリース直前に近いビルドは、必ず実機でテストしましょう。

Claude Codeでのデバッグの仕方はこうです。生のエラーログ（Expoのターミナルや、アプリ内の赤いエラー画面から）をセッションに貼り付け、読んで直してもらいます。React Nativeのスタックトレースをかなりよく追ってくれます。よく遭遇する、モバイル特有のエラーをいくつか挙げます。

• Metroバンドラのキャッシュが古い：コードを編集してもアプリが変わらない、という場合はnpx expo start -cを実行してキャッシュをクリアします。
• Expo SDKのバージョンが合わない：ライブラリがSDKと非互換のとき、npm installではなくnpx expo install <package>を使います（SDKに合ったバージョンを選んでくれます）。
• ネイティブモジュールが再ビルドを必要とする：ネイティブ部分を含むライブラリを追加すると、Expo Goには表示されません。開発ビルド（npx expo run:android / run:ios）を作る必要があります。

ツール自体から出るその他の変わったエラーについては、よくあるClaude Codeのエラーと直し方のまとめをご覧ください。

ステップ6 - App StoreとGoogle Playに公開する（EAS Build）

Expo Goは開発専用です。実際にインストールできるファイルを手に入れたり、ストアに公開したりするにはEAS Buildを使います。Expoのクラウドビルドサービスなので、macOSがなくてもiOSをビルドできます。

npm install -g eas-cli
eas login
eas build:configure
# Build an internal build for testing:
eas build --profile preview --platform android # produces an .apk
eas build --profile preview --platform ios # needs an Apple Developer account

ビルドができたら、次のようにします。

• iOS：まずTestFlightで社内テスト用に提出し、それからApp Storeに提出します。年額99 USDのApple Developer Programが必要です（Apple Developer, 2026）。
• Android：まずGoogle Playの内部テストを使い、それからClosed → Open → Productionと段階的に広げます。Google Playの開発者登録料は、アカウント作成時の一度きりの支払いです。

私がおすすめするリリース戦略は、いきなり本番へ出さないことです。段階的ロールアウトのはしごをたどりましょう。まず少人数向けの内部ビルド、次に大きめのグループ向けのクローズドテスト、そしてオープン/本番へ。それぞれの段が、多くの人に届く前に実機でバグを見つけるチャンスです。Claude Codeはeas.jsonの設定（ビルドプロファイル）や自動化スクリプトを手伝えますが、「いつ次の段へ上がるか」の判断はあなた次第です。

計画が崩れないように、正直にお伝えします。App Storeの審査はたいてい数日かかり、ガイドライン違反があれば差し戻されることもあります。これは人間による工程で、どんなAIも短縮しません。パッケージングと公開の流れをよりスムーズにするには、Claude Codeでアプリをデプロイするをご覧ください。EASの詳しい設定は公式ドキュメントに従ってください（Expo - Claude Code docs, 2026）。

加速させる：AgentKitに組み込まれたak-mobile-developmentスキル

混同を避けるために：ここでいう「AgentKit」は、agentkit.bestにあるClaude Code向けのスキル/エージェントキット（ak CLIで使います）で、OpenAIのAgentKit製品とは別物です。

自分でCLAUDE.mdを書き、毎回ゼロからモバイルの規約を選ぶのが面倒なら、Engineer Kit（モバイルスキルを含む）がak-mobile-developmentスキルを提供します。フレームワーク選定のマトリクス、オフラインファーストのデフォルト、EAS Buildのワークフロー、そしてOWASPのモバイルセキュリティチェックリストが入っており、Claude Codeがそれを直接読んで適用します。Engineer Kitは現在99 USD（サイトに継続課金の記載はありません）で、生涯アップデートと返金保証つきです。まず全体像を知りたいですか？　AgentKitとは何かを読むか、あるいはAgentKitをチェックする（リンク経由で20%オフ）だけでもどうぞ。必須ではありません。ステップ2のテンプレートだけでも、これらすべてを問題なく行えます。

Claude Codeでモバイルアプリを作るときの本当の限界

期待値を正しく設定できるように、Claude Codeが力及ばないところを挙げます。どの競合も認めたがらないことです。

• 深いネイティブモジュール：複雑なSwift/Kotlinのコード（Bluetooth、高度なカメラ、バックグラウンド処理）はAIがつまずくところで、あなた自身がネイティブを理解している必要があります。
• iOSはAppleのエコシステムを要求する：iOSのビルドや署名にはmacOSまたはクラウドサービス（EAS）に加え、有料のAppleアカウントが必要です。AIはこの制約を回避できません。
• ストア審査はAIの手の届かないところ：Apple/Googleは人手で審査します。どんな「プロンプト」も、アプリの承認を早めてはくれません。
• スコープが膨らみやすい：ステップ1（計画）を飛ばすと、アプリは制御不能に膨らみます。引き締まった計画こそ、それを防ぐ最も安上がりな方法です。

よくある質問（FAQ）

MacなしでClaude CodeでiOSアプリを作れますか？

はい。いつもどおりWindows/LinuxからExpo Goでコーディングとテストを行い、それからEAS Build（Expoのクラウドビルド）を使ってMacなしでiOS版を生成します。TestFlight/App Storeに提出するには、有料のApple Developerアカウントだけが必要です。

Expoとbare React Native、どちらを使うべき？

初心者はExpoから始めるべきです。セットアップが速く、Expo Goで即座にテストでき、EASでクラウドビルドできます。Expoが対応していないネイティブモジュールが必要になったときだけ、bare React Nativeへ移りましょう。

コードが書けなくてもClaude Codeでモバイルアプリを作れますか？

バイブコーディング流に簡単なアプリなら作れますが、それでも基本は理解しておくべきです。エラーを読むこと、アプリが何をすべきかを知っていること、そして結果をレビューできること。コーディングの知識がまったくないと、デバッグは難しく、スコープも膨らみがちです。

Claude CodeでFlutterアプリを作れますか？

はい、Claude CodeはDart/Flutterも上手に書きます。ただしこのガイドではExpo + React Nativeをおすすめします。CLIのコマンドチェーンのほうがエージェント型のワークフローに合っていて、AIが自分で実行して直しやすいからです。

アプリをストアに公開するまでどれくらいかかりますか？

コード自体は数セッションで仕上がります。ボトルネックは審査です。App Storeはたいてい数日かかり、差し戻されることもあります。Google Playは概して速いです。これは人間のプロセスで、AIが短縮するものではありません。

アプリの制作と公開にはいくらかかりますか？

コード自体は無料です（ExpoとReact Nativeはオープンソース）。主なコストは、使うClaude Codeのプラン（Proは月額20 USDから）、App Storeに出すなら年額99 USDのApple Developer、そしてAndroidで公開するときのGoogle Play登録料です。

まとめと次のステップ

6つのステップをおさらいします。計画する、Expo + CLAUDE.mdの雛形を作る、画面を1つずつ組み立てる、状態/データを追加する、実機でテストする、そしてEASで公開する。Claude Codeが入力を引き受け、あなたがスコープと結果のレビューを担います。次のステップとして、Claude CodeでUIを作るとデプロイのワークフローをさらに深掘りしましょう。自分でモバイルの規約を書く手間を省きたいなら、Claude Code向けのAgentKit（リンク経由で20%オフ）が出来合いのスキルを提供しているので、より速く始められます。