AIモバイルアプリ開発 — React Native + Claude Codeで高速構築

なぜReact Native + Claude Codeなのか

React NativeはiOS/Androidを1つのコードベースで開発できる。Claude Codeと組み合わせれば、UIコンポーネント生成、ロジック実装、デバッグまでAIが支援し、1週間でMVPを完成させられる。

セットアップ手順

1. React Native環境構築

# Node.js 20+ が必要
npx create-expo-app@latest my-app --template blank-typescript
cd my-app

# 必要なパッケージ
npx expo install expo-router expo-status-bar
npm install nativewind tailwindcss
npm install @react-navigation/native
npm install react-native-safe-area-context
npm install react-native-screens

2. Claude Code用の設定

プロジェクトルートにCLAUDE.mdを作成し、プロジェクト固有のルールを定義する。

# プロジェクトルール
- React Native + Expo + TypeScript
- スタイリングはNativeWind（TailwindCSS）
- ナビゲーションはExpo Router
- 状態管理はZustand
- APIクライアントはaxios
- コンポーネントは関数コンポーネント + hooks
- ファイル構成: app/(tabs)/ にルーティング

3. ディレクトリ構造

my-app/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx       # ホーム画面
│   │   ├── search.tsx      # 検索画面
│   │   └── profile.tsx     # プロフィール画面
│   ├── _layout.tsx         # ルートレイアウト
│   └── [id].tsx            # 動的ルート
├── components/
│   ├── ui/                 # 汎用UIコンポーネント
│   ├── features/           # 機能別コンポーネント
│   └── layouts/            # レイアウトコンポーネント
├── hooks/                  # カスタムhooks
├── stores/                 # Zustandストア
├── services/               # APIクライアント
└── CLAUDE.md               # AIルール定義

UIコンポーネント自動生成

Claude Codeに指示するだけで、実用的なUIコンポーネントが生成される。

カード型リストコンポーネント

プロンプト例: 「商品一覧のカードコンポーネントを作って。画像、タイトル、価格、お気に入りボタン付き」

// components/ui/ProductCard.tsx
import { View, Text, Image, Pressable } from "react-native";
import { Heart } from "lucide-react-native";
import { useState } from "react";

type Props = {
  id: string;
  title: string;
  price: number;
  imageUrl: string;
  onPress: (id: string) => void;
};

export function ProductCard({
  id, title, price, imageUrl, onPress
}: Props) {
  const [liked, setLiked] = useState(false);

  return (
    <Pressable
      onPress={() => onPress(id)}
      className="bg-white rounded-2xl shadow-md mb-4
                 overflow-hidden"
    >
      <Image
        source={{ uri: imageUrl }}
        className="w-full h-48"
        resizeMode="cover"
      />
      <View className="p-4">
        <Text className="text-lg font-bold text-gray-800">
          {title}
        </Text>
        <View className="flex-row justify-between
                        items-center mt-2">
          <Text className="text-xl font-bold text-blue-600">
            ¥{price.toLocaleString()}
          </Text>
          <Pressable onPress={() => setLiked(!liked)}>
            <Heart
              size={24}
              color={liked ? "#ef4444" : "#9ca3af"}
              fill={liked ? "#ef4444" : "none"}
            />
          </Pressable>
        </View>
      </View>
    </Pressable>
  );
}

フォームコンポーネント

プロンプト例: 「ログインフォームを作って。メール、パスワード、バリデーション付き」

// components/features/LoginForm.tsx
import { View, Text, TextInput, Pressable } from "react-native";
import { useState } from "react";

export function LoginForm({ onSubmit }: {
  onSubmit: (email: string, password: string) => void
}) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState<
    Record<string, string>
  >({});

  const validate = () => {
    const e: Record<string, string> = {};
    if (!email.includes("@"))
      e.email = "有効なメールアドレスを入力";
    if (password.length < 8)
      e.password = "8文字以上で入力";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSubmit = () => {
    if (validate()) onSubmit(email, password);
  };

  return (
    <View className="p-6">
      <Text className="text-2xl font-bold mb-6">
        ログイン
      </Text>
      <TextInput
        placeholder="メールアドレス"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        className="border border-gray-300 rounded-xl
                   p-4 mb-2"
      />
      {errors.email && (
        <Text className="text-red-500 mb-2">
          {errors.email}
        </Text>
      )}
      <TextInput
        placeholder="パスワード"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        className="border border-gray-300 rounded-xl
                   p-4 mb-2"
      />
      {errors.password && (
        <Text className="text-red-500 mb-2">
          {errors.password}
        </Text>
      )}
      <Pressable
        onPress={handleSubmit}
        className="bg-blue-600 rounded-xl p-4 mt-4"
      >
        <Text className="text-white text-center
                        font-bold text-lg">
          ログイン
        </Text>
      </Pressable>
    </View>
  );
}

Claude Codeを活用した開発フロー

フェーズ	Claude Codeへの指示例	所要時間
画面設計	「タブ3つのレイアウトを作って」	30分
UI実装	「このデザインをコンポーネント化して」	2-3時間
API連携	「このOpenAPIスキーマからクライアント生成」	1時間
状態管理	「認証状態をZustandで管理して」	30分
テスト	「このコンポーネントのテストを書いて」	1時間
デバッグ	「このエラーの原因を調べて修正して」	随時

1週間MVP開発スケジュール

日	作業
Day 1	環境構築 + 画面設計 + ナビゲーション
Day 2	主要画面のUI実装（ホーム/一覧/詳細）
Day 3	認証（ログイン/登録）+ 状態管理
Day 4	API連携 + データ取得/送信
Day 5	プッシュ通知 + オフライン対応
Day 6	UI調整 + バグ修正 + テスト
Day 7	Expo EASビルド + TestFlight/内部テスト配布

ビルドとデプロイ

# Expo EASでビルド
npx eas build --platform all --profile preview

# TestFlight / Google Play内部テストに配布
npx eas submit --platform ios
npx eas submit --platform android