転職したらスマレジだった件

スマレジのエンジニアやまてのテックブログです。マジレス大歓迎です。

トップ > 開発ツール > AI エディター Cursor の基本的な使い方

AI エディター Cursor の基本的な使い方

開発ツール

スマレジのテックファーム（SES 部門）で Web 系エンジニアとして働いている やまて（@r_yamate） と申します。

2023 年 4 月からは、スマレジの関連アプリの開発業務を担当しています。

実務でのコーディングは初めてで、日々奮闘中です。Flutter（Dart、Kotlin）をメインで担当していて、React の一部機能を担当しています。

開発しているアプリはリリース間近で、利用していただく日を楽しみにしています。

はじめに

今回は、AI エディタ Cursor （カーソル）について、基本的な機能を試してみた内容をまとめます。

前回は、使い始めるまでの手順をまとめました。

ryamate.hatenablog.com

気になるポイント👉

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

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

目次

環境

Basic 基本的な使い方

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

cursor.sh

📝 Command K

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

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

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

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

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

<?php

// ~~省略~~

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

💬 Chat

Cmd+L で AI チャット！

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

PHPDocを編集してください。

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

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

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

Advanced 応用的な使い方

✨ @ Symbols

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

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

💻 Codebase Answers

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

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

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

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

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

💬 質問

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

🤖 回答

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

  1. 単一責任の原則: 一部のクラスが複数の責任を持っているように見えます。例えば、Gameクラスはゲームの進行、プレイヤーのアクション、勝敗の判定など、多くの責任を持っています。これらの責任をより具体的なクラスに分割することを検討してみてください。
  2. 依存性の注入: Gameクラスは、DeckやDealerなどの他のクラスのインスタンスを直接作成しています。これはテストを難しくし、クラス間の疎結合を阻害します。これらの依存関係をコンストラクタまたはセッターを通じて注入することを検討してみてください。
  3. テストの改善: GameTest.phpにはテストが書かれていません。各クラスのメソッドが期待通りに動作することを確認するために、ユニットテストを追加することを強くお勧めします。
  4. インターフェースの使用: PlayerBetやPlayerActionなどのインターフェースが定義されていますが、これらはPlayerクラスに直接統合することを検討してみてください。これにより、Playerクラスのサブクラスがこれらのメソッドを実装することを強制できます。

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

  • Gameクラス: ゲームの進行を管理します。依存性を注入するためのコンストラクタを追加します。
  • Playerクラス: プレイヤーのアクションとベットを管理します。PlayerBetとPlayerActionインターフェースを統合します。
  • Dealerクラス: ディーラーのアクションを管理します。
  • Judgeクラス: 勝敗の判定を管理します。

具体的なコードの変更は以下の通りです。

<?php

// ~~省略~~

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
{
    // その他のメソッド...
}

これらの変更により、クラス設計はより堅牢でテスト可能になり、各クラスの責任が明確になります。

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

📄 Docs

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

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

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

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

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

qiita.com

URLを貼り付けます。

「Confirm」を押します。

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

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

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

🪲 Auto-Debug

自動でエラー修正！

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

<?php

namespace Blackjack;

require_once('lib/Game.php');

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

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

$ php src/Main.php

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

英語になってしまいましたが、; を追加するように教えてくれました。

🛠 Fix Lints

Lint エラーを修正！

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

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

おわりに

今回は、AI エディタ Cursor について、基本的な機能を試してみた内容をまとめました。

感想

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

VSCode＋AI、という感じなので、損はないためすぐ乗り換えたい気持ちですが、仕事では使わないようにしています。そのため、慣れる機会がまだ少ないですが、個人開発では積極的に使っていきたいと思っています。

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



宣伝。

smaregi.jp