![見出し画像](https://assets.st-note.com/production/uploads/images/119727189/rectangle_large_type_2_4c4eb2d71f1673e9b5c1d06fcd0b8dd8.png?width=1200)
AIを活用したコードエディタ Cursor の使い方
AIを活用したコードエディタ「Cursor」の使い方をまとめました。
1. Cursor
「Cursor」は、迅速なソフトウェアの構築に役立つ、AIを活用したコードエディターです。
2. 使用料金
使用料金は次のとおりです。無料で試用することもできます。
![](https://assets.st-note.com/img/1698104127524-ChTx8HOKyN.png?width=1200)
3. インストール
「Download」ボタンでインストーラをダウンロードおよび実行して、指示に従ってインストールします。
![](https://assets.st-note.com/img/1698104579632-UV4dlqkeCQ.png?width=1200)
4. Command K
「Command K」(WindowsはControl K) で、AIを使用してコードの作成および編集ができます。
4-1. コードの作成
(1) 「Command K」でAIを呼び出し、生成したいコードの説明を入力し、「Generate」ボタンを押す。
今回は、「helloworld.py」という空のファイルを用意して、「"Hello World!"と標準出力」と指示しました。
![](https://assets.st-note.com/img/1698104853659-DLvHf8B2Ed.png?width=1200)
(2) 生成されたコードを確認し、採用時は「Accept」ボタンを押す。
![](https://assets.st-note.com/img/1698104943800-0HQsgeaYGG.png?width=1200)
4-2. コードの編集
(2) 編集コードを選択し、「Command K」でAIを呼び出し、編集したいコードの説明を入力し、「Generate」ボタンを押す。
今回は、「print("Hello World!")」を選択し、「出力文を"Hello Cursor"に変更」と指示しました。
![](https://assets.st-note.com/img/1698105217465-yvUdwMYShI.png?width=1200)
(2) 編集されたコードを確認し、採用時は「Accept」ボタンを押す。
![](https://assets.st-note.com/img/1698105210154-BrCTSwADdg.png?width=1200)
5. Chat
「Chat」を使用すると、コードベースを認識するAI と会話できます。「Chat」では現在のファイルとカーソルを常に確認できるため、「ここにバグはありますか?」などの質問をすることができます。
(1) 右上のボタンで「Chat」を開く。
「Command L」(WindowsはControl L)でも開けます。
![](https://assets.st-note.com/img/1698105604639-kFqGEfPXDy.png?width=1200)
(2) 会話。
今回は、「このコードを説明してください。」と指示しました。
![](https://assets.st-note.com/img/1698105791274-5cIb0K9rJ0.png?width=1200)
「Command+Shift+L」または「@」で、特定のコードブロック、「Command+Enter」でコードベース全体ををコンテキストに追加できます。
6. @ Symbols
「@ Syumbol」を使用すると、AIに確認してもらいたいファイルやコードを簡単に提示できます。「Command+K」または「Chat」で「@」を入力することで、ファイルやコードのドロップダウンを取得できます。
(1) 「Chat」で「@」→「Files」→「helloworld.py」を選択。
今回は、ファイル「helloworld.py」を提示しました。
![](https://assets.st-note.com/img/1698106466588-PduHBcyXqI.png?width=1200)
![](https://assets.st-note.com/img/1698106541411-MpFGn7fhLa.png?width=1200)
(2) 会話。
今回は、「このコードを説明してください。」と指示しました。
![](https://assets.st-note.com/img/1698106583772-CNGowT3Cke.png?width=1200)
特定の依存関係を持つコードを生成したり ("@ErrorPopup と同じスタイルを使用してください") 、特定のファイルについて問い合わせたり ("@inlineDiffService.ts は何をしてますか") できます。
7. Codebase Answers
「Codebase Answers」で、コードベース全体についてAIに質問できます。
「Chat」で 「Command+Enter」を入力するか、入力ボックスの「with codebase」ボタンをクリックします。
(1) 「Chat」で「Command+Enter」を入力。
![](https://assets.st-note.com/img/1698107180482-LIKlorltO4.png?width=1200)
(2) 会話。
今回は、「このコードベースを説明してください。」と指示しました。
![](https://assets.st-note.com/img/1698107193552-QWX1afew2b.png?width=1200)
「元に戻すやり直しロジックはどこにありますか?」、「クライアント側で認証トークンをどのように処理すればよいですか?」などの質問が可能になります。
8. Doc
「Doc」で、AIによるサードパーティライブラリの理解が向上します。ドキュメントを使用するには、「Chat」または「Command K」に 「@LibraryName」と入力します。
(1) 「Chat」で「@LibraryName」を入力後、「https://nextjs.org/docs/pages/api-reference」を入力。
今回は、「Next.js」のドキュメントを指示しました。
![](https://assets.st-note.com/img/1698122269577-EsFSgWByQs.png?width=1200)
![](https://assets.st-note.com/img/1698122290684-OgSUguh9By.png?width=1200)
(2) エントリポイントとプレフィックスを確認して、「Confirm」ボタンを押す。
![](https://assets.st-note.com/img/1698122387876-9Gwc4Gr7nD.png?width=1200)
9. Auto-Debug
「Auto-Debug」は、Cursorのターミナルのエラーを修正するエージェントです。 ターミナルエラー後に表示される青い「Auto-Debug」ボタンをクリックすることで開始できます。
(1) ターミナル実行でのエラー時に「Auto-Debug」ボタンを押す。
![](https://assets.st-note.com/img/1698122915778-kfc1JacZD7.png?width=1200)
ターミナルは右上のボタンで開くことができます。
10. Fix Lints
「Fix Lints」で、Lint エラーをすばやく修正できます。lint エラーの上にマウスを移動し、表示される青い「Fix」ボタンをクリックするだけです。
![](https://assets.st-note.com/img/1698123975012-jcTyHRVfS2.png?width=1200)