はじめに
「iOSとAndroid両方対応のアプリを一人で作りたい」
「React Nativeを始めたいが、環境構築で詰まってしまう」
「Webのコンポーネントをモバイルに流用したいが、書き方が違う」
React NativeはひとつのコードベースでiOSとAndroidに対応できる強力なフレームワークですが、ネイティブ環境の設定やモバイル固有の制約が多くあります。Claude Codeを使えば、環境構築から実装・ストア公開準備まで効率的に進められます。
目次
- Expo vs React Native CLI：選択基準
- プロジェクトの初期設定
- コンポーネントの実装
- ネイティブ機能との連携
- ナビゲーションの設計
- 状態管理とデータフェッチ
- パフォーマンス最適化
- ストア公開の準備
- まとめ
1. Expo vs React Native CLI：選択基準
初期選択の相談
> モバイルアプリをReact Nativeで開発したいです。
ExpoとReact Native CLIのどちらを選ぶべきか教えてください。
アプリの要件：
- プッシュ通知
- カメラ・写真ライブラリへのアクセス
- BLEデバイスとの通信
- App Store・Google Play両方に公開
チームのバックグラウンド：Webフロントエンド経験者のみ
それぞれのメリット・デメリットと推奨を教えてください。選択の目安：
| 観点 | Expo | React Native CLI |
|---|---|---|
| セットアップ | 非常に簡単 | 複雑 |
| ネイティブモジュール | EAS Builds経由 | 直接組み込み可能 |
| 向いているケース | 標準機能のみ・Web開発者 | カスタムネイティブコード必須 |
| Webエンジニアへの推奨 | ◎ | △ |
2. プロジェクトの初期設定
Expoプロジェクトの構築
> Expo + TypeScriptでモバイルアプリを構築してください。
技術スタック：
- Expo SDK 52（最新）
- Expo Router（ファイルベースルーティング）
- NativeWind（Tailwind CSS for React Native）
- TanStack Query（データフェッチ）
- Zustand（状態管理）
- Zod（バリデーション）
設定内容：
- プロジェクト初期化
- ESLint・Prettierの設定
- 絶対パスインポートの設定（@/）
- 開発環境・本番環境の環境変数設定
- EAS Buildの初期設定ディレクトリ構成の設計
> 中規模のモバイルアプリに適した
ディレクトリ構成を設計してください。
app/（Expo Router）
├── (auth)/（認証前のルート）
├── (tabs)/（認証後のタブナビゲーション）
└── _layout.tsx
components/（再利用可能コンポーネント）
hooks/（カスタムフック）
services/（APIクライアント）
stores/（Zustandストア）
utils/（ユーティリティ）
各ディレクトリの責務と命名規則も説明してください。3. コンポーネントの実装
Webコンポーネントのモバイル変換
> このReactコンポーネントをReact Nativeに変換してください。
変換のポイント：
- divをViewに、spanをTextに変換
- CSSをStyleSheetに変換
- onClick → onPress
- inputをTextInputに変換
- scrollをScrollViewに変換
NativeWindが使える場合はTailwindクラスを維持してください。
[Reactコンポーネントを貼り付け]モバイル向けリストコンポーネント
> 大量のアイテムを効率的に表示するリストコンポーネントを実装してください。
要件：
- FlatListを使った仮想化レンダリング
- 無限スクロール（TanStack Query使用）
- プルリフレッシュ
- スケルトンローディング
- 空の状態（EmptyState）の表示
- エラー状態の表示4. ネイティブ機能との連携
カメラ・写真ライブラリ
> プロフィール画像のアップロード機能を実装してください。
機能：
- カメラで撮影またはライブラリから選択
- 画像のトリミング・リサイズ
- サーバーへのアップロード（マルチパート）
- アップロード進捗の表示
expo-cameraとexpo-image-pickerを使ってください。
iOSとAndroidの権限リクエストも適切に処理してください。プッシュ通知の実装
> Expo Notificationsを使ったプッシュ通知を実装してください。
実装内容：
- デバイストークンの取得・サーバーへの送信
- フォアグラウンド・バックグラウンド・終了状態での通知受信
- 通知タップ時の適切な画面遷移
- 通知の権限リクエスト（iOS）
バックエンド（Node.js）からの送信コードも合わせて実装してください。位置情報の取得
> 現在地を取得して地図上に表示する機能を実装してください。
使用ライブラリ：
- expo-location（位置情報取得）
- react-native-maps（地図表示）
要件：
- バックグラウンドでの位置情報取得
- バッテリー消費を最小化する精度設定
- 位置情報の権限リクエスト
- 地図にカスタムマーカーを表示5. ナビゲーションの設計
Expo Routerの設定
> Expo Routerを使ったナビゲーション設計を実装してください。
画面構成：
- 未認証：ログイン・新規登録・パスワードリセット
- 認証済み：ホーム・検索・通知・マイページ（タブ）
- モーダル：設定・フィルター
要件：
- 認証状態によるルート保護（認証済みのみアクセス可）
- ディープリンクの設定
- 戻るジェスチャーのカスタマイズ6. 状態管理とデータフェッチ
オフライン対応の実装
> このアプリにオフライン対応を追加してください。
実装内容：
- TanStack Queryのキャッシュを使ったオフライン表示
- MMKV（高速ストレージ）でのデータ永続化
- オフライン時のUI表示（バナーなど）
- 再接続時の自動同期
@react-native-community/netinfoでネットワーク状態を監視してください。7. パフォーマンス最適化
レンダリングの最適化
> このReact Nativeアプリのパフォーマンスを改善してください。
問題点を診断：
- Flipperまたはreact-native-performanceで計測
- 不要な再レンダリングの検出
改善策：
- React.memo・useCallback・useMemoの適切な使用
- FlatListのgetItemLayoutの設定
- 画像の最適化（expo-image使用）
- Hermes エンジンの有効化確認8. ストア公開の準備
App Store・Google Play対応
> アプリをストアに公開するための準備を行ってください。
iOS（App Store）：
- app.jsonのbundleIdentifier設定
- アイコン・スプラッシュスクリーンの設定
- EAS BuildでのIPAビルド
- TestFlightへのアップロード手順
Android（Google Play）：
- package名の設定
- 署名キーの生成と設定
- EAS BuildでのAPK/AABビルド
- 内部テストトラックへのアップロード手順
各プラットフォームの申請で必要なメタデータリストも作成してください。まとめ
Claude CodeでのReact Native開発の効率化ポイント：
- WebコンポーネントをReact Native用に自動変換できる
- ネイティブ機能（カメラ・通知・位置情報）の実装を自動化
- オフライン対応・パフォーマンス最適化を体系的に実施
- ストア公開の手順を案内・設定を自動化
Expo採用のメリット（特に初心者）：
- 環境構築の複雑さをほぼゼロに
- EAS BuildでCIからネイティブビルドが可能
- Expo SDKで主要なネイティブ機能を統一APIで利用
次回の第38回：ログ管理・監視を設定する方法では、ObservabilityスタックをClaude Codeで自動構築する手順を解説します。
よくある質問（FAQ）
Q. 既存のReact Webアプリをモバイルに対応させることはできますか？
A. Claude Codeに「このReactアプリをReact Nativeに移行する計画を立ててください」と相談することで、共有できるロジックと書き直しが必要なUI部分を整理した移行計画を提案してくれます。
Q. React Native + Expoで複雑なアニメーションは実装できますか？
A. はい。React Native Reanimated 3を使うことで、60fps以上の滑らかなアニメーションが実装できます。Claude Codeに「React Native Reanimatedを使ったカードスワイプのアニメーションを実装してください」と依頼できます。
この記事はClaude Code入門シリーズ（第4部）の第37回です。← 第36回：Webhook実装 ｜ 第38回：ログ管理・監視 →
ご質問はお問い合わせページからお気軽にどうぞ。
