Claude CodeでiPhoneアプリを作る方法:完全チュートリアル
著者:Mehdi Azizi
更新・15 分
Claude Codeのインストール、Expoプロジェクト作成、CLAUDE.mdの作成、画面ごとのプロンプト、EASでのTestFlight配信までを解説します。
Claude Codeでアプリを作る:短い答え
Claude Codeでアプリを作るには、Claude Codeの有料アクセス(対応するサブスクリプション、または従量課金のConsole)、Node.js、Expo GoをインストールしたiPhone、そしてExpoプロジェクトが必要です。スタックとルールを書いたCLAUDE.mdファイルを用意し、1画面ずつ依頼して、各画面をiPhoneでテストします。最後にEASでアプリをTestFlightに送ります。
このチュートリアルは、AIが得意なことと苦手なことを説明した私のガイドAIでiOSアプリを作るの続編です。ここでは実践に入ります。コマンド、ファイル、プロンプトです。
私は毎日Claude CodeとCursorでiOSアプリを作っています。スタックはReact Native、Expo、EAS、RevenueCat、Supabaseです。ミニゲーム付き目覚ましアプリのSolysと、トレード練習アプリのTradaZenはApp Storeで公開中です。NoleraとClicはAppleにリジェクトされ、その後修正しました。以下の内容はすべてこの経験から来ています。
この方法を公開済みアプリに適用した例として、TradaZenの歩み(最初のコミットからAppleのリジェクト、方向転換まで)を記録しています。この体験談はチュートリアルの手順を補完するものです。
ステップ1:前提条件をそろえる
最初のコマンドを打つ前に、以下がそろっているか確認してください。
有料のClaudeアカウント
Claude Codeはclaude.aiの無料プランには含まれていません。Anthropicのドキュメントによると、Pro、Max、Team、Enterprise、またはConsoleのアカウントが必要です。Proプランなら、利用上限の範囲内で始められます。
Node.jsとターミナル
ExpoにはLTS版のNode.jsが必要で、macOS、Windows、Linuxで動きます。Claude CodeはmacOS 13以降、Windows 10以降、主要なLinuxディストリビューションで動作します。
iPhoneとExpo Go
自分のアプリをビルドせずに最初の画面を試すため、iPhoneにApp StoreからExpo Goをインストールします。プロジェクトを作る前に、Expo Goのページで自分の環境に対応するSDKバージョンを確認してください。最新のSDKとApp Storeで配布されているバージョンが同時に提供されるとは限りません。Expoは2026年5月のこのずれについても記録しています。古いチュートリアルで見つけたバージョン番号から始めないでください。独自のネイティブモジュールを使う場合は、開発ビルドを用意しましょう。
Macは?必須ではありません
iOSビルドはEAS BuildでExpoのサーバー上でコンパイルされ、XcodeのバージョンはExpo SDKが選びます(ITMS-90725)。またEAS SubmitはmacOS、Linux、Windowsで動作します。つまりPCからTestFlightまで進めます。この流れはガイドMacなしでiOSアプリを公開するで詳しく解説しています。
Apple Developerアカウントは後で
App Store版のExpo Goでコーディングとテストをする段階では不要です。アプリをTestFlightに送る時点で必須になります。ステップ7で改めて説明します。
ステップ2:Claude Codeをインストールする
macOS、Linux、WSLでは、Anthropicが推奨するのはネイティブインストーラーです。
curl -fsSL https://claude.ai/install.sh | bash
WindowsではPowerShellで次を実行します。
irm https://claude.ai/install.ps1 | iex
インストールできたか確認します。
claude --version
npmを使いたい場合のコマンドはnpm install -g @anthropic-ai/claude-codeです。前にsudoを付けないでください。ドキュメントで明確に非推奨とされています。
初めてclaudeを起動すると、ブラウザが開いてアカウントへのログインを求められます。その後は日本語で指示できます。Claudeはファイルを読み、変更を提案し、あなたの許可を得てコマンドを実行します。
ステップ3:Expoプロジェクトを作る
プロジェクトを置くフォルダに移動して、次を実行します。
npx create-expo-app@latest my-app
cd my-app
npx expo start
App Store版Expo Goとの互換性と最新SDKのどちらかを選ぶよう求められたら、今回は互換性を選んでください。いずれにしても、先に進む前に、作成されたバージョンがiPhoneのExpo Goで対応しているか確認しましょう。開発ビルドはプロジェクトで必要になったときに用意すれば大丈夫です。
ターミナルにQRコードが表示されます。iPhoneのカメラでスキャンすると、アプリがExpo Goで開きます。初回によくつまずくポイントがあります。Expo GoはExpo CLIとExpo Goが同じExpoアカウントでログインしている場合にのみプロジェクトを開きます。パソコンでnpx expo loginを実行し、アプリでも同じアカウントでログインしてください。
なぜSwiftではなくExpoなのか?ClaudeはReact Nativeをよく知っていますし、Macなしでテストできるからです。この選択についてはモバイルアプリのためのReact NativeとExpoのページで説明しています。
Expo Goの制限も覚えておいてください。Expo Goには、あらかじめ組み込まれたネイティブモジュールしか含まれていません。たとえばアプリ内課金のように、Expo Goが知らないネイティブライブラリを追加したら、開発ビルドが必要になります。最初の画面を作る段階では問題ありません。
適切なテスト環境を選ぶ
Expo Go、開発ビルド、TestFlightで確認できることは同じではありません。Expoは開発ビルドを、プロジェクトに必要なネイティブモジュールを含んだ自分専用のテストアプリだと説明しています。
| 確認したいこと | テストする場所 | テストの限界 |
|---|---|---|
| 最初の画面を表示し、ナビゲーションを試す | 対応SDKのExpo Go | Expo Goに含まれないネイティブモジュールの挙動 |
| プロジェクトに追加したネイティブライブラリを使う | そのライブラリを含む開発ビルド | 配布版の挙動やAppleの承認 |
| テスター向けアプリを操作し、課金をテストする | TestFlightに送ったビルドと正しく設定されたプロダクト | 実際の顧客による支払いや販売開始の承認 |
依存関係を追加する前に、Claudeにこう聞いてください。「これは今のSDKとテスト環境に対応していますか?アプリの再ビルドは必要ですか?ドキュメントに基づいて答えてください。」これで、Expo Goがそもそも読み込めないモジュールの修正に一晩費やしたり、非公開APIが原因でアップロード時に拒否されるSDKを使ったりせずに済みます。
ステップ4:プロジェクトのCLAUDE.mdを書く
ここが最も費用対効果の高いステップです。Claude Codeはプロジェクトの記憶を保持できますが、ルールは明示する必要があります。プロジェクトのルートに置くCLAUDE.mdファイルは、セッション共通の指示を与えます。Claudeが推測できないことをここに書きます。
プロジェクトのフォルダでclaudeを起動し、/initと入力します。ドキュメントによると、Claudeはプロジェクトを分析し、見つけたコマンドや規約をもとに最初のCLAUDE.mdを生成します。あとは自分のルールを追記します。Anthropicは200行以内に収めることを推奨しています。ファイルが長いほど、指示が守られにくくなるからです。
私が使っているものに近い、短い例です。
# My app
## スタック
- Expo(create-expo-appのSDK)、React Native、TypeScript strict
- ナビゲーション:Expo Router、app/に1画面1ファイル
- データ:Supabase(後で)、アプリに秘密鍵は絶対に入れない
## ルール
- 1回に1画面。依頼範囲外のファイルには触れない。
- ポイント単位の固定の高さは禁止:画面サイズに対する相対サイズにし、
内容がはみ出す可能性があればScrollViewを使う。
- 各画面は3つの状態を扱う:読み込み中、空、エラー。
- UIのテキストは日本語で書く。
- 3ファイル以上を変更する前に:計画を提案し、私の承認を待つ。
## コマンド
- 起動:npx expo start
- テスト:package.jsonに実際にあるスクリプトを使う。
まだ存在しない場合はそう伝え、テスト成功と報告しない。
- 型チェック:npx tsc --noEmit
- 変更のたびに:テストと型チェックを実行し、
何が変わったか、iPhoneでどう確認するかを伝える。
固定の高さに関するルールには理由があります。ステップ6で説明します。
ステップ5:1画面ずつプロンプトを書く
「サブスクリプション付きの習慣トラッカーアプリを作って」と頼むと、巨大で壊れやすく、読み返せないプロジェクトができあがります。うまくいく方法はその逆です。1つの依頼に1つの画面、5分でテストできる結果です。
まず計画から
複数のファイルにまたがる作業は、プランモードに切り替えます。ステータスバーにplan mode onと表示されるまでShift+Tabを押します。このモードでは、Claudeはファイルを読んで計画を提案しますが、あなたが承認するまで何も変更しません。読み返し、修正し、承認します。
最初の方向づけのプロンプトは次のような感じです。
習慣トラッカーアプリを作りたいです。バージョン1の機能は1つだけ:
今日の習慣にチェックを付けること。画面の一覧とフォルダ構成を
提案してください。今はまだコードを書かないでください。
画面、状態、限界を説明する
次に、1画面につき1プロンプトです。エッジケースを具体的に挙げるほど、Claudeは忘れにくくなります。
今日の習慣を一覧表示する画面 app/index.tsx を作ってください。
- 各行:習慣の名前、チェックボックス、現在の連続記録。
- 空の状態:テキストと「習慣を追加」ボタン。
- 読み込み中の状態と、「再試行」ボタン付きのエラー状態。
- データは今のところローカルの配列から取得。
- iPhone SEでも最大のiPhoneでも収まること:
固定の高さは使わず、リストはスクロールする。
最後にテストと型チェックを実行してください。
すべてを書き直させずに修正する
細かい点がおかしいときは、具体的に伝え、範囲を絞ります。
iPhoneで、リストが長いと「習慣を追加」ボタンが下のバーの
下に隠れてしまいます。app/index.tsx のこの問題だけを修正し、
他のファイルには触れないでください。原因を説明してください。
ターミナルにスクリーンショットを貼り付けることもできます。Claudeはそれを読み取ります。
演習:再起動後もチェックが残る習慣
これは自分のプロジェクトで取り組む学習用の演習で、すでに完成した機能のスクリーンショットではありません。目的は、生成された画面から、検証できる挙動へと進むことです。ユーザーアカウントもアプリ内課金も必要ありません。
- 「10分読書」という名前のローカルの習慣を1つだけ残します。
- チェックボックスと、Expoプロジェクトに対応したローカル保存を依頼します。
- 変更したファイル、追加した依存関係(あれば)、実際に実行したコマンドを明示するようエージェントに依頼します。
- iPhoneでアプリをインストールまたは開き、以下の確認を行います。
既存の画面をもとに、「10分読書」の習慣をチェックできるようにし、
アプリを閉じて再度開いてもその状態が保たれるようにしてください。
プロジェクトの依存関係に対応したローカルストレージを使ってください。
アカウント、サーバー、サブスクリプション、追加の統計は作らないでください。
コードを書く前に、読み込み中の扱いと、読み込みや保存に失敗した場合の
扱いを説明してください。その後、範囲を限定した変更を行ってください。
最後に:変更したファイル、実行したコマンド、テストしていない制限、
iPhoneで結果を確認する正確な手順を伝えてください。
| iPhoneでの操作 | 期待される結果 | 失敗した場合 |
|---|---|---|
| アプリを初めて開く | 習慣とチェックボックスがエラーなく表示される | 初期状態とストレージの読み込みを確認する |
| チェックしてからアプリを閉じて再度開く | 習慣にチェックが付いたまま | 同じキーへの書き込みと読み込みを確認する |
| チェックを外して再起動する | 習慣のチェックが外れたまま | falseの値も保存されているか確認する |
| 機内モードで同じ操作をする | ローカル機能はそのまま使える | 理由なく追加されたネットワーク依存を探す |
| 文字サイズを大きくする | 名前とコントロールが操作可能なまま | テキストを切り詰めたり操作を隠したりする制約を外す |
1行が失敗しても「全部書き直して」とは頼まないでください。操作、期待した結果、実際の結果を説明します。たとえば「再起動すると、チェックしたはずのボックスが空に戻ります。原因を説明し、デザインを変えずに永続化を修正してください。」のように伝えます。
CLAUDE.mdテンプレートと確認シート(.md)をダウンロード。エディタやメモアプリで開いてください。エージェントに渡す前に、コマンドを自分のプロジェクトに合わせて調整してください。
ステップ6:レビューとテストをする
Claude Codeは正しそうに見えるコードを書きます。本当に正しいかどうかを教えてくれるのは、あなたのテストとiPhoneだけです。
動いているものを壊さないためのテスト
アプリが大きくなるほど、依頼のたびに確認済みの画面を壊すリスクが高まります。Expoで作成したプロジェクトにはテストがありません。まずExpoのドキュメントが推奨するとおり、jest-expoを使ってJestをインストールするようClaudeに依頼しましょう。次に、重要なロジック(連続記録の計算、フォームのバリデーション)のテストを依頼し、変更のたびに実行させます。テストコマンドをCLAUDE.mdに書いておくのはこのためです。毎回指示しなくても、Claudeが実行してくれます。ルールファイルとテストがあれば、AIがすでに動いていたものを壊すことは大幅に減ります。
変更をすべて確認する
すべての行を理解する必要はありません。どのファイルがなぜ変わったのかを把握していればいいのです。Claudeが関係のないファイルを触っていたら、承認する前に理由を聞いてください。そして「ここで何が壊れる可能性がある?」と質問しましょう。
小さいiPhoneと大きいiPhoneで確認する
これが私にとって最も高くついた教訓です。SolysはAppleにガイドライン2.1でリジェクトされました。iPhone互換モードで動いていたiPad Airで、オンボーディングのデモをクリアできなかったのです。原因は、画面サイズに対する相対値ではなく、固定のポイントで指定した高さでした。私のiPhoneでは何の問題もありませんでした。コードはレビュー済みで、テストもすべて通っていました。ただ、別のサイズの画面を見たツールはひとつもなかったのです。
それ以来、各画面を最低でも最小のiPhoneと最大のiPhoneで確認しています。スマートフォンを1台しか持っていなければ、MacのXcodeシミュレーターや、別の機種を持っている友人で十分です。特に長いテキスト、フォームでキーボードを開いた状態、画面下部に固定したボタンを確認してください。
Claude Codeが苦手なこと
Claude Codeは画面やロジックでは優秀です。しかし、プロジェクトフォルダの外では信頼性がかなり下がります。
署名と証明書
Appleアカウントへの承認済みの接続がなければ、Claudeはその状態を知りません。XcodeとExpoを混ぜた証明書の手順をでっち上げることもあります。署名はEASに任せましょう。Expoのドキュメントによると、Apple Developerアカウントにログインすれば、EAS CLIがこれらのファイルを生成して保管してくれます。
App Store Connect
アプリのページ、プライバシーの申告、スクリーンショット、法的リンクは、App Store Connectで確認すべきデータです。Claude Codeは現在、必要なアクセス権があればChrome連携を通じてログイン済みのブラウザで操作できます。ただし、それで入力内容が正確になる保証はありません。情報を読み返し、使っているアカウントを確認し、同意事項と審査への提出は自分で承認してください。
サブスクリプション
ペイウォールを書くのは10分で終わります。App Store Connectのプロダクト、RevenueCatでの設定、コードを一致させるのはまったく別の話です。識別子が1文字違うだけで、審査担当者の画面ではペイウォールが空のままになります。よくある落とし穴は初心者がやりがちなiOSペイウォールのミスにまとめています。
エッジケース
指示がなければ、Claudeは正常系だけを扱います。ネットワークなし、空のリスト、中断された購入。これらはあなたが明示する必要があります。
Supabaseのセキュリティ
ClaudeがSupabaseにテーブルを作るときは、行レベルセキュリティ(RLS)が有効になっていて、各ユーザーが自分のデータにしかアクセスできないポリシーがあるか確認してください。また、秘密鍵がアプリのコードに入っていないかも確認しましょう。データベースをつないだら、すぐにこの2つの禁止事項をCLAUDE.mdに書いてください。
ステップ7:EASでTestFlightに進む
画面は、使っているモジュールに応じてExpo Goか開発ビルドで確認済みです。次は、テスターに配布するビルドに進みます。
EASを準備する
ここで有料のApple Developerアカウントが必要になります。Expoも述べているとおり、App Storeにアプリを送るには必須です。次に、Expoのツールをインストールしてプロジェクトを設定します。
npm install --global eas-cli
eas login
eas build:configure
app.jsonのios.bundleIdentifierに、一意のバンドルIDを追加します。たとえばcom.yourname.myappです。
ビルドして送信する
eas build --platform ios --profile production
eas submit --platform ios
1つ目のコマンドは、Expoのサーバーでアプリをビルドします。初回は、証明書を作成するためにAppleアカウントへのログインをEASが求めてきます。2つ目のコマンドはビルドをApp Store Connectに送ります。eas build --platform ios --auto-submitで一度にまとめて実行することもできます。
ビルドはTestFlightに表示される前にAppleによって処理される必要があり、この処理で拒否されることもあります。たとえば透過アイコンによるITMS-90717です。つまり、送信が成功しても、すぐにインストールできるとは限りません。App Store Connectで状態を確認してください。内部テスター、外部テスター、ベータ版審査については、ガイドTestFlightでiPhoneアプリをテストするで解説しています。
このビルドで、ステップ6の確認をもう一度行ってください。Expo Goで動いたアプリでも、たとえばネイティブモジュールが欠けていると、本番環境でクラッシュすることがあります。
実際にかかる費用
以下は各サービスが表示している価格で、2026年9月27日に確認したドル建ての金額です。請求額は地域、税金、利用量によっても変わります。契約前にプランを確認してください。
- Claudeのサブスクリプション:Proプランは月20ドル、年払いなら月17ドルです。Maxプランは月100ドルからで、より多く利用できます。
- Apple Developerアカウント:年99ドル。TestFlightとApp Storeに必須です。
- EAS:Expoの無料プランには、低優先度のキューで月15回のiOSビルドが含まれます。Starterプランは月19ドルで、追加利用分は別料金です。
小さなプロトタイプなら、Proプランと EASの無料プランで、上限内に収まる限り土台になります。TestFlightの前にAppleアカウントを追加し、データベース、ストレージ、有料APIなど、実際に必要なサービスは別途見積もってください。初めてのアプリの予算テンプレートが、これらの項目を整理するのに役立ちます。設定や確認にかかる自分の時間も見込んでおきましょう。
正直な限界と、つまずきやすいところ
Claude Codeは、iPhoneアプリを作れる人の範囲を変えました。しかし、公開のためにAppleが求めることは変わっていません。リジェクトはすぐにやってきます。Solysも、NoleraもClicもリジェクトされました。よくある理由はAppleがアプリをリジェクトする理由で紹介しています。
このチュートリアルがあれば、TestFlightまでは一人で進めます。つまずきやすいのはその後です。サブスクリプションの接続、審査担当者向けの資料の準備、リジェクトの理解などです。全体の流れはiPhoneアプリを作るのページをご覧ください。
この部分については、iOS Kitに、サブスクリプションを含む私のアプリのスターターコード、各ステップのClaude Codeスキル、そしてApple Review Kitをまとめています。全体のコースはiOSアプリ開発のためのClaude Code講座のページにあります。
すでに行き詰まっていて、何が原因かわからない?無料診断で、本当の障害が何かがわかり、Appleのリジェクト対策チェックリストもお送りします。
よくある質問
プログラミングができなくてもClaude CodeでiPhoneアプリを作れますか?
各ステップを確認してテストするなら、画面とシンプルなロジックは作れます。ただし、何も理解しなくていいと考えているなら無理です。エラーメッセージを読み、コマンドを実行し、Claudeが何を変更したかを確認できる必要があります。これらは作りながらすぐに身につきます。
Claude Codeは無料ですか?
いいえ。Claude CodeにはPro、Max、Team、Enterprise、またはConsoleのアカウントが必要です。claude.aiの無料プランには含まれていません。Proプランで始められますが、利用上限には注意が必要です。
Claude CodeでiOSアプリを作るにはMacが必要ですか?
いいえ。どんなパソコンでもコードを書けて、iPhoneのExpo Goでテストでき、EASがExpoのサーバーでアプリをビルドして送信します。シミュレーターのためにMacがあると便利ですが、必須ではありません。
React NativeアプリにはClaude CodeとCursorのどちらがいいですか?
私は毎日両方使っています。Claude Codeはターミナルで動き、変更とテストを自分で続けて行います。Cursorはエディタです。ツールよりも方法が大事です。ルール、1回に1画面、そしてテストです。
Claude Codeで最初のアプリを公開するまでどれくらいかかりますか?
アプリの規模とあなたの時間次第です。機能が1つだけのアプリならずっと早く進みます。最も予測しにくいのはAppleの審査です。
Claude Codeはアプリ内サブスクリプションを設定できますか?
ペイウォールとRevenueCatのコードは書けます。連携ツールと必要な権限があれば、管理画面で操作することもできます。ただし、コードがあるからといってプロダクトが設定済みだと思い込まないでください。識別子、価格、購入後の権限を確認し、TestFlightで購入と復元をテストしましょう。iOSペイウォールでよくあるミスで確認すべきポイントを紹介しています。