Lovable vs Cursor徹底比較 2025 - AIフルスタックエンジニアツールの決定版

-- Lovableが自動生成するSupabaseテーブル

-- レシピテーブル
CREATE TABLE recipes (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT,
  ingredients TEXT[] NOT NULL,
  instructions TEXT[] NOT NULL,
  image_url TEXT,
  prep_time INTEGER,
  cook_time INTEGER,
  servings INTEGER,
  difficulty VARCHAR(20) CHECK (difficulty IN ('easy', 'medium', 'hard')),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE
);

-- お気に入りテーブル
CREATE TABLE favorites (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  recipe_id UUID REFERENCES recipes(id) ON DELETE CASCADE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(user_id, recipe_id)
);

-- 評価テーブル
CREATE TABLE ratings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  recipe_id UUID REFERENCES recipes(id) ON DELETE CASCADE,
  rating INTEGER CHECK (rating >= 1 AND rating <= 5),
  comment TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(user_id, recipe_id)
);

-- セキュリティポリシー（Row Level Security）
ALTER TABLE recipes ENABLE ROW LEVEL SECURITY;
ALTER TABLE favorites ENABLE ROW LEVEL SECURITY;
ALTER TABLE ratings ENABLE ROW LEVEL SECURITY;

-- ポリシー設定
CREATE POLICY "レシピは誰でも閲覧可能" ON recipes
  FOR SELECT USING (true);

CREATE POLICY "レシピは作成者のみ編集可能" ON recipes
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "お気に入りは本人のみアクセス可能" ON favorites
  FOR ALL USING (auth.uid() = user_id);

# Lovableの自動デプロイ設定

# Netlify デプロイ設定 (netlify.toml)
[build]
  publish = "dist"
  command = "npm run build"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[context.production.environment]
  VITE_SUPABASE_URL = "https://your-project.supabase.co"
  VITE_SUPABASE_ANON_KEY = "your-anon-key"

---

# Vercel デプロイ設定 (vercel.json)
{
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm install",
  "env": {
    "VITE_SUPABASE_URL": "@supabase-url",
    "VITE_SUPABASE_ANON_KEY": "@supabase-anon-key"
  },
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

---

# Docker設定（セルフホスティング用）
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=0 /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

// Agent Modeの活用例
// AIが自律的にプロジェクトを分析・修正

// Agent Modeタスク例1：バグの自動修正
/*
指示: "このアプリケーションのバグを見つけて修正してください"

Agentの実行プロセス：
1. プロジェクト全体をスキャン
2. TypeScriptエラーを特定
3. 論理的な問題を検出
4. パフォーマンスの問題を発見
5. 自動的に修正を適用
*/

// 発見・修正される典型的な問題：
interface FixedIssues {
  // メモリリーク
  useEffect(() => {
    const interval = setInterval(() => {
      // 何らかの処理
    }, 1000);
    
    // 修正：クリーンアップ関数を追加
    return () => clearInterval(interval);
  }, []);

  // 型の不一致
  // 修正前：any型の使用
  const userData: any = await fetchUser();
  
  // 修正後：適切な型定義
  const userData: User = await fetchUser();

  // パフォーマンス問題
  // 修正前：非効率な再計算
  const expensiveValue = calculateExpensiveValue(props);
  
  // 修正後：メモ化
  const expensiveValue = useMemo(
    () => calculateExpensiveValue(props),
    [props.dependency]
  );
}

// Agent Modeタスク例2：新機能の追加
/*
指示: "ダークモード機能を追加してください"

Agentの実行：
1. テーマシステムの設計
2. Context Providerの実装
3. CSS変数の設定
4. コンポーネントの更新
5. 設定の永続化
6. テスト追加
*/

// .cursorrules ファイルでAIの動作をカスタマイズ

// プロジェクト固有のルール設定
/*
あなたはこのプロジェクトのシニア開発者です。
以下のルールに従ってコードを生成してください：

## コーディング規約
- TypeScriptを使用し、厳密な型チェックを行う
- 関数型プログラミングを優先（純粋関数、イミュータブル）
- コンポーネントはfunction宣言で作成
- CSS-in-JSではなくTailwind CSSを使用
- テストファーストアプローチ（Jest + React Testing Library）

## アーキテクチャ
- Clean Architectureに従う
- Domain Driven Designを適用
- SOLID原則を遵守
- 依存性注入を使用

## 特定のライブラリ
- 状態管理: Zustand
- フォーム: React Hook Form + Zod
- API: TanStack Query (React Query)
- ルーティング: React Router v6
- UI: Shadcn/ui + Tailwind CSS

## 命名規約
- ファイル名: kebab-case
- 関数・変数: camelCase  
- 型・インターフェース: PascalCase
- 定数: UPPER_SNAKE_CASE

## エラーハンドリング
- Result型パターンを使用
- すべての外部API呼び出しでエラーハンドリング
- ユーザーフレンドリーなエラーメッセージ

## パフォーマンス
- React.memo()を適切に使用
- 大きなリストでは仮想化を検討
- 画像は最適化し、lazy loadingを実装

## セキュリティ
- XSS対策を常に考慮
- センシティブな情報をログに出力しない
- 適切な認証・認可を実装
*/

// この設定により、Cursorは：
// 1. プロジェクト固有の規約に従ったコードを生成
// 2. 指定されたライブラリを優先使用
// 3. セキュリティベストプラクティスを適用
// 4. 一貫性のあるアーキテクチャを維持