AIエージェント講座 →
Claude Code

Claude CodeでExpoモバイルアプリを作る手順

📌 検索キーワード: claude code app

【結論】解決策 / 実行コマンド

モバイルアプリはClaude Codeに初期化コマンドを推測させるより、Expo公式の create-expo-app で土台を作る方が再現性があります。

その後、Claude Codeへ既存構成を読ませ、画面単位で実装を依頼します。

# ターミナルで実行:Expo公式テンプレートでアプリを作成
npx create-expo-app@latest my-mobile-app
cd my-mobile-app
# ターミナルで実行:Gitの基準点を作成
git init && git add . && git commit -m "chore: initialize Expo app"
# ターミナルで実行:Claude Codeを起動
claude

具体的な手順・設定方法

  1. package.json とExpo Routerの有無を確認し、採用済み構成に合わせます。
  2. 画面、ナビゲーション、データ取得を別タスクに分けます。
  3. npx expo start は別ターミナルで実行し、実機またはシミュレーターで確認します。

実践プロンプト / 活用テクニック

# 起動後のセッション内で入力
このExpoプロジェクトの既存ルーティング方式を確認してください。
その方式を維持して、HomeとSettingsの2画面を追加してください。
新しいナビゲーションライブラリは、既存構成で不要なら追加しないでください。
最後にTypeScriptチェックを実行してください。

注意点・よくあるエラーと対処法

android/ios/ はネイティブ設定を含むため、一律に無視すると必要な修正を見落とします。

除外設定よりClaude Codeのpermissionsで秘密情報や破壊的コマンドを制御してください。

カメラ、位置情報、通知などはOS権限と実機検証が必要で、生成コードだけでは完了しません。

1日1時間 × 7日間で学ぶ「自作AIエージェント構築講座」

ツールの設定で消耗する側から、自分専用のAI自動化システムを作る側へ。
実践カリキュラムの全貌はこちらから確認できます。

公式カリキュラムを見る →

おすすめの関連記事

Claude Code

Claude Codeの使い方を徹底解説!基本コマンドと安全な実践手順

Claude Code

Claude Codeの料金体系!Pro・Max・API課金の違いと確認方法

Claude Code

Claude Codeとは?CLI・IDE・デスクトップ・Webで使えるAIエージェント

← ポータルTOP(全340件の検索)へ戻る