BLOG

準備

前提として 既に VS Code で Saelsforce 開発ができる環境の Windows PC に Cursor をインストールしています。
VS Code で Salesforce 開発環境の構築についてはこちらの公式ドキュメントを参照してみてください。

試した結果としては問題なくインストールできました。
やってみたこととしては、次の通りです。

☝️この通り、VS Code に Salesforce開発環境を作成する場合とほとんど変わりませんでした。
ちなみにVS Codeでは縦に並んで表示されるメニューアイコンは、Cursorでは画面上部に横に並んで表示されています。(赤枠部分)

この後は通常の VS Codeで行う開発手順と同じで、

を行います。操作も変わらないのでここでは省略します。
ここまで完了後の画面が次の通りです。

VS Codeがベースなので、見た目はほとんど同じです。

CursorのAI機能

それではCursorのAI機能を試してみます。

コード生成 (Ctrl+K)

まず、空のApexクラス SampleClass.cls を作成してそこにコードを作って貰います。

ショートカットキー”Ctrl+K”を押すと入力ダイアログが表示されます。

ためしに、「取引先のID、取引先名、電話、種別を取得する」と入力してEnterを押します。

すると、自動でコードが作成されます！

これは現在のコードとの差分が表示されています。緑が追加行で削除行は赤で表示されます。
これでよければ “Ctrl+Shift+Y” で確定します。(キャンセルは “Ctrl+N”)
するとコードが反映されます。

このように、SOQLということを言わずともSOQLでレコードを取得するメソッドを作成することができました。

また、メソッド内の処理なども追加したい位置で”Ctrl+K”でコードを挿入することができます。
たとえばカンマ区切りの文字列をList<String>に格納したい場合、
次のように「baseをカンマ区切りで分割してリストに格納」と入力してみると

splitする処理が生成されました。
ちなみにインデントはうまく反映できないみたいで、自分で合わせる必要がありました。

Copilot++ によるコードの補完機能

先ほどの Ctrl+K の機能の説明をするために省略していましたが、実は Ctrl+K で指示を入れずとも既に予測でコードの候補が表示されます。これは Copilot++ 機能で最近のバージョンで実装されました。

例えば、次のような getAccountDetails() メソッドを、

そのまま return で返さず、一旦 List 型に格納するようコードを書き換えようとすると、
次のような予測が表示されます。

List<Account> accountList を宣言 → 結果を格納 → accountList を戻り値としています。
ここで “ Tab ”を押すと、

この通り予測されたコードに書き換わりました！
次に、引数に Name のフィルタ条件を入れたいと思って、 getAccountDetails に引数 name を追加してみるとまた予測が出ています。

“Tab”を押してみると、SOQLにWHERE句が追加されます！

このように、次にやりたいことを AI が予測して候補を表示する機能が Copilot++ です。
ちなみに逆にこの予測が邪魔になる場合もあるので、その場合は右下のメニューから無効にすることもできます。

チャットからコード生成 (Ctrl+L)

ショートカットキー“ Ctrl+L ”を押すと、チャット画面が開いて、 Chat GPT のように質問をすることができます。

ここに質問して得られたコードを反映することができます。
試しに「取引先のレコードを取得し、名前のアルファベット毎に Map に格納したい」と質問してみました。すると次のようなサンプルコード付きの回答が得られました。

ここで、サンプルコード右上の” Apply ”をクリックすると、コードが反映されます。

そして” Ctrl+Sfift+Y ”を押すと確定されます。

ChatGPT などでコードを作成して実際のエディタにコピーするような作業を、 Cursor だけで行うことができます。

AI機能を駆使してLWCコンポーネントを作ってみる

Cursor のAI機能を使って LWC コンポーネントが作れるのか実験してみました。
取引先レコードを一覧表示するサンプルを作成してみます。

まず、空のコンポーネント” accountViewer ”を作りました。

まず、 Ctrl+L のチャットで「取引先を一覧表示する LWC コンポーネントを作成」と指示してみます。

作成されたサンプルを全部反映させてみます。
Step1 の Apex コントローラーはまだ作成していませんので、まず AccountController.cls を作成しました。

AccountController.cls を表示した状態で、”▶”アイコンをクリックしてみます。
すると「このファイルでいいですか？」のようなダイアログが出たので” Continue ”をクリックします。

するとコードが反映されます。

“ accountViewer.js ”と” accountViewer.html ”はファイルは作成済みなので、
” Apply ”を押すだけで対象のファイルにそれぞれ反映されます。

LWC コンポーネントを使用可能にするには、「 accountViewer.js-meta.xml 」を書き換えないといけません。「コンポーネントが Lightning アプリケーションで使用できない」と文句を言うと、下記のように書き換えるよう言われたので反映させました。

しかし、このままでもまだ使用できません。
さらに質問します。「まだ表示されません。アプリケーションページで使用したい」と聞きました。

アプリケーションページ以外でも使用できるサンプルが生成されましたが、とりあえずこのコードを反映して、デプロイしました。

このLWCコンポーネントを画面で表示すると、このようになります。

見た目は残念ですが、ちゃんと取引先の一覧が表示されました。

次の質問で修正してみます。

と聞いてみます。

このようなコードを提案されたので反映させてデプロイしてみます。

すると、見た目はいい感じに表示されました！
ここまでコードを一切書かずに作成できるのはすごいですね！
しかし、 Apex コントローラーの SOQL が修正されていないので電話番号は取得できていませんし、レコードも SOQL で” LIMIT 10 ”と指定されたままなのでレコードは10件までしか表示できていないなど、まだ修正が必要です。

まとめ

Cursor でも Salesforce でもここまで書かずにできるのはすごいと思いました。
ただ LWC コンポーネント作成例の通り、自分がやりたいものが100％出てくるというわけではないため、結果が正しいか間違っているかを判断できる知識や修正点を特定できる知識は必要です。
Cursor のページには「 Build software faster in an editor designed for pair-programming with AI （ AI とのペアプログラミングのために設計されたエディタで、ソフトウェアをより速く構築する）」と書かれており、 AI に丸投げするものではなく AI と協力することで開発の生産性を向上させることを目的としています。そのようにAIを相棒としてうまく付き合うことができれば Cursor は非常に便利なエディタだと思います。