AIファーストコードエディターCursor(カーソル)を使ってみよう。

2024.04.22
BLOG
#WEB

KOGE / Engineer

Cursor(カーソル)というAI 機能を標準利用できるエディタを紹介します。

Cursor(カーソル)とは?

Cursor(カーソル)はAIを標準利用できるコードエディタです。
ChatGPTのUIがエディタ内にくっついているようなイメージで、ブラウザ版ChatGPTでも行えるコードの自動生成、エラーの修正、質疑応答などの機能をエディタ内で完結させることができプロジェクト全体を俯瞰した上で回答してくれます(これがすごく便利だと思います)。
エディタ内でAIに支援してもらいながら開発ができるので、作業効率を大きく向上させることが期待できます。
UIもVSCodeをベースに作られているので、VScodeユーザーは移行も簡単で、操作感もほぼ同じです。

…インターネット通信環境必須

無料プランが用意されているので、まずは試してみます。

Cursorのインストールと日本語化をしてみる。

Cursorの公式サイト(cursor.sh)にアクセスし、インストーラーをダウンロード。

ダウンロード後、インストーラーを起動してインストールを進めます。
以下の設定としました。

VSCodeの拡張機能を「Use Extensions」で引き継ぎ可能です。

ログインにはGoogleアカウントを使用しました。
Privacy Mode」を利用することで、書いたコードをサーバーに保管しないようにすることができるようなので、安心です(慎重になる必要はあるかとは思いますので、ご自身の判断でよくご検討ください)。
読み込み等を拒否してほしいファイルがある場合は「.cursorignore」ファイルを作成して設定できるようです。

インストールが完了後、Cursorが起動し、「getting_started.md」ファイルが表示されました。

Cursorの日本語化設定

初期設定では表示言語が英語なので、日本語化を行います。
下記の設定を行いました。

  1. メニューバーの「View」→「Command Palette」を選択
  2. 入力欄に「Configure」と入力→候補の「Configure Display Language」を選択
  3. 日本語(ja)」を選択
  4. Restart」を選択

無料プランの「Cursor」を使ってみる。

【はじめに】ChatGPTバージョンの切り替え

月/200回制限の「gpt-3.5」に切り替えました。

機能の紹介「Chat」

ブラウザ版ChatGPTを利用するのと同じイメージで、AIとチャットで対話できます。
開いているファイルを自動で参照して回答してくれますし、ブラウザとエディタ間のコピペ作業などの行き来する手間が省けますのでとても便利に感じます。

例)getting_started.mdはどんな内容のファイルですか」と入力してみる

getting_started.mdは、Cursorの使い方に関する基本的な情報が記載されているファイルです。コードのハイライト方法やオートコンプリートの使用方法、質問の仕方などが記載されています。

機能の紹介「Command K」

AIにコードを編集・作成してもらえます。
編集したいコードを選択(50行ぐらいまでが最適)して「⌘(Ctrl)+K」内容を入力すると、AIがコードを提案してくれます。結果は赤色(変更前)緑色(変更・作成後)として表示され、全てまたは個別適用、意図しない結果の場合はキャンセル・編集もできるので、柔軟に対応できて便利です。

例)「getting_started.md」のテキストを選択し「日本語に翻訳」と入力してみる

# はじめに

Cursorへようこそ!以下は基本です:

* 編集を促す
– コードをハイライトしてCmd+Kを押してください
* オートコンプリートを受け入れる
– タイプして、提案が表示されたらTabを押してください
* 質問する
– チャットを開くにはCmd+Lを使用してください
– ファイルやドキュメントをインポートするには@を使用してください
– コードをハイライトしてCmd+Shift+Lを押して、AIを特定のコードに焦点を合わせてください
– リポジトリ全体について尋ねるには「with codebase」ボタンを試してください

何か問題が発生した場合やフィードバックがある場合は、forum.cursor.shに投稿してください。機能の詳細については、cursor.sh/featuresをご覧ください。

機能の紹介「@symbol」

プロジェクト内の@指定したファイルを参照できます。
アクティブでないファイルに対して質問をすると意図しない回答が返ってくるのですが、「@(ファイル名)」と記述し読み込ませることで、ファイルを開かずとも質問ができます。
「@symbol」機能はファイル指定以外にもコード単位で指定するなど様々な機能があります。

例)チュートリアルプロジェクト内「index.html」を開いた状態で「@index.js」と指定し「どんな処理のJSが書かれていますか」と質問してみる
// index.jsファイルには、Reactアプリケーションのエントリーポイントが書かれています。
// Appコンポーネントが定義されており、”Hello World”というテキストを表示するシンプルな構造になっています。
// ReactDOMを使用して、Appコンポーネントをルート要素にレンダリングしています。

機能の紹介「Codebase」

プロジェクトの全体のコードを読み込みしてくれます
前述の「@Symbol」と同じ要領で、「@Codebase」と入力すると利用できます。
プロジェクト全体を加味した上で質問に回答してくれるので、これは本当に便利です。

機能の紹介「copilot++」

Github Copilotに似た機能で、カーソルを併せたコードを予測して補完してくれます。
こちらもとても便利な機能です。

おわりに

その他にも、サードパーティーライブラリのドキュメントをAIに読み込ませる「Doc」機能ターミナルエラーを修正できる「Auto-Debug」機能Lintエラーを修正できる「Fit Lints」機能、などたくさんの機能があるようです(詳しくは公式サイトを参照ください)。
アップデートも活発なようで、今後にも期待したいです。
AI機能を標準利用できるCursorエディタと上手につきあって、開発スピードも上げていきたいです。

arrow

Contact

お問い合わせ

ご質問やお仕事依頼など、
お気軽にお問い合わせください。

View More