Rork アプリ開発で AI コード補完を活用する方法 — 開発速度40%向上の実践ワークフロー

// GitHub Copilot が React Native コンポーネントを自動補完する例
// "user profile card" と入力するだけで以下のような補完が提案される
 
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
 
interface UserProfileCardProps {
  name: string;
  avatarUrl: string;
  bio: string;
}
 
// Copilot がコンポーネント全体を生成
const UserProfileCard: React.FC<UserProfileCardProps> = ({ name, avatarUrl, bio }) => {
  return (
    <View style={styles.card}>
      <Image source={{ uri: avatarUrl }} style={styles.avatar} />
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.bio}>{bio}</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  avatar: { width: 64, height: 64, borderRadius: 32 },
  name: { fontSize: 18, fontWeight: '600', marginTop: 8 },
  bio: { fontSize: 14, color: '#666', marginTop: 4 },
});
 
export default UserProfileCard;
// 期待する出力: プロフィールカードUIが描画される

# Claude Code を使って Rork 用プロンプトを最適化する例
claude "以下のアプリ要件を Rork に最適化されたプロンプトに変換してください:
- ユーザー認証（メール・Google・Apple Sign In）
- 商品一覧と検索機能
- カート機能とStripe決済
- プッシュ通知
フレームワーク: React Native + Expo"
 
# 期待する出力: Rork のプロンプト形式に最適化された
# 詳細な機能仕様とUI要件が生成される

# Rork プロジェクトをクローンして VS Code で開く
git clone https://github.com/your-username/rork-project.git
cd rork-project
npm install
code .

// Rork 生成コードに AI コード補完でエラーハンドリングを追加する例
import { useState, useCallback } from 'react';
import { Alert } from 'react-native';
 
// AI が提案するカスタムフック
const useApiCall = <T,>(apiFunction: () => Promise<T>) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const execute = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await apiFunction();
      setData(result);
      return result;
    } catch (err) {
      const message = err instanceof Error ? err.message : '予期しないエラーが発生しました';
      setError(message);
      Alert.alert('エラー', message);
      return null;
    } finally {
      setLoading(false);
    }
  }, [apiFunction]);
 
  return { data, loading, error, execute };
};
 
export default useApiCall;
// 期待する出力: API呼び出しのローディング・エラー状態を
// 一元管理するカスタムフックとして利用可能

// AI が生成するテストコード例
import { renderHook, act } from '@testing-library/react-hooks';
import useApiCall from '../hooks/useApiCall';
 
describe('useApiCall', () => {
  it('正常系: データを取得できること', async () => {
    const mockApi = jest.fn().mockResolvedValue({ id: 1, name: 'テスト' });
    const { result } = renderHook(() => useApiCall(mockApi));
 
    await act(async () => {
      await result.current.execute();
    });
 
    expect(result.current.data).toEqual({ id: 1, name: 'テスト' });
    expect(result.current.loading).toBe(false);
    expect(result.current.error).toBeNull();
  });
 
  it('異常系: エラーメッセージが設定されること', async () => {
    const mockApi = jest.fn().mockRejectedValue(new Error('ネットワークエラー'));
    const { result } = renderHook(() => useApiCall(mockApi));
 
    await act(async () => {
      await result.current.execute();
    });
 
    expect(result.current.error).toBe('ネットワークエラー');
    expect(result.current.data).toBeNull();
  });
});
// 期待する出力: 全テストがパスする

// AI が提案する FlatList のパフォーマンス最適化
import React, { useMemo, useCallback } from 'react';
import { FlatList, View, Text } from 'react-native';
 
const OptimizedProductList = ({ products }) => {
  // AI 提案: getItemLayout で固定高さを指定しスクロール性能を改善
  const getItemLayout = useCallback(
    (_, index) => ({
      length: 80,
      offset: 80 * index,
      index,
    }),
    []
  );
 
  // AI 提案: keyExtractor をコンポーネント外でメモ化
  const keyExtractor = useCallback((item) => item.id.toString(), []);
 
  // AI 提案: renderItem をメモ化して不要な再描画を防止
  const renderItem = useCallback(
    ({ item }) => (
      <View style={{ height: 80, padding: 16 }}>
        <Text style={{ fontSize: 16, fontWeight: '600' }}>{item.name}</Text>
        <Text style={{ color: '#888' }}>¥{item.price.toLocaleString()}</Text>
      </View>
    ),
    []
  );
 
  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={getItemLayout}
      maxToRenderPerBatch={10}
      windowSize={5}
      removeClippedSubviews={true}
    />
  );
};
// 期待する出力: 大量の商品リストでもスムーズにスクロール可能

// Supabase からユーザーのお気に入り商品を取得し、
// 価格の高い順にソートして上位10件を返す関数
const getTopFavorites = async (userId: string) => {
  const { data, error } = await supabase
    .from('favorites')
    .select('*, products(*)')
    .eq('user_id', userId)
    .order('products(price)', { ascending: false })
    .limit(10);
 
  if (error) throw new Error(error.message);
  return data;
};
// 期待する出力: ユーザーのお気に入り商品上位10件の配列

<!-- .github/copilot-instructions.md の例 -->
# プロジェクト規約
- フレームワーク: React Native + Expo (SDK 52)
- 状態管理: Zustand
- スタイリング: StyleSheet.create()（Tailwind は不使用）
- API 通信: Supabase JavaScript Client
- 認証: Supabase Auth
- ナビゲーション: Expo Router (file-based routing)
- 言語: TypeScript strict mode
- テスト: Jest + React Native Testing Library

# Claude Code でエラーを解析する
claude "以下のエラーを修正してください:
Error: Text strings must be rendered within a <Text> component.
ファイル: src/components/ProductCard.tsx 42行目"
 
# 期待する出力: 条件分岐内の文字列が <Text> で
# ラップされていない箇所の特定と修正案