Cursor 【はじめからそうやって教えてくれればいいのに！】
はじめに
この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！
Cursorとは
Cursor とは一言で言うと、VS Code をベースに作られた AI 搭載のコードエディタのことです。
例えば、ChatGPT、Claude、Gemini などの生成AIを利用してプログラミングするときを思い出してみてください。
このように、エディタにコードを書きながら、ブラウザで開いている AI に質問をする、という作業を繰り返し行います。しかしエディタとブラウザを行ったり来たりするのは少し面倒ですよね。
そこで、登場するのが Cursor です。Cursor は ChatGPT や Claude、Gemini などの AI が内蔵されているエディタで、AIを使ってコードの編集、エラーの解決、ターミナルの操作、タブ補完などができます。
また、VS Code をフォークして作られているので、使い方、操作感も VS Code に非常に似ています。普段から VS Code を使っている人にとっては、ほとんど違和感なく使い始められます。
準備
Cursorは以下のページからダウンロードできます。
アプリを起動すると、初期設定が始まります。
各項目の設定内容は以下の通りです。「Codebase-wide」については、Enabled にしておいてください。それ以外の項目は好みで設定してください。
| 項目 | 設定内容 |
|---|---|
| Keyboard | キーバインド。普段使用しているエディタを選択すればOK |
| Language for AI | どの言語でAIを使うか |
| Codebase-wide | プロジェクト全体に対してAIに質問できるようにするか |
| Add Terminal Command | ターミナルから Cursor を起動するためのコマンドを追加するか |
次は、現在 VS Code で使っている拡張機能を 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タグを追加しましょう。
+<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