Cursorを使ってみる

AI技術を活用した機能が特長のコードエディタ「Cursor」を簡単に使ってみます。

Cursorについて

Cursorは前述の通り、AI技術を活用した機能が特長のコードエディタです。
プロジェクト全体のファイルや指定したドキュメントを元にした質問やコードの提案をすることができます。

Microsoftが開発するコードエディタの「VSCode(Visual Studio Code)」をフォークして開発されていて、VSCodeを使用している場合は設定や拡張機能などを引き継ぐこともできます。

設定

公式サイトにアクセスして、Downloadをクリックします。

ダウンロードしたファイルを実行して、インストールを行います。
起動後は以下のような設定画面が表示されます。

今回は「Language for AI」の項目(AIとやり取りを行う言語)を「日本語」としました。

次は「VS Code Extensions」で、VSCodeの拡張機能や設定、キーバインドをインポートするかになります。
インポートして使用する場合、「Use Extensions」を選択します。

次は「Data Preferences」で、Cursorの改善のために使用データの収集を許容するかどうかです。
許可する場合は「Help Improve Cursor」を、許可しない場合は「Privacy Mode」を選択します。

これで設定ができました。
最後にCursorアカウントでのログイン(アカウントがない場合は作成)を行います。

使い方

Cursorの機能について簡単に試してみます。

まずはチャット機能です。
以下のような状態でCtrl + Lキーを押します。

エディタの右側にチャットエリアが表示されるので、質問などを入力します。
例として、「アクセシビリティを考慮したタブの実装」と入力して実行してみます。

すると、その質問に対する回答が提示されます。(見切れていますが、この下にCSSやJavaScriptも提示されています。)
そこからさらに追加のやり取りをすることもできます。

これでタブの実装をすることができました。
タブ実装のデモページ

次はCtrl + Kキーでのコード生成機能です。
空のJavaScriptファイルを開いた状態でCtrl + Kキーを押すと、以下のように表示されます。

生成したいコードの説明を入力します。
今回は例として、「複数の数値から中央値を返す」と入力して実行してみます。
すると以下のようにコードが生成されるので、このコードで問題なければAcceptをクリックします。

これで処理の実装ができました。
中央値を返す関数のデモページ