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

Claude CodeはReact Nativeでそのまま使えます。専用の設定は要らず、プロジェクトのディレクトリで claude を起動すれば、通常のNode.jsプロジェクトとしてファイルの読み書きとコマンド実行を任せられます。Android/iOS向けのビルドも、npm run android や pod install をClaude Codeが実行する形で進みます。

つまずきやすいのは、Claude Code側ではなく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プロジェクトと同じように振る舞います。WebアプリをネイティブにくるむCapacitorで作る場合はClaude CodeでCapacitorアプリを作る手順も参考になります。

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

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

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

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 のようなコマンドを何度も実行することになります。v2.1.283以降は、対話型のターミナルとVS Code拡張の既定がauto modeです。分類器が操作を審査し、大半のファイル編集とコマンド実行は確認なしで進みます。それより前のバージョンでは、auto modeが既定になるのはPro/Max/Teamプランで機能フラグを取得したセッションに限られ、それ以外はdefaultモードです。v2.1.289の claude --help では、--permission-mode に指定できる値が acceptEdits・auto・bypassPermissions・manual・dontAsk・plan と表示されます。起動時のモードを固定したいときはClaude Codeの--permission-modeで起動モードを指定するが参考になります。

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

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

ビルド系コマンドの許可とネイティブ領域の規約

React Nativeの作業では npm run android や adb devices のような同じコマンドが何度も走ります。Manualモードで使うなら、プロジェクトの .claude/settings.json に許可ルールを置くと、確認の回数を絞れます。

{
  "permissions": {
    "allow": [
      "Bash(npm run *)",
      "Bash(adb devices)",
      "Bash(git commit *)"
    ],
    "deny": [
      "Bash(git push *)"
    ]
  }
}

ルールはdeny、ask、allowの順に評価され、denyに当たった操作は、より狭いallowがあっても止まります。* はサブコマンドの後ろに置きます。Bash(npm run *) は npm install に一致しません。

ios/ と android/ の規約は、全作業に効く必要がありません。.claude/rules/ に paths を付けたファイルを置くと、該当ファイルを扱うときだけ読み込まれます。

---
paths:
  - "ios/**"
---
 
# iOSネイティブの規約
 
- 依存を足したら `cd ios && bundle exec pod install` を実行する
- `.xcworkspace` を開き、`.xcodeproj` は直接編集しない

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

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

Android実機

adb devices
npm run android

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

iOS実機

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

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

よくあるつまずき

• react-native-cli の残留と衝突: 過去にグローバルインストールした react-native-cli や @react-native-community/cli が残っていると、新規プロジェクト作成時に予期しないエラーが出ます。事前に npm uninstall -g で削除します
• Node.jsのバージョンが古い: React Native公式はNode 22.11.0以上を要求しています。node -v で確認してから作業を始めます
• npm install だけ毎回確認が出る: Bash(npm run *) は npm run 以降にしか一致せず、npm install は対象外です。必要なら Bash(npm install *) を別に許可します
• ios/ の規約が読まれない: paths を付けた .claude/rules/ のファイルは、該当パスのファイルを扱うときに読み込まれます。依頼がJavaScript側だけなら、ios/** の規約は効きません
• iOS実機ビルドをWindows/Linuxで試みる: XcodeがないOSではネイティブビルドができません。Expo Goでの動作確認に切り替えます

まとめ

Claude CodeにReact Native専用の統合はなく、土台のNode.jsプロジェクトとして扱われます。Expoで始めるかBare CLIで始めるかを最初に決め、ビルドコマンドとネイティブ領域の規約をCLAUDE.mdか .claude/rules/ に書いておくと、実機確認まで同じ手順で進められます。既存アプリの移行はNew Architecture非対応ライブラリの洗い出しが先です。