Claude Media
Claude CodeでReact Nativeアプリを実機ビルドまで作る手順
Claude Codeチュートリアル

Claude CodeでReact Nativeアプリを実機ビルドまで作る手順

Claude CodeでReact Nativeプロジェクトを作成し、CLAUDE.mdの設定からAndroid/iOS実機ビルドまで進める手順をまとめます。

読了目安 約12分

Claude Codeはターミナルで動くCLIツールで、対象のプロジェクトディレクトリに入って claude と打つだけで動作を始めます。React Native自体は特別な組み込みを必要とせず、Claude CodeはただのNode.jsプロジェクトとしてファイルを読み書きし、Bashでコマンドを実行します。一方でReact Native側は環境構築の手順が多く、Android StudioやXcodeのインストールから実機の設定まで、初回はつまずきやすい領域です。この記事では、プロジェクトの作成からCLAUDE.mdの設定、Android/iOS実機での起動確認までを、公式ドキュメントの手順に沿ってまとめます。

Claude CodeとReact Native開発の前提

React Nativeとは、JavaScriptとTypeScriptでAndroid/iOSのネイティブアプリを書けるMetaのフレームワークです。Claude Codeは言語やフレームワークを問わないコーディングエージェントなので、React Nativeプロジェクトに対しても通常のNode.jsプロジェクトと同じように振る舞います。

Claude CodeにはCLI版のほかWeb版・デスクトップアプリ・VS Code拡張・JetBrains拡張などの面があります。React Nativeのビルドは npm run android や pod install のようなシェルコマンドを多用するため、Bashを直接使えるCLI版が向いています。Claude Codeは対象ディレクトリのファイルを必要に応じて自動で読み込むので、コンテキストを手動で貼り付ける手間はありません。開発を始める前に、次の環境を用意しておきます。

項目要件
Node.js要件22.11.0以上
Watchman要件ファイル変更監視ツール(推奨)
JDK要件17(Android向け。より新しいバージョンは問題が出ることがある)
Android Studio要件Android SDK Platform 35 / Build-Tools 36.0.0を含む
Xcode要件iOSビルドを行う場合のみ、macOS上で必須
Claude Codeアカウント要件Pro/Max/Team/Enterpriseのいずれか、またはConsoleアカウント

React Nativeプロジェクトを作成する — FrameworkかBare CLIか

React Native公式は、Framework(主にExpo)を使う構成を最初の選択肢として案内しています。ネイティブコードを自分で書く予定がない場合はExpoのほうがセットアップが軽く、Android StudioやXcodeのローカルインストールが不要です。

選択肢作成コマンドAndroid Studio/Xcode向くケース
Expo(Framework)作成コマンドnpx create-expo-app@latestAndroid Studio/Xcode不要(Expo Goで実機確認可)向くケースすぐ動かしたい・ネイティブモジュール追加の予定がない
React Native Community CLI(Framework無し)作成コマンドnpx @react-native-community/cli@latest init AwesomeProjectAndroid Studio/Xcode必須向くケースネイティブコードを書く・既存アプリへの組み込み

Bare CLIを選ぶ場合、以前グローバルインストールした react-native-cli が残っていると競合するので、先に削除しておきます。

npm uninstall -g react-native-cli @react-native-community/cli
npx @react-native-community/cli@latest init AwesomeProject
cd AwesomeProject
npm start

npm start はJavaScriptのビルドツールであるMetroバンドラーを起動します。この時点ではアプリはまだ実機やエミュレータに入っていないので、別のターミナルから npm run android(または npm run ios)を実行してインストールします。本記事のコマンドはnpmで統一していますが、公式ドキュメントは yarn start / yarn android のようなyarnでの実行例も並記しているので、プロジェクトの既存パッケージマネージャに合わせて読み替えてください。

Claude Codeを導入しCLAUDE.mdをプロジェクトに合わせる

React Nativeプロジェクトが動く状態になったら、そこにClaude Codeを導入します。

curl -fsSL https://claude.ai/install.sh | bash
claude --version
cd AwesomeProject
claude

macOS/Linux/WSLではネイティブインストーラーのcurlコマンドが推奨されています。Windowsの場合はPowerShellで irm https://claude.ai/install.ps1 | iex を使います。初回起動時はブラウザでのログインを求められ、以降は資格情報が保存されるため再ログインは不要です。

プロジェクトディレクトリで claude を起動したら、/init コマンドでCLAUDE.mdの初期版を生成できます。環境変数 CLAUDE_CODE_NEW_INIT=1 を立てておくと、Skills・Hooksまで含めた対話式の初期化フローになります。挙動の詳細はClaude Code initコマンドの挙動にまとめています。React Nativeプロジェクトでは、ビルドコマンドと配置規約を明記しておくと、Claude Codeが毎回同じ確認をせずに済みます。

## ビルド・実行
- Android実機/エミュレータ: `npm run android`
- iOSシミュレータ: `npm run ios`
- Metroバンドラー単独起動: `npm start`
- ネイティブ依存の変更後は `cd ios && bundle exec pod install`
 
