気軽に楽しくプログラムと遊ぶ

自分が興味があってためになるかもって思う情報を提供しています。

CursorによるAI駆動開発

概要

CursorによるAI駆動開発は、開発の進め方を根底から変革するものであり、開発者はコードを自ら記述するよりも、AIを指揮し、その結果を管理・承認する役割が中心となる。

以下に、Cursorを用いたAIコーディングの基本的な使い方と手順、および活用方法を解説する。

Cursorを用いたAIコーディングの基本的な使い方と手順

1. 初期設定と導入

Cursorを効率的に使用するためには、初期設定が重要である。

(1) インストールと起動

公式サイトで「Cursor」と検索し、WindowsまたはMac用のインストーラーをダウンロード・インストールする。インストール完了後、アイコンをダブルクリックしてエディターを起動する。

(2) アカウントとモデルの設定

  • サインイン: 右上の歯車マークから設定画面を開き、GitHubやGoogleアカウントなどを使用してサインインする。
  • AIルール設定: 「Rules for AI」セクションで、AIに守ってほしいルール(例:すべての回答を日本語で出力する)を設定する。この設定はすべてのプロジェクトに適用される。
  • モデル選択: 「Models」タブで、Claude 3.5 SonnetやGPT-4などのモデルを選択できる。一般的にClaude 3.5 Sonnetは精度が非常に良いと評価されている。
  • コードベースのインデックス化: 「Codebase Indexing」を100%に設定することを推奨する。これにより、AIがプロジェクトコード全体を検索し、より精度の高い応答を返せるようになる。

2. 基本となる開発プロセス(Composerの活用)

AI駆動開発の中心機能は「コンポーザー(Composer)」であり、実装作業のほとんどをこれに任せることになる。

(1) コンポーザーの起動と指示

  • ショートカットキー Ctrl + I(または Cmd + I)を押してコンポーザーを起動する。
  • コンポーザーでは、ファイル作成やコーディングといった実装の中心的な作業を依頼する。
  • 実装したい内容を自然言語(日本語)で具体的に記述し、AIにコード生成を指示する。
  • チャットとの使い分け: チャット機能(Ctrl + L)は、ファイル探索や「このファイルの説明をしてください」といった調べ物に利用し、コーディング自体はコンポーザーに任せるのが一般的である。

(2) 画像を用いた指示

コンポーザーの右下にある「Image」ボタンや Ctrl + V を使用して、参考となる画像(スクリーンショットなど)を貼り付け、その見た目を忠実に再現するように指示できる。

(3) コードの承認(アクセプト)

  • AIが指示に基づきコードの変更案やファイル作成案を生成する。新しく追加されたコードは緑色で表示される。
  • 開発者は提案された内容をレビューし、クリックするか、ショートカットキー Ctrl + Shift + Y を使用して承認(アクセプト)する。
  • すべての提案を一括で承認したい場合は、右下の「Accept All」ボタンを押す。

3. 高度なコンテキスト管理(シンボル機能)

シンボル機能(@マーク)を利用することで、AIの回答精度を高め、大規模なプロジェクトにも対応できる。

(1) 参照コンテキストの指定

コンポーザーやチャット内で @ マークを使用し、AIに参照させたい情報源やコードの範囲を正確に指定する。

シンボル機能 目的/用途 補足情報 参照元
@ファイル名 / @関数名 特定のファイルや関数に絞って修正や質問を行う。 曖昧な指示ではなく、修正したい具体的なコード箇所を特定できるため、解決の確率が向上する。
@Docs 公式ドキュメントやサードパーティライブラリのドキュメントを参照させる。 最新バージョンに合わせた実装を確実に行わせるために利用する。
@Web Google検索を実行し、最新情報やマニアックなドキュメントを参照する。 開発環境内で情報収集を完結し、最新のAPI情報などを利用できる。
@Codebase プロジェクト全体のコード構造をAIに解析させ、概要を把握する。 開発途中のプロジェクトに参画した際など、全体構成を俯瞰的に理解するために役立つ。

(2) プロジェクトルール(Cursor Rules)の適用

プロジェクトのルートディレクトリに cursor.rules ファイルを作成することで、そのプロジェクト固有のコーディング規約(例:NEXT.jsでのRSCの積極的な活用、コンポーネントの分割など)を設定できる。これにより、AIが生成するコードの品質と一貫性を保つことが可能になる。

以下にDocやPR生成時のルールのサンプルあり Cursor の Project Rules 活用と改善

言語毎のコーディングルールは以下にあり(英語なので、英訳してから貼り付けるとわかりやすいかも) Next.js React TypeScript Cursor Rules rule by gab-o 👨🏻‍💻

ルールを守って実装しているか確認するとどの程度守っているか確認することも可能

4. 全自動開発(エージェントモード)

エージェントモードは、AIがコード生成を全て自動で行い、アプリケーションを完成させるモードである。

(1) エージェントモードの実行

コンポーザーの右下にある「ノーマル」から「エージェント」に切り替える。

(2) 用途と限界

  • 用途: データベース連携やリッチなUI(ダークモード、アニメーション)を含むTo Doアプリケーションのような、比較的規模の小さいアプリケーションを迅速に作成する場合に有効である。個人開発における最低限動作する機能(MVP)の迅速な市場投入にも役立つ。
  • 限界: エージェントモードは強力だが、複雑なカスタマイズやAIが解決できないエラーが発生した場合、あるいはコード全体のリファクタリングが必要な場合は、依然として開発者の知識や経験が必要となる。

関連情報一覧

機能 ショートカットキー 役割/用途
コンポーザー Ctrl + I または Cmd + I コーディング、ファイル作成、実装の中心
チャット Ctrl + L または Cmd + L ファイル探索、調べ物、知識に関する質問
承認(アクセプト) Ctrl + Shift + Y AIの提案したコード変更を承認する
エージェントモード コンポーザー右下から選択 承認なしで全自動開発(YOLOモード)
シンボル機能 @ マーク 参照するファイルやドキュメントを特定

参考文献