AIコードエディタCursorをサクッと触ってみた

この記事で分かること

• 生成AI搭載のコードエディタCursorの概要

Cursorエディタとは

• 生成AI（ChatGPT）を標準搭載しており、AIとペアプロするような感覚でコーディングができる
• VSCodeをフォークして作られており、VSCodeの機能はそのまま使える

インストール

• 公式サイトからインストーラーをダウンロードする
  • Cursor - The AI-first Code Editor

すごい機能その１：学習機能

• チャット欄に@を入力後、+ Add new docを選択し、外部サイトのドキュメントのリンクを貼るとそのサイトについて学習してくれる
  • ChatGPTの弱点であった最新情報へのキャッチアップについても対応可能

すごい機能その２：New AI Project

• File → New AI Project...を選択
• What do you want to build?と聞かれる
• 「DynamoDBにアクセスし、ユーザー一覧を表示するWebアプリ」などと記入する
• 自動的に必要なファイルを全て作成してくれる（ただしバグ有り）
• 【注意】無料版だと生成に時間が掛かる

基本的な使い方

Ctrl + L（Command + L）でChatGPTとの対話ウィンドウが開く

• ChatGPTと同じ要領で使用可能

特定のコードを範囲選択し修正を指示する

1. 対象範囲選択
2. Ctrl + K（Command + K）
3. 修正内容を指示

例）

• オリジナルのコード

export const getAllPokemon = (url) => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};

• 指示内容

async/awaitを使って書き換えて

• 修正結果

export const getAllPokemon = async (url) => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    throw error;
  }
};

コードにエラーがあるとき（赤波線が出ているとき）修正方法を教えてくれる

• エラー箇所にカーソルを合わせるとAI Fix in Chatというボタンが表示される
• クリックするとチャット欄に対策や修正されたコードが表示される

シンボル機能

• チャット欄に@を入力するとファイル等を参照できるようになる
  • 特定のコードを全て貼り付けるのに便利
• AWS、Flutter等の外部のサイトのドキュメントを参照できる

料金体系とプラン毎の主な機能

• 無料版
  • GPT4.0が50回まで
  • GPT3.5が月に200回まで
• Pro版（$20/月）
  • 高速なGPT4.0が月に500回まで（500回を超えたら低速GTP4.0）
• Business版（1ユーザー$40/月）
  • Pro版の全機能
  • OpenAIがデータを保持しない

料金体系の詳細はこちら
https://cursor.sh/pricing

---

参照

• Cursor - The AI-first Code Editor