## 規約
- コンポーネントは `src/components/` に配置
- スタイルは `StyleSheet.create` を使う(インラインstyle禁止)
- ナビゲーションはReact Navigationの既存パターンに従う

CLAUDE.mdは起動のたびにコンテキストへ読み込まれるため、公式ドキュメントは1ファイルあたり200行未満を目安にするよう案内しています。長くなってきたら、ディレクトリ単位で読み込む .claude/rules/ に分割する方法もあります。CLAUDE.mdの書き方をさらに広げたい場合は、Claude CodeのCLAUDE.mdを実用に引き上げる10のパターンが参考になります。

Claude Codeに機能実装を任せる

CLAUDE.mdを整えたら、実際にコードを書かせます。まずはコードベースの理解から始めると、以降の変更依頼が的確になります。

このプロジェクトの画面構成を教えて
ログイン画面のコンポーネントはどこにある?

具体的な変更は、対象と条件を明示して依頼します。

ログイン画面にメールアドレスのバリデーションを追加して
空のフォームを送信できてしまうバグを直して

Claude Codeは該当ファイルを探し、変更内容を提示します。実装の過程で npm install・pod install・npm run android のようなコマンドを何度も実行することになります。Pro/Max/Teamプランの対話型ターミナルセッションでは、既定の権限モードがauto modeです。分類器がコマンドの安全性を判断し、大半のファイル編集とコマンド実行は確認なしで進みます(それ以外のプランではManualモードが既定です)。CI環境など対話なしで実行する場合や、権限モードを固定したい場合はClaude Codeの--permission-modeで起動モードを指定するが参考になります。

複数画面にまたがる機能を最初から仕様として固めてから実装したい場合は、cc-sddでClaude Codeの仕様駆動開発を実践するのような手順でタスクを分割してから依頼する方法もあります。

Claude Codeはコードの変更だけでなく、Gitの操作も自然言語で扱えます。「変更したファイルを教えて」「変更をコミットして」と依頼すると、差分を要約してコミットメッセージまで用意します。テストの追加やリファクタリングも同じ形式の依頼で進められるので、「ログイン画面のユニットテストを書いて」「認証まわりをasync/awaitに書き換えて」のような指示もそのまま通ります。

実機ビルドで動作を確認する

シミュレータ/エミュレータでの確認が済んだら、実機での挙動を確認します。

Android実機

  1. 端末で「設定 → 端末情報 → ソフトウェア情報」を開き、「ビルド番号」を7回タップして開発者向けオプションを有効にする
  2. 「設定 → 開発者向けオプション」でUSBデバッグを有効にする
  3. USBケーブルで端末を接続し、接続状態を確認する
adb devices
npm run android

adb devices の出力で対象端末が device と表示されていれば接続は成功です。unauthorized と表示された場合は adb reverse tcp:8081 tcp:8081 を実行し、端末側でUSBデバッグの許可ダイアログを承認します。接続できる端末は同時に1台のみです。

iOS実機

iOSの実機ビルドにはApple Developerアカウントとコード署名の設定が必要です。

  1. ios フォルダの .xcworkspace(CocoaPods利用時)または .xcodeproj をXcodeで開く
  2. 端末をUSB接続し、Xcodeの「Product → Destination」から対象端末を選ぶ(初回は端末の登録が必要)
  3. プロジェクト設定の「Signing」でApple Developerアカウントのチームを選択する(メインターゲットとTestsターゲットの両方)
  4. Cmd + R でビルドして実行する
Android環境変数の設定例(macOS/Linux)

Android Studioのインストール後、ANDROID_HOME を設定していないとビルドツールが見つかりません。~/.zshrc などに追記します。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

設定後は source ~/.zshrc を実行し、echo $ANDROID_HOME で反映を確認します。

よくあるつまずき

  • react-native-cli の残留と衝突: 過去にグローバルインストールした react-native-cli や @react-native-community/cli が残っていると、新規プロジェクト作成時に予期しないエラーが出ます。事前に npm uninstall -g で削除します
  • Node.jsのバージョンが古い: React Native公式はNode 22.11.0以上を要求しています。node -v で確認してから作業を始めます
  • JDKのバージョンが新しすぎる: React Native公式はJDK 17を推奨しており、それより新しいバージョンではビルドに問題が出ることがあります
  • iOS実機ビルドをWindows/Linuxで試みる: XcodeがないOSではネイティブビルドができません。Expo Goでの動作確認に切り替えます
  • CocoaPodsのインストール忘れ: iOS向けのネイティブ依存はCocoaPodsで管理されるため、依存追加後は bundle exec pod install を忘れず実行します

まとめ

Claude CodeはReact Native専用の統合を持たない代わりに、どのプロジェクトでも同じ手順で使えます。React Native側でExpoかBare CLIかを選び、環境構築を済ませ、CLAUDE.mdにビルドコマンドと配置規約を書いておけば、Claude Codeは実装から npm run android の実行まで一連の作業を任せられる相棒になります。実機での最終確認は、Android・iOSとも公式手順に沿ってUSB接続と署名設定を済ませてから進めます。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →