メインコンテンツまでスキップ

Cursor、Gemini、Claude を使用した大規模コードベースの習得:実践ガイド

1. プロジェクトのセットアップ:AI コラボレーションの基盤を築く

プロジェクトを、あなたと AI コラボレーター(Gemini と Claude)が素晴らしいものを構築する整理された作業場として考えてください。最初のステップは、作業場を適切にセットアップすることです。

1.1. .cursorrules でエンゲージメントルールを定義する

作業場にルールが必要なように、AI コラボレーターにもガイドラインが必要です。プロジェクトのルートに .cursorrules ファイルを作成します。このファイルは憲法のように機能し、AI がコードとどのように相互作用すべきかを定義します。

理由: これにより、全員(あなたと AI)が優先順位、コーディング標準、タスクへのアプローチ方法について同じページにいることを確認できます。

.cursorrules の例:

{
"rules": {
"context_initialization": {
"description": "各インタラクションの開始点",
"steps": [
"必ず `.notes/project_overview.md` と `.notes/task_list.md` を読む"
]
},
"operational_protocol": {
"description": "タスクへのアプローチ方法",
"before_action": [
"MECE タスク分解を作成する"
],
"code_changes": [
"編集前に関連するコードセクションを読む",
"既存の機能を保持する",
"型安全性を維持する"
]
},
"safety_requirements": [
"型安全性を絶対に破らない",
"常に適切なエラー処理を維持する",
"常に新しいコードを文書化する"
],
"priorities": [
{
"source": ".notes/",
"weight": 1.0
}
],
"modes": {
"base": {
"description": "ルーチンタスク用"
},
"enhanced": {
"description": "複雑な問題用"
}
},
"project_directives": {
"name": "my_project",
"ai_first": true
}
}
}

1.2. .cursorignore でファイルの可視性を制御する

バージョン管理で .gitignore を使用するのと同様に、.cursorignore を使用して AI ヘルパーに何を無視するべきかを伝えます。

理由: これにより、AI がプロジェクトの本質的な部分に集中し、ノイズを減らし効率を向上させることができます。

.cursorignore の例:

/node_modules
/build
/temp
.DS_Store

1.3. .notes で中央ハブを確立する

すべてのプロジェクトには情報の中央ハブが必要です。.notes ディレクトリを作成して、プロジェクト関連のドキュメント、ミーティングノート、アーキテクチャ図、AI インタラクションログをすべて保存します。これをプロジェクトの「脳」または「知識ベース」として考えてください。

理由: これにより、あなたと AI コラボレーターがプロジェクトの目標、状態、履歴について共通の理解を持つことができます。

.notes の主要ファイル:

  • project_overview.md プロジェクトの高レベルな説明、目標、アーキテクチャ。
  • task_list.md タスクの詳細なリスト、その状態(「To Do」、「In Progress」、「Complete」など)、優先順位、関連するメモ。
  • directory_structure.md プロジェクトのディレクトリ構造の自動更新される概要。これにより AI が異なるコードコンポーネントの場所を理解できます。
  • meeting_notes.md AI とのインタラクションのログ。質問、回答、決定事項を含みます。

2. .notes と共有コンテキストの管理

チームで作業しているところを想像してください。効果的に協力するには、全員がプロジェクトについて共通の理解を持つ必要があります(スクラム/カンバン/プロジェクト計画のように)。これが markdown ドキュメント を共有ノートパッドとして使用する理由です。

2.1. project_overview.md を作成する

このドキュメントはプロジェクトの「エレベーターピッチ」のようなものです。プロジェクトの概要、目標、高レベルアーキテクチャ、そして(オプションですが強く推奨される)いくつかのユーザージャーニーの例を簡潔に提供する必要があります。

例:

# プロジェクト概要

## 目標

ユーザーが To-Do リストを作成・管理できる Web アプリケーションを構築する。

## アーキテクチャ

- **フロントエンド:** TypeScript を使用した React アプリケーション
- **バックエンド:** Node.js とクラウドデータベースを使用したサーバーレス API
- **状態管理:** React フックに基づくカスタム状態管理ソリューションを使用

## 主要機能

- ユーザー認証
- To-Do リストの作成、編集、削除
- タスクを完了としてマーク
- リアルタイム同期

2.2. task_list.md を作成する

このファイルはプロジェクトの「To-Do リスト」です。すべてのタスク、その状態、優先順位、関連するメモを追跡する必要があります。

例:

# タスクリスト

## 高優先度

- [ ] ユーザー認証フローを実装する。(**状態:** 進行中、**担当:** Gemini、**メモ:** 現在ログインコンポーネントに取り組んでいる)
- [ ] データベーススキーマを設計する。(**状態:** To Do、**担当:** Claude、**メモ:** スケーラビリティを考慮する必要がある)

## 中優先度

- [ ] To-Do リスト作成の基本 UI を作成する。(**状態:** To Do、**担当:** Gemini、**メモ:** 認証の完了を待っている)

## 低優先度

- [ ] タスクのカテゴリ化サポートを追加する。(**状態:** To Do、**担当:** なし、**メモ:** 後で実装可能)

## 完了

- [x] プロジェクト構造をセットアップする。
- [x] ヘッダーとフッターの基本的な React コンポーネントを作成する。

2.3. directory_structure.md を生成する

このファイルはプロジェクトのレイアウトのマップを提供します。手動で作成するか、スクリプトを使用して自動的に生成できます。

例(手動):

# ディレクトリ構造

- **components/**: 再利用可能な UI コンポーネント(Button、Input、List など)
- **hooks/**: カスタム React フック(useAuth、useData など)
- **lib/**: ユーティリティ関数と API クライアント
- **pages/**: トップレベルのアプリケーションページ(Home、Login、Register など)
- **styles/**: グローバルスタイルとテーマ定義

スクリプト例(PowerShell):

# update_directory.ps1 として保存
$projectRoot = "."
$outputFile = "./.notes/directory_structure.md"

# ディレクトリリストを生成する
function Get-FormattedDirectory {
param (
[string]$path,
[int]$indent = 0
)

$indentString = " " * $indent
$content = ""

foreach ($item in Get-ChildItem -Path $path -Force) {
if ($item.PSIsContainer) {
$content += "$indentString- **$($item.Name)/**`n"
$content += Get-FormattedDirectory -path $item.FullName -indent ($indent + 1)
} else {
$content += "$indentString- $($item.Name)`n"
}
}
return $content
}

# markdown ファイルのコンテンツを生成する
$markdownContent = @"
# 現在のディレクトリ構造

## コアコンポーネント

$(Get-FormattedDirectory -path $projectRoot)

"@

# ファイルに出力する
$markdownContent | Out-File -FilePath $outputFile -Encoding UTF8

Write-Host "ディレクトリ構造が $($outputFile) に更新されました"

3. プロンプトの習得と会話の焦点化

上記で作成したドキュメントを通じて、あなた、Claude、Gemini が同じページにいるデジタル「作業場」をセットアップしたので、Gemini を使用して通常モードで Composer の使用を開始する時です。これがプロンプトの技術が活きる場面です。

3.1. なぜコンテキストが重要なのか?

  • 焦点: スポットライトのように、コンテキストは AI がコードベースの関連部分に集中し、無関係な詳細を無視するのに役立ちます。
  • 正確性: プロジェクトの目標、状態、アーキテクチャについての共通理解により、応答が正確で意図に沿ったものになります。
  • 一貫性: AI がプロジェクトのアーキテクチャの整合性を維持し、既存の機能を破壊したり不整合を導入したりする変更を防ぐのに役立ちます。

3.2. @ を使用して AI に焦点を当てる

@ 記号は、Cursor 内で Gemini と Claude にコンテキストを提供するための主要なツールです。会話中に特定のドキュメントやコードセクションを指し示すようなものです。

例:

  • @components/Button.tsx: "Gemini、この特定のコンポーネントに焦点を当てましょう。"
  • @.notes/task_list.md: "Claude、現在のタスクリストと優先順位を確認してください。"
  • @.notes/project_overview.md: "Gemini、議論した全体的な目標とアーキテクチャを覚えていますか?"

3.3. AI の回答を正確性と一貫性で基礎付ける

  • 具体的に: 直接的で具体的な質問をします。曖昧な言葉を避けます。
    • 代わりに: "このコードをどのように改善できますか?"
    • 試す: "Gemini、@components/LoginForm.tsxhandleSubmit 関数をどのようにより効率的にできますか?"
  • MECE を使用: MECE(相互排他的で全体網羅的)は強力な問題解決技法です。複雑なタスクを重複しない小さなサブタスクに分解します。
    • 例: "Claude、ユーザー認証フローの実装を MECE を使用して分解しましょう:
      1. ユーザー入力: ユーザー名とパスワードの入力を処理する。
      2. API コール: 認証 API に認証情報を送信する。
      3. レスポンス処理: API レスポンス(成功またはエラー)を処理する。
      4. 状態更新: 認証結果に基づいてアプリケーションの状態を更新する。
        この分解についてどう思いますか?何か提案はありますか?"
  • 反復と改善: 最初の試みで完璧な結果を期待しないでください。AI との対話的な会話を行います。提案についてフィードバックを提供し、明確化のための質問をし、その応答に基づいてプロンプトを改善します。
    • 例: "Gemini、handleSubmit 関数の最適化の提案は良いですが、競合状態の可能性に対処していません。そのシナリオを処理するためにどのように修正できますか?"
  • 「なぜ」を尋ねる: AI に理由を説明するよう促します。これにより、その思考プロセスを理解し、潜在的な誤解を特定するのに役立ちます。
    • 例: "Claude、@.notes/project_overview.md で概説されている状態管理アプローチではなく、この特定のアプローチを推奨した理由は何ですか?"