KC Blog

Cursor IDEを使用してコード開発を支援する

15 min read
AI#cursor

実際の効果

  • IDE内に統合されたAIチャットを通じて、自分でコードを書かなくてもアプリ開発が可能

    flutter
  • 特定の部分だけAIと対話することもでき、エディタのカーソル位置で直接cmd+kを使用できます。

    flutter

目次

Cursorの特徴

  • Cursorはvscodeベースで作られたIDEです

    • 内蔵AIチャット機能があり、AIにプログラムを開発させ直接ファイルを修正してもらえます
    • チャット中にファイルを指定してAIにリファレンスとして提供でき、より正確な結果が得られます flutter
  • Cursorは一般的なLLMの設定をサポート

    • 自分が慣れているAIを使って開発できます
flutter
  • 自分のAPIキーも使用できます
flutter
  • Cursor Tab:コーディング中にIDEがコードに基づいて提案します。他のIDEのタブ補完や提案に似ています。

    • 無料ユーザー:2000回の提案制限があり、無料です。
    • プロフェッショナルおよびビジネスユーザー:支払い後、無制限のCursor Tab提案が利用可能です。
  • Cursor Composer:IDE内で直接プログラムコードを書いてファイルを修正でき、プロンプトだけでコードを書く真の体験を実現します。

  • CmdK:IDEのコード編集ページでAIを直接使用してコードを修正できます。カーソル位置で直接ショートカットキーcmd+kを使用します flutter

  • .cursorrules:AIに基本ルールを設定でき、AI開発をより正確にしてエラーを減らせます。

    • ルートディレクトリ.cursorrulesファイルを作成し、関連するプロンプトを設定できます
    • または直接setting > General > Rule for AIでグローバルルールを設定できます
  • .cursorignore:AIに対して無視するファイルを設定できます。

  • チャット中に@を入力して関連するリファレンスを取り込むことができます flutter

使用手順

  • まず公式サイトからcursorをダウンロードしてインストール:https://www.cursor.com/

  • プロジェクトを開く

    • open projectをクリックしてプロジェクトを開く

      flutter
  • 右上のflutter をクリックしてチャットウィンドウを展開 またはショートカットキーCTRL / CMD + lを使用

    flutter
  • Cursorの特徴は、AIに参照させるファイルを指定できること。+ Add contextをクリックしてファイルを選択できます

    flutter flutter
  • または対話ボックスに直接@codebaseと入力すると、cursorはコードベース全体を参照として使用します

    flutter
  • その他は一般的なAIチャットと同様で、llmモデルの切り替えや画像のアップロードなどができます

    flutter
  • AIに手伝ってほしい内容を入力します

    • 例:よく使われる方法として、画像をAIに入れてプロンプトを追加し、AIに作成してもらう

      flutter
  • 次はコードマージのようなプロセスで、AIが変更した内容をレビューします

    • チャットウィンドウで直接acceptまたはrejectをクリックできます

      flutter
    • または直接ファイルに移動してクリックすることもできます

      flutter

成果

  • claude-3.5.sonnetで生成された結果は、UIの図に非常に近いものになりました

    • 後で行う必要があるのは、UI/UXで設定された詳細に基づいて各コンポーネントの間隔、サイズ、色、画像リソース、コード結合度のレビューなどの調整だけです

      flutter
  • または新しい文字列がある場合、まずAIに生成してもらい、後で微調整するという方法も便利です

    flutter

使用テクニック

.cursorrules.cursorignoreを適切に活用する

  • .cursorrulesの設定

    • (Global) setting > Generalの Rules for AIでcursor ruleを設定できます flutter

    • (このプロジェクトのみ) もう一つの方法はプロジェクト内に.cursorrulesを作成すること flutter

    • Project rule(プロジェクト固有のルール):Setting > Project Rule > +Add new rule > ファイル名を直接入力してEnterを押すと、プロジェクト内の../.cursor/xxx.mdcに.mdcファイルが作成されます flutter

  • .cursorignoreの設定

    • ドキュメント

    • ルートディレクトリ.cursorignoreファイルを作成し、無視したいファイル/フォルダを追加します

      flutter
    • ルールは.gitignoreに似ており、設定するとcursorAIがインデックス(またはスキャン)するときに指定されたファイルを含めません

      • 不要なファイルのスキャンに無駄な時間を節約できます

      • また、機密データやファイルを追加して、機密情報の漏洩やAIプロバイダのサーバーへのアップロードを防止できます

      • ただし、公式では現在、無視するインデックスを最大限に達成するよう努力していると述べています

        flutter

        最大限に以下を達成しようとしています

        flutter
    • これは.gitignoreをベースにしており、.gitignoreが既に存在する場合はそれを基礎とします

    • 場所がわからない場合は、IDE内のCursor Setting > Feature > Codebase indexing > Ignore file > Configure ignored filesから見つけることができます

      flutter
  • .cursorindexingignore

    • このファイルは.gitignoreの関連内容を自動的に継承します

      • cursorがコードベースをインデックス化して参照することを知っているため、このファイルの概念は主に大きなファイルや開発に不要なバイナリファイルを除外して、チャットの全体的なパフォーマンスを向上させることです

        flutter
    • また、不要なファイルがデフォルトで設定されていますが、内容が長いので必要に応じてドキュメントを確認してください

      flutter
  • .cursorignore.cursorrulesの設定はgitからダウンロードして参考にできます http://192.168.201.72:8080/admin/repos/CursorConfig,general

AIチャット

  • 入力が多すぎてAIが処理できない場合は、内容を小さく分割したり、範囲を狭めたり、プロンプトをより明確に書くことをお勧めします。

  • Cursorチャットウィンドウでは、@を入力して特定のタイプのコンテンツをAIのリファレンスとして設定できます

    • 例:@Docで、ドキュメントを参照として追加できます。サードパーティAPIなどがある場合、直接渡して参照させることができます(@Docは現在、URL型のドキュメントの追加のみをサポートしています)

      flutter flutter
  • gitを活用する:ファイルの変更をこまめに保存しましょう。cursorは直接ファイルを修正するため、もしacceptした後に要件に合わないことがわかった場合でも、前のポイントに戻すことができます(全体の変更に適しています

  • チャットルーム内のrestoreを活用する:現在の対話で行われた修正結果を復元できます(単一の変更に適しています

    flutter

設定

  • Cursor setting > General > Private modeのドロップダウンメニューでプライバシーモードを有効にできます

    flutter
  • Cursorに参照させたいMCP Serverがある場合は、Cursor setting > feature > MCP Serverで追加できます

    flutter
  • Cursor setting > feature > Docsで対応するドキュメントを追加し、AIチャットのデフォルトの参照項目にすることができます

    flutter

Git

  • Cursor IDEにはsource controlというgit guiが提供されており、クリックでgit操作を直接行うことができます

    flutter
    • commit messageフィールドの右端には、generate commit message機能があり、現在のgit graph内のcommit messageに基づいて生成します

      flutter
    • ただし、現在の実験ではAirDroidのデフォルトテンプレートを生成できず、ローカルのgitにデフォルトのフォーマットを追加しても同様です。 期待値flutter

      実際flutter

  • もう一つの方法は、Chat内で@Commit generate commit messageを使って指定された形式を生成することです。これは実験的に私たちのデフォルトテンプレートを生成できることが確認されています

    flutter

Cursor IDEの個人設定共有

  • IDEの左側を縦方向に変更する

    • ショートカットキーCTRL/CMD + Shift + Pでコマンド機能を開く

    • Setting.jsonと入力し、Preferences: Open User Settings (JSON)をクリック

      flutter
    • Jsonファイルにキーworkbench.activityBar.orientation、値verticalを追加し、Cursorを再起動

  • .cursorrules

    • 各プロジェクトの要件に応じて追加します。よく使用するものを共有します
      - Don't make assumptions. 
      - Don't silently fix errors
      - Use my existing theme for colors,typography and spacing. 
      - Ask questions when uncertain about my code or design. 
      - Provide a list of tasks for accomplishing an implementation.
      - always include a :) at the end of your response
      
      (ここでのinclude a :)は現在の.cursorrulesが有効かどうかを確認する方法です)
    • インターネット上のcursorディレクトリを併用して生成します
  • プラグインのインストール

    • cursorは現在vscodeをベースにしており、デフォルトではkotlin関連リソースがありません。kotlinがcursor内で認識されるようにするには、 プラグインをダウンロードします(これはAIのパフォーマンスには影響しませんが、IDE内で.ktファイルを識別できるようにします)

    • MARKPLACEまたはEXTENSIONを見つけて検索すれば見つかります

    • 自分のニーズに応じて他のプラグイン(git、javaなど)をインストールします

      flutter

感想

  • Cursor IDEは複数の機能を統合し、AIによる開発プロセスをよりシンプルにしています。AIの提案内容を既存のプロジェクトに直接適用できるなどの機能があります

    • ただし残念なことに、これはvscodeをベースに拡張されたIDEなので、Android Studioのようなアンドロイド関連機能はありません
    • 海外の上級者は、cursorでコードを生成し、ASでコードをビルド・デバッグするような使い方をしています。例:I Made an Android App in MINUTES with This AI Tool
  • 今日Android開発ではなく、初めて触れる言語のプロジェクトを行う場合、理論的にはファイルを配置する場所をより速く知ることができ、より早く入門できます。また関連する仕事をしていない人でも、開発を素早く学ぶことができます

  • AIで生成することは確かに便利ですが、なぜそのように書かれているのかを理解することをお勧めします。そうすれば、AIの書き方を受け入れるかどうかを判断できます。

  • 価格:無料で使える回数があるので、まずは試用して自分の開発スタイルに合うかどうかを確認してから購入を決めるといいでしょう。

    flutter
  • 私の無料期間が終了し、cursor composerがロックされ、以前のAIモデルも使用できなくなりましたXD。 しかし、完全に無料のchat(チャットのみ使用可能)が提供されており、モデルをcursor-smallに設定すれば、まだ無料で使うことができます。

    flutter

おすすめサイト