Cursor 【はじめからそうやって教えてくれればいいのに!】

2024/11/25に公開

はじめに

動画版もアルヨ~。
https://www.youtube.com/watch?v=G3SshKvym3k

Cursorとは

Cursor とは一言で言うと、VSCode をベースに作られた AI 搭載のコードエディタのことです。

例えば、ChatGPT、Claude、Gemini などの生成AIを利用してプログラミングするときを思い出してみてください。

このように、エディタにコードを書きながら、ブラウザで開いている AI に質問をする、という作業を繰り返し行います。しかし、エディタとブラウザを行ったり来たりするのは少し面倒ですよね。

そこで登場するのが Cursor です。Cursor は ChatGPT や Claude、Gemini などの AI が内蔵されているエディタで、AIを使ってコードの編集、エラーの解決、ターミナルの操作、タブ補完などができます。

また、VSCode をフォークして作られているので、使い方、操作感も VSCode に非常に似ています。普段から VSCode を使っている人にとっては、ほとんど違和感なく使い始められます。

準備

Cursorは以下のページからダウンロードできます。

アプリを起動すると、初期設定が始まります。

各項目の設定内容は以下の通りです。「Codebase-wide」については、Enabled にしておいてください。それ以外の項目は好みで設定してください。

項目 設定内容
Keyboard キーバインド。普段使用しているエディタを選択すればOK
Language for AI どの言語でAIを使うか
Codebase-wide プロジェクト全体に対してAIに質問できるようにするか
Add Terminal Command ターミナルから Cursor を起動するためのコマンドを追加するか

次は、現在 VSCode で使っている拡張機能を Cursor に取り込む設定です。必要に応じて取り込んでください。

次の「Data Preferences」はデータの取り扱い方法についての設定で、質問された内容やコードを Cursor のサーバーに保存しても良いかを選択します。

最後にログインして Cursor の設定は完了です。Cursor アカウントがない人は、Sign Up からアカウントを作成してください。

また、各機能を試すためのプロジェクトを作成しておきます。今回は、「my-first-cursor」というディレクトリを作成し、Cursor で開いておきます。

Chat

AI と対話形式でやり取りができる機能で、あらゆる質問に対して回答してくれる、Cursor の基本となる機能です。

Command + L で Chat ウィンドウを表示して使います。今回は以下の内容を AI に送信してみます。

index.htmlを作成し、「Hello World」の見出しを追加して

すると、AI が HTML コードを作成してくれます。作成されたコードブロックの右上に「Apply」ボタンが表示されています。

このボタンを押すと、index.htmlと回答結果のコードが自動で作成されます。自動作成された結果をみて、問題なければ、「Accept」ボタンを押して、確定します。

実際にブラウザで表示してみると、欲しいHTMLができていることがわかります。このように、Chat 機能を使うことで、簡単に AI を使ってコードの追加・編集ができます。

Inline Chat

エディタ内の任意の場所からChat ウィンドウを呼び出すことができる機能です。

先ほど作成した index.html を開き、h1 タグのすぐ後ろにカーソルを置いて、Command + K を押してください。すると、コード上に Chat ウィンドウが表示されます。

試しに、以下のテキストを送信してみます。

「This is my first Cursor tutorial」という段落を追加して

すると、コードが生成され、差分が表示されます(追加された部分が緑色にハイライトされる)。先ほど同様、生成結果をみて問題なければ「Accept」を押して確定します。

ブラウザを更新すると、追加した段落が表示されていることが確認できます。
このように、Inline Chat 機能を使うと、エディタ内で直接 Chat ウィンドウを呼び出して、AI に修正を依頼できます。

Codebase Answers

プロジェクトのコード全体に対して、AI に質問できる機能です。

先ほど作成した HTML はかなりシンプルな見た目なので、試しに、この機能を使ってかっこいい見た目に変えてみます。

まずは、Cursor で、全てのファイルを閉じた状態で、Command + L で Chat ウィンドウを開きます。そして、以下のテキストを送信してください。

HTMLに対応するスタイルシートを作成して

スタイルシートが出力されましたが、よく見ると、index.html に対応したものではなく、一般的によくありそうなスタイルが書かれているだけです。

index.html に対応したものを出力してもらうには、Codebase Answers 機能を使います。Codebase Answers を使うには、Chat ウィンドウの右下にある、「codebase」ボタンを押すか、質問内容に @Codebase を付けます。

すると、AI が index.html を読み取ったうえで、スタイルシートを考案してくれます。

これまで同様「Apply」ボタンを押し、差分を確認して、問題なければ「Accept」ボタンを押して確定します。

また、作成したスタイルシートを読み込むために、index.html に linkタグを追加しましょう。

index.html
+ <link rel="stylesheet" href="styles.css" />

コードを保存したら、ブラウザで表示を確認します。

イイ感じのスタイルが適用されました!
このように、Codebase Answers を使うと、プロジェクトのコード全体に対して AI に質問できます。

@Symbols

Chat ウィンドウの中で他のものごとを参照することができる機能です。先ほどの Codebase Answersにおける @Codebase も @Symbols のうちの1つです。

例えば @Files は、プロジェクト内の特定のファイルを参照することができます。実際に、index.html を選択して、解説させてみましょう。

index.html を読み取って解説してくれました!

他にも、@Docs は、各種ドキュメントをもとに質問に回答してくれます。例えば、Amazon S3 を選択すると、Amazon S3 公式ドキュメントを参照して、質問に回答してくれます。

Cursor がデフォルトで用意しているドキュメントの他に、自分で参照するドキュメントを追加することもできます。「Add new doc」から、追加したいドキュメントのURLを入力して追加します。

このように、@Symbols を使うと、他のファイルやドキュメントなどを参照することができます。

おわりに

この記事の他にも、「100秒で理解する」というシリーズを書いています。よかったら見てください!

Discussion