AIコード生成 (Cmd+K)

Cursor AIのコード生成機能は、自然言語による説明からコードを生成する革新的な機能で、開発効率を大幅に向上させます。Cmd+K（Mac）またはCtrl+K（Windows/Linux）ショートカットで、この強力な機能をすぐに起動できます。

基本概念

1. 動作原理

自然言語処理：説明をコードに変換
コンテキスト理解：現在のファイルとプロジェクトの状況を考慮
インテリジェント生成：ベストプラクティスに準拠したコードを生成

2. 使用シナリオ

新機能開発：新機能を迅速に実装
コードリファクタリング：既存コードの最適化
問題修正：コードの問題を解決
テスト生成：テストケースを自動生成

使用方法

1. 基本操作

コード生成の開始
- Cmd/Ctrl + Kを押下
- エディタでコードを選択後Cmd/Ctrl + K
- コマンドパレットから「AI コード生成」を選択
プロンプト入力
- 明確な自然言語で説明
- 必要なコンテキスト情報を提供
- 具体的な要件と制約を指定
結果処理
- 生成コードを確認
- 必要に応じて修正
- プロジェクトに統合

2. プロンプト作成テクニック

機能実装

Reactコンポーネントを作成：ユーザープロフィール表示（アバター、名前、自己紹介）、編集機能付き

コード変換

このJavaScriptコードをTypeScriptに変換し、適切な型定義を追加

問題修正

このコードにパフォーマンス問題があります。ループとデータ構造に注目して最適化してください

高度な機能

1. コンテキスト認識

プロジェクト構造
- プロジェクトアーキテクチャを理解
- プロジェクトの規約に従う
- コードの一貫性を維持
依存関係
- インポートを自動処理
- 依存関係の競合を解決
- ベストプラクティスを推奨
コードスタイル
- 既存スタイルに合わせる
- コーディング規約に準拠
- 一貫性を維持

2. マルチファイル操作

クロスファイル生成

完全なCRUD機能を作成：APIルート、データモデル、フロントエンドコンポーネントを含む

関連ファイル更新

新しいデータフィールドを追加し、関連する全てのモデル、API、コンポーネントを更新

3. インテリジェントリファクタリング

コード最適化

この関数をモダンなJavaScript機能を使用してリファクタリングし、可読性とパフォーマンスを向上

パターン適用

このコードをオブザーバーパターンを使用してリファクタリングし、既存機能を維持

ベストプラクティス

1. プロンプト作成

明確な目標

TypeScriptとReactを使用した、ページネーションと検索機能付きデータテーブルコンポーネントを作成

詳細な制約

...(約180行省略)...

ヒント

生成コードは必ず検証してください
段階的な生成が大規模プロジェクトに適しています
コンテキスト情報を積極的に提供

注意

機密情報を入力しないでください
生成コードのセキュリティを確認
パフォーマンス要件を明確に指定

よくあるシナリオ例

1. API開発

typescript

// ヒント：RESTful APIエンドポイントを作成し、ユーザー登録機能を処理
export async function POST(req: Request) {
  try {
    const { email, password, name } = await req.json()

    // データ検証
    if (!email || !password || !name) {
      return new Response('Missing required fields', { status: 400 })
    }

    // ユーザー作成
    const user = await db.user.create({
      data: {
        email,
        password: await hashPassword(password),
        name,
      },
    })

    return new Response(JSON.stringify(user), {
      status: 201,
      headers: { 'Content-Type': 'application/json' },
    })
  }
  catch (error) {
    return new Response('Error creating user', { status: 500 })
  }
}

2. UIコンポーネント

typescript

// ヒント：再利用可能なモーダルコンポーネントを作成：カスタマイズ可能なタイトル、コンテンツ、アクションボタンをサポート
interface ModalProps {
  isOpen: boolean
  onClose: () => void
  title: string
  children: React.ReactNode
  actions?: React.ReactNode
}

export function Modal({
  isOpen,
  onClose,
  title,
  children,
  actions,
}: ModalProps) {
  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white rounded-lg p-6 max-w-md w-full">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-bold">{title}</h2>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
            <span className="sr-only">閉じる</span>
            <XIcon className="h-6 w-6" />
          </button>
        </div>
        <div className="mb-6">{children}</div>
        {actions && (
          <div className="flex justify-end gap-4">{actions}</div>
        )}
      </div>
    </div>
  )
}

3. ツール関数

typescript

// ヒント：データ処理関数を作成：ソート、フィルタリング、ページネーションをサポート
interface PaginationOptions {
  page: number
  pageSize: number
}

interface SortOptions {
  field: string
  order: 'asc' | 'desc'
}

interface FilterOptions {
  field: string
  value: any
}

export function processData<T>(
  data: T[],
  pagination?: PaginationOptions,
  sort?: SortOptions,
  filters?: FilterOptions[]
): {
    items: T[]
    total: number
  } {
  let result = [...data]

  // フィルタリング適用
  if (filters?.length) {
    result = result.filter(item =>
      filters.every(filter => item[filter.field] === filter.value)
    )
  }

  // ソート適用
  if (sort) {
    result.sort((a, b) => {
      const compareResult = a[sort.field] > b[sort.field] ? 1 : -1
      return sort.order === 'asc' ? compareResult : -compareResult
    })
  }

  // ページネーション適用
  const total = result.length
  if (pagination) {
    const { page, pageSize } = pagination
    const start = (page - 1) * pageSize
    result = result.slice(start, start + pageSize)
  }

  return { items: result, total }
}

トラブルシューティング

1. よくある問題

生成コードが期待と異なる：プロンプトの最適化
コンテキスト理解が不正確：より関連情報を提供
パフォーマンス問題：生成リクエストの簡素化

2. 最適化の提案

定期的なCursor更新
プロジェクト構造の最適化
プロンプトの質の向上

ヒント

明確で具体的な自然言語の説明を使用
十分なコンテキスト情報を提供
生成コード後に注意して確認とテスト

注意

生成コードは必ず検証
機密情報を入力しない
コードの品質を維持

AIコード生成 (Cmd+K) ​

基本概念 ​

1. 動作原理 ​

2. 使用シナリオ ​

使用方法 ​

1. 基本操作 ​

2. プロンプト作成テクニック ​

機能実装 ​

コード変換 ​

問題修正 ​

高度な機能 ​

1. コンテキスト認識 ​

2. マルチファイル操作 ​

3. インテリジェントリファクタリング ​

ベストプラクティス ​

1. プロンプト作成 ​

明確な目標 ​

詳細な制約 ​

よくあるシナリオ例 ​

1. API開発 ​

2. UIコンポーネント ​

3. ツール関数 ​

トラブルシューティング ​

1. よくある問題 ​

2. 最適化の提案 ​

AIコード生成 (Cmd+K)

基本概念

1. 動作原理

2. 使用シナリオ

使用方法

1. 基本操作

2. プロンプト作成テクニック

機能実装

コード変換

問題修正

高度な機能

1. コンテキスト認識

2. マルチファイル操作

3. インテリジェントリファクタリング

ベストプラクティス

1. プロンプト作成

明確な目標

詳細な制約

よくあるシナリオ例

1. API開発

2. UIコンポーネント

3. ツール関数

トラブルシューティング

1. よくある問題

2. 最適化の提案