はじめに
CursorはAIを活用したコードエディタで、コードの自動生成から質問の応答、エラーの修正まで、ウェブ制作のみならず様々な開発において強力な機能を提供しています。どのような開発者もCursorを使用することでコーディングの効率を大幅に向上させることができるため、コードエディタの選択においてはCursorが主流になる可能性が期待されます。
Cursorは無料で使用できるBasicプランを提供しており、AIによるコーディング支援を受けるための基本的な機能が利用できます。また、AI支援の利用回数の拡張が必要であれば有料プランであるProまたはBusinessプランを選択することができます。
この記事ではCursorの特徴について触れ、インストール方法と日本語化の設定方法、Cursorの基本的な使い方について解説します。
この記事の対象者
- AIに興味がある方
- コードエディタの選択に迷っている方
- Cursorをインストールしたい方
Cursorとは
CursorはOpenAIのChatGPTを通じてAIアシスタントとしての機能を提供しており、ユーザーはCursorを使用することでChatGPTをダイレクトにコーディング支援ツールとして利用することができます。
CursorはVSCodeをベースにしたコードエディタであり、インストールの際にVSCodeの拡張機能を引き継ぐことができます。UIデザインもVSCodeと似通っているため、VSCodeのユーザーであればスムーズに移行することができるでしょう。
GitHub Copilotとの違い
VSCodeでもGitHub Copilotを使用することでAIによる支援を受けることができますが、Cursorとはやや使い勝手が異なります。
GitHub CopilotはGitHubリポジトリで一般公開されているコードを利用してトレーニングされているため、時にはGitHub Copilotの方が求めるコードを出力してくれる可能性があります。また、GitHub Copilotはコメントやコードの入力途中に意図を予測して提案してくれるところも強力です。
しかし、GitHub Copilotはプロジェクト全体のコードを読み込みの対象としません。それに対し、CursorはCodeBaseという機能によってプロジェクト全体に関するAI支援を受けることができます。また、CursorはAIに特定のウェブサイトの内容を読ませて学習させることができるところもGitHub Copilotにはない強力な機能です。
Cursorの料金プラン
Cursorは３つの料金プランを提供しています。
- Basicプラン（無料）：Cursorを無料で試すことができます。Slow GPT-4の利用回数は50回まで、GPT-3.5の利用回数は一か月あたり200回までという制限があります。
- Proプラン（月額20＄）：Fast GPT-4の利用回数は一か月あたり500回まで、Slow GPT-4とGPT-3.5は無制限で使用できます。
- Businessプラン（月額40＄）：Proプランに加え、複数のアカウントの請求をまとめる機能や、ユーザーのデータをOpenAIに保持させないようにする機能が追加されます。
Basicプランを利用する際も、OpenAIが提供するChatGPT-4を利用しているユーザーであればAPIキーを設定してそのトークンを利用することができます。まずはBasicプランで試してみましょう。Cursorのインストール方法について解説します。
Cursorをインストールする
Cursorの公式サイトにアクセスし、インストーラーをダウンロードします。
ダウンロードが完了したらインストーラーを起動します。以下のような画面が表示されます。
「Shortcuts」「Vim/Emacs」「Codebase-wide」の項目はデフォルトで問題ないかと思います。「Language」の項目でAIを利用する際の言語に英語以外を選択できるようです。ここでは「日本語」と入力しておきます。
また、「Command Line」の項目ではコマンドラインでCursorを開くためのツールをダウンロードでき、コマンドに「code」か「cursor」のどちらを利用するかも選択できます。VSCodeユーザーであればコマンドラインで「code」と入力すればVSCodeを起動させることができるため、競合を避けるため「cursor」のみを選択しておきます。
「Continue」ボタンをクリックすることで先に進みます。以下の画面が表示されます。
VSCodeの拡張機能や設定、キーバインドを引き継ぐかどうかを選択できます。「Use Extensions」を選択することで引き継ぐことができます。続いて、以下の画面が表示されます。
AI機能を使用するにはログインが必要だと言っています。Cursorのサイトでアカウントを作成する必要があります。「Sign Up」を選択するとCursorのサイトのアカウント作成画面が表示されます。
GoogleやGitHubのアカウントを使用してアカウントを作成できるようです。アカウントを作成したら以下の画面が表示されました。
Cursorの画面に戻って「Log In」を選択します。これでCursorを使用することができます。
Cursorを日本語設定にする
Cursorのメニューバーを見ると初期設定では表示言語が英語になっているので、これの日本語化を行います。メニューバーの「View」→「Command Palette」を選択します。
テキスト入力欄とコマンドの候補が表示されます。テキスト入力欄に「Configure」と入力すると、コマンドの候補の上位に「Configure Display Language」が表示されるのでこちらを選択します。
続いて「日本語（ja）」を選択します。
表示言語を日本語に変更するにはCursorを再起動する必要があると言われます。「Restart」を選択しましょう。
再起動すると表示言語が日本語になっていることが確認できました。表示言語の日本語化は以上です。
CursorのAI機能を使ってみる
CursorはAI機能をChatGPTによって提供しており、利用するChatGPTのバージョンを選択することができます。初期設定では「GPT-4」が選択されていますが、無料で利用できるBasicプランではGPT-4の質問回数は50回という制限があり、恐らくは月が切り替わっても利用回数は回復しません。
今後有料プランで利用するつもりであればGPT-4のままでも良いと思いますが、お試しでCursorを使うなら毎月利用回数が回復する「GPT-3.5」に切り替えたほうが良いと思うので、まずは利用するChatGPTのバージョンをGPT-3.5に切り替えます。
ChatGPTのバージョンを切り替える
Cursorの初期表示では、画面の右側にAIとチャットでやりとりするためのサイドバーが表示されているかと思います。表示されていない場合は「Ctrl + L」（Macの場合はCmd + L）を押すと表示されます。
「gpt-4」の部分をクリックすると「gpt-3.5」を選択できます。
これでChatGPTのバージョンの切り替えができました。
CHAT機能を使ってみる
Cursorを起動した直後はCursorのチュートリアルがプロジェクトとして自動的に生成され、初期表示では「README.md」という英語のファイルが表示されているかと思います。
CHAT機能を簡単に試すために、まずはREADME.mdの内容を日本語に翻訳してもらいます。CHATのテキスト入力欄に「README.mdを日本語に翻訳してください。」と入力すると、以下のような回答が返ってきました。
# はじめに
Cursorへようこそ。ここでは基本的なことを紹介します:
* コードをハイライトして、Cmd+Kを押して編集を促します。
* 右側のバーのボタンをクリックしてチャットを開きます（右上）。
- コードをハイライトして、Cmd+Shift+Lを押してAIを特定のコードに焦点を当てます
- "with codebase"ボタンを試して、リポジトリ全体について質問してみてください
- ドキュメントをインポートするには@を使用します
* リントエラーにカーソルを合わせます。"チャットで修正"をクリックします。
* ターミナルエラーにカーソルを合わせます。"自動デバッグ"をクリックします。
Cursorを使用して、編集を生成したり、バグを見つけたり、コードを見つけたり、ドキュメントを学んだり、コードを説明したりしてみてください。
何か問題が発生した場合やフィードバックがある場合は、hi@cursor.soまでお気軽にお問い合わせください。右上のファイルの形をしたアイコンをクリックすると回答をコピーできます。
@Symbols機能を使ってみる
チュートリアルにはREADME.md以外にもいろいろなディレクトリやファイルが置かれています。試しに、「projects/javascript/src/index.js」のファイルを日本語に翻訳してもらいます。README.mdが表示されている状態で「index.jsを翻訳してください。」と入力すると、意図しない結果が返ってきました。
// このファイルは、Cursorの基本を紹介するものです。
// Cursorを使って、編集を生成したり、バグを見つけたり、コードを見つけたり、ドキュメントを学んだり、コードを説明したりしてみてください。
// 何か問題がある場合やフィードバックがある場合は、hi@cursor.soまでお気軽にお問い合わせください。index.jsを開いた状態で同じ質問をすれば意図したとおりの答えが返ってきますが、@Symbolsという機能を利用することでアクティブになっているファイルに関わらず特定のファイルの内容を読み込んでくれます。@Symbols機能は「@ファイル名」と記述することで利用できます。
「@index.js」の後に続けて入力できます。
回答の全体は以下です。正しくindex.jsを読み込めていることが分かります。
///////////////////////
// カーソルへようこそ //
///////////////////////
/*
ステップ1：新しい行でCmd+KまたはCtrl+Kを押して、tictactoeをプレイできるReactコンポーネントを生成してみてください。
- 次に、それを以下のコードに統合してnpm startで実行してみてください
ステップ2：マウスでコード全体をハイライトし、次にCmd+KまたはCtrl+Kを押してください。
- ゲームを何らかの方法で変更するように指示してください（例：インラインスタイルを追加、スタート画面を追加、3x3ではなく4x4にするなど）
ステップ3：Cmd+LまたはCtrl+Lを押して、コードが何をしているかチャットに尋ねてみてください
ステップ4：自分のプロジェクトでカーソルを試すには、ファイルメニュー（左上）に移動してフォルダを開いてください。
*/
import React from 'react';
import ReactDOM from 'react-dom/client';
function App() {
return (
<div className="App">
<header className="App-header">
こんにちは、世界
</header>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);Codebase機能を使ってみる
Codebaseはプロジェクトの全体のコードを読み込んでくれるという機能です。CHATで「@Codebase」と入力すると利用できます。比較のために、まずはCodebase機能を使わずに質問してみます。
README.mdがアクティブな状態でindex.jsファイルの内容を試す手順について聞くと、以下のように返ってきました。
catコマンドはファイルの内容を表示するためのものです。ファイルの内容を試す手順ではありません。続いて、Codebase機能を使ってから同じ質問をします。
回答の全体は以下です。
Step 1: index.jsファイルの内容を試すには、まずReactコンポーネントを生成し、それをindex.jsに統合してnpm startを実行します。
Step 2: マウスでコードをハイライトし、Cmd+KまたはCtrl+Kを押してゲームを変更します（例：インラインスタイルの追加、スタート画面の追加、3x3から4x4に変更など）。
Step 3: Cmd+LまたはCtrl+Lを押して、コードの動作についてチャットに質問します。
Step 4: 自分のプロジェクトでCursorを試すには、ファイルメニュー（左上）からフォルダーを開きます。index.jsのコメント部分を日本語に翻訳したようなものが返ってきました。具体的な解説とは言えませんが、index.jsの内容を読み込んでいることが分かります。CHATを閉じない限りは読み込んだ内容を覚えていてくれるようなので（質問の回数や日数は未検証です）、続けて違うファイルやディレクトリについても質問できます。
examplesディレクトリには、finding_code.tsとlearning_oss.mdという2つのファイルが含まれています。
finding_code.tsは、ファイルサービスとプロバイダーに関連するコードを含んでおり、IFileServiceやファイルの関連設定などが定義されています。
一方、learning_oss.mdは、新しいライブラリや技術の使用方法についてチャットに尋ねる例が記載されています。このように、codebase機能を使うとプロジェクト全体に関する質問をすることができます。プロジェクト内の特定のファイルやディレクトリに関する情報を知りたいときに利用できるでしょう。
Docs機能を使ってみる
Docsという機能を使用することで特定のウェブサイトの記事を読み込んでくれます。試しに、当サイトを読み込んでもらいます。「@add new doc」と入力するとDocs機能を利用できます。
以下のような入力フィールドが表示されます。
ここに読み込ませたいウェブサイトのURLを入力します。せっかくなので、当サイトの内容を読み込んでもらいます。
以下のような画面が表示されます。
正しく読み込んでくれているか確認するために、NS Tipsがどのようなサイトか質問してみます。
当サイトのJavaScriptに関する記事は2023年11月から執筆しているので、現時点（2023年12月2日）での最新の情報を学習できているかと思われます。
ちなみに、Open AIが無料で提供している通常のChatGPT-3.5ではDocsのような機能は使えません。以下はOpen AIのChatGPT-3.5に特定のウェブサイトの内容を学習できるかを質問した結果です。
コードを直接編集する
CHAT機能だけでも大変便利ですが、CursorはAIを使用してファイル上のコードを直接編集することができます。編集したいコードを選択して内容を入力することで、AIがその内容を読み取ってコードを編集してくれます。コピペの手間が省けるので積極的に利用できるかと思います。
例として、README.mdの内容を日本語に翻訳してみます。まずは編集したい部分を選択します。
続いて、「Ctrl + K」を入力します。すると以下のような入力フィールドが表示されます。
こちらに編集したい内容を入力し、「Submit Edit」をクリック（もしくはEnterキーを押す）と結果が表示されます。
以下は結果の一部です。緑色にハイライトされた部分が結果で、赤色にハイライトされた部分が元のコードになります。
緑色にハイライトされた部分にカーソルを置いて「Ctrl + Shift + Y」を押すと編集内容が適用されます。また、意図する出力を得られない場合は「Ctrl + N」を押すことで適用を取りやめることができます。
Cursorの基本的な使い方についての解説は以上です。
最後に
この記事ではCursorの特徴やインストール方法、Cursorの基本的な使い方について解説しました。
CursorのAIによるアシスタント機能は、この記事で解説したCHATや@Symbol、Docsなどの他にも、プロジェクトの作成時に指示を渡すことで自動的にコードを生成してくれる機能があります。とても便利そうな機能ですが、非エンジニアでも簡単にアプリ開発ができてしまう可能性があるため、エンジニアにとっては生成AIの脅威を感じる機能かもしれません。
以下の記事では、CursorのAI機能を利用した開発体験を得るために簡単なTodoアプリを作り、Cursorがエンジニアの仕事を奪う可能性について結論を述べています。興味のある方は参考にしていただけると幸いです。
