株式会社スマレジ

AIエディターCursorを使い始める手順と基本的な使い方を、丁寧にまとめただけの記事。

Posted at 2024-01-22

はじめに

この記事は、AI エディタ Cursor （カーソル）について、使い始めるまでの手順と基本的な機能を試した内容を、丁寧にまとめただけの記事です。

Cursor 使ってみたい、導入の手順やできることを確認したい、という場合には、ぜひ読んでみていただけると幸いです。

使ってみたきっかけ

私が Cursor を使ってみようと思ったきっかけは、こちらのエンジニア系 YouTuber 山浦清透さんの YouTube 動画です。

動画の中で「革命的なツール」だという感想があり、山浦さんのワクワクが伝わってきて、これは使い始めておこうと思いました。

気になるポイント

コードベース全体について AI に質問できる機能（Codebase Answers） があり、特に気になっています。

普段は ChatGPT に課金して gpt-4 を利用しており、コーディングのために毎日のように利用しているのですが、コード全体を質問のたびに貼り付ける訳にもいかないため、Cursor であればその点かなり効率化されると期待しています。

環境

macOS Monterey 12.7.1 (MacBook Pro 2016)
Cursor 0.20.2

Cursor とは

AI を活用したコードエディタです。

エディタでは以下のようなことができます。

コードについて AI とチャットできる
自動でエラー修正してくれる
コード全体についての質問ができる
ライブラリのドキュメントを追加して、より良い回答を得られる

1. Cursor を使い始めるまでの手順

まずは Cursor を使い始めるまでの手順をまとめます。

1-1. ダウンロード

ブラウザからダウンロードします。

「Download for Mac」を押すと、インストーラをダウンロードできます。

1-2. 初期設定

ダウンロードしたインストーラを起動します。

以下のような初期設定の画面が開きますので選択します。

1-3. VSCode の拡張機能を使用

VSCode の拡張機能を使用するかの確認があります。

（しばらく待ちます。）

結構待ちましたが、VSCode で使用していた拡張機能をそのまま持ってくることができました。

1-4. サインイン

ブラウザでサインインします。

私の環境では VSCode の拡張機能のセッティングに時間が 20 分以上かかったのでその間にサインインしました。

1-5. ログイン

サインインが完了していれば、「Log in」を選択します。

以下の通り、初めて起動した画面はサンプルプロジェクトが開きます。

見た目は VSCode とほぼ変わらないですね。どちらのエディタを開いているか見間違えるレベルです。

1-参考. Cursor での指定ファイルの開き方

セッティングの時に cursor コマンドをインストールしていれば、ターミナルから、 Cursor エディタで任意のプロジェクトファイルを開けるようになっています。

$ cursor .

過去に作成したブラックジャックゲームをサンプルファイルとして開いてみます。

# r_yamate @ mbp in ~/development [11:08:08]
$ git clone https://github.com/ryamate/php-oop-cli-blackjack.git
Cloning into 'php-oop-cli-blackjack'...
remote: Enumerating objects: 446, done.
remote: Counting objects: 100% (54/54), done.
remote: Compressing objects: 100% (46/46), done.
remote: Total 446 (delta 8), reused 19 (delta 8), pack-reused 392
Receiving objects: 100% (446/446), 3.85 MiB | 9.80 MiB/s, done.
Resolving deltas: 100% (246/246), done.

# r_yamate @ mbp in ~/development [11:08:20]
$ cd php-oop-cli-blackjack

# r_yamate @ mbp in ~/development/php-oop-cli-blackjack on git:main o [11:36:13]
$ cursor .

ファイルを開くことができました！

1-参考. 価格

以下の通り、無料で利用開始ができます。

無料だと、少なめの回数制限があるので、メインのエディタとして使うようになったら Pro に変更する必要がありそうです。

1-参考. OpenAI キーでの利用開始手順

無料枠以上に使いたいけどサブスク（Pro での有料利用）はちょっとまだ判断しかねる…という場合は、OpenAI キー利用で様子見する方法があります。

2. Basic 基本的な使い方

続いて、基本的な使い方を以下のページを参考に利用してみます。

2-1. Command K

`Cmd+K` で編集したい行に AI を適用！

テキトーに編集を指示してみます。

範囲選択すると、Edit ⌘K Chat ⌘L と表示されます。

Cmd+K を押すと、フォームが出てくるので、編集指示をしてみます。

Cmd+Y を押したら変更が反映されます。（Cmd+N を押したら変更されません。）

/** array<int,string> 各カードのマーク */
private const SUITS = [
    '♠',
    '♥',
    '♦',
    '♣',
];

2-2. Chat

`Cmd+L` で AI チャット！

今度はファイル内のコードを全選択して、Cmd+L を押してみます。

PHPDocを編集してください。

と依頼したところ、詳細なPHPDocの編集内容を提案してくれました。

回答のコードブロックで ▷ を押すと、

ファイルに反映することができます。

3. Advanced 応用的な使い方

3-1. @ Symbols

`@` でファイルなどを指定！

AI チャット（Cmd+L）での質問時に入力ボックスで @ を入力すると、ファイルなどを指定でき、効率的に AI に伝えることができます。

3-2. Codebase Answers

コード全体に対して AI に質問！

Codebase Answers を使用すると、コード全体に対して AI に質問できます！

こちら気になっていた機能です。

使用するには、AI チャット（Cmd+L）での質問時に入力ボックスのwith codebase ボタンをクリック（もしくは Cmd+Enter 入力）します。

コード全体を見ないと回答できないような質問をしてみます。

💬 質問

コード全体のクラス設計について見直すべき点を提案してください。

🤖 回答

全体的に、クラス設計は適切に行われていますが、いくつか改善できる点があります。

単一責任の原則: 一部のクラスが複数の責任を持っているように見えます。例えば、Gameクラスはゲームの進行、プレイヤーのアクション、勝敗の判定など、多くの責任を持っています。これらの責任をより具体的なクラスに分割することを検討してみてください

依存性の注入: Gameクラスは、DeckやDealerなどの他のクラスのインスタンスを直接作成しています。これはテストを難しくし、クラス間の疎結合を阻害します。これらの依存関係をコンストラクタまたはセッターを通じて注入することを検討してみてください

テストの改善: GameTest.phpにはテストが書かれていません。各クラスのメソッドが期待通りに動作することを確認するために、ユニットテストを追加することを強くお勧めします

インターフェースの使用: PlayerBetやPlayerActionなどのインターフェースが定義されていますが、これらはPlayerクラスに直接統合することを検討してみてください。これにより、Playerクラスのサブクラスがこれらのメソッドを実装することを強制できます

以上の改善点を踏まえて、以下のようなクラス設計を提案します。

Gameクラス: ゲームの進行を管理します。依存性を注入するためのコンストラクタを追加します

Playerクラス: プレイヤーのアクションとベットを管理します。PlayerBetとPlayerActionインターフェースを統合します

Dealerクラス: ディーラーのアクションを管理します

Judgeクラス: 勝敗の判定を管理します

具体的なコードの変更は以下の通りです。
class Game
{
    private $deck;
    private $dealer;
    private $players;

    public function __construct(Deck $deck, Dealer $dealer, array $players)
    {
        $this->deck = $deck;
        $this->dealer = $dealer;
        $this->players = $players;
    }

    // その他のメソッド...
}

abstract class Player implements PlayerAction, PlayerBet
{
    // その他のメソッド...
}
これらの変更により、クラス設計はより堅牢でテスト可能になり、各クラスの責任が明確になります。

テストとしての質問なのでまだまだ試してみないとなんとも言えませんが、全体としての改善点などを見つけてくれそうで、期待できそうです。

3-3. Docs

ドキュメントに基づいた回答！

Docs 機能は、AI のサードパーティライブラリの理解を向上させ、チャットや Cmd+K で、@LibraryNameや@Addを入力することで、ドキュメントの使用やカスタムドキュメントのクロール（Web サイトやドキュメントから自動的に情報収集）することが可能です。

Cmd+K で、@ を入力し、Docsをクリックして、

「+Add new doc」をクリックします。

試しに、Qiita API のドキュメントを追加してみます。

URLを貼り付けます。

Confirm を押します。

追加されると、@ → Docs で選択できるようになっています。

これで選択したドキュメントを踏まえて回答をしてもらえるようになりました。

例えば今回参考に追加した Qiita API であれば、API を呼ぶコードを実装する際にはドキュメントに基づいたコードを提案してくれるようになります。

3-4. Auto-Debug

自動でエラー修正！

わざとバグを起こすために 8 行目の ; を削除して、

<?php

namespace Blackjack;

require_once('lib/Game.php');

$game = new Game();
$game->play()

ファイルを実行してみます。

$ php src/Main.php

「Debug with AI」の緑のボタンをクリックすると、自動でデバッグして、エラーを特定してくれます。

3-5. Fix Lints

Lint エラーを修正！

任意の Lint エラーにカーソルを合わせて、表示される青い「Fix」ボタンをクリックすると、修正案がチャットに表示されます。

（まだ試せてません。が、機能としては想像できるので割愛します。）

おわりに

AI エディタ Cursor （カーソル）について、使い始めるまでの手順と、基本的な機能を試してみた内容をまとめました。

使ってみた感想としては、期待の Codebase Answers（コード全体に対して AI に質問！）と、Docs（ドキュメントに基づいた回答！）がかなり使えそう！という感想です。

仕事では使わないようにしているため、慣れる機会がまだ少ないですが、個人開発では積極的に使っていきたいと思っています。

ありがとうございました。　

123

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up