Closed6

cursor素振り

Cursor
tkc310tkc310

今更ながら入門してみる

https://www.cursor.com/ja

Refs

何がすごいのか

Composer(AIエージェント)、RAG(プロジェクト内 or webから検索)が目玉だと思っている

  1. Composer: 自動で実装・修正してくれる
    e.g. ゲーム作って。サイドメニューとコンテンツの間に余白を追加して。
  2. RAG: プロジェクトソース、webドキュメントから最新情報を検索してコード生成してくれる
    規模が大きくなるほどインデックスが厳しくなる、精度が低くなる問題をある程度解決してくれそう

エンジニアの作業は 文脈を与える・レビューする の2つにシフトしつつあり、小規模ならコードを書かずにアプリを作れるイメージをしている
クラウドソーシングなど単発案件ではアドバンテージが得られるかもしれない
e.g. スクレイピング、マークアップ、ブラウザ拡張、プロトタイプ

一方で現時点では、規模・複雑度・リスクが大きいプロジェクトの場合は人のレビューに限界があるため、コード補完やリスクが低い作業に限定されると思っている
(つまりチーム開発する規模のプロジェクトではほぼ活用できないのでは..?)
ただ、レグレッションテストや静的型付言語を利用すればある程度のパワープレイも可能かもしれない

tkc310tkc310

基本的な操作

    1. Tab : お馴染みの補完
    1. cmd + k : Edit ワンライナーでプロンプトを入力
    1. cmd + l : Chat 対話的にプロンプトを入力

1. Tab : お馴染みの補完

2. cmd + k : Edit

範囲選択 > cmd + k > プロンプト入力

提案修正の差分が表示されるので cmd + enter or cmd + y でAccept、 cmd + n でReject

3. cmd + l : Chat

範囲選択 > cmd + l > プロンプト入力

対話的にプロンプトを入力して調整することができる
Editとの違いは下記だった

  • Editはプロンプトがカンマ区切りのワンライナーになる
  • Chatはプロンプト毎に結果の履歴が作られる
  • Chatはファイルを跨いで修正できる (e.g. 別ファイルに関数を切り出して)

こんな感じ

test.js(元のコード)
const main = () => {
    const FOO = [1, 2, 3];
    const BAR = [4, 5, 6];
    const BAZ = [7, 8, 9];

    const result = [...FOO, ...BAR, ...BAZ];
    console.log(result);
};
main();

出力処理を別ファイルに別関数として出力して

test.js
import { printResult } from './output.js';

const main = () => {
    const FOO = [1, 2, 3];
    const BAR = [4, 5, 6];
    const BAZ = [7, 8, 9];

    const result = [...FOO, ...BAR, ...BAZ];
    printResult(result);
};
main();
output.js
export const printResult = (result) => {
    console.log(result);
};
tkc310tkc310

RAG

参考にするソースを指定できる

  • コード (フォルダ、ファイル、インライン、リポジトリなど)
  • web
  • Docs

Docsはエイリアスをつけることができる
Docs > add new doc > URL入力 > エイリアス名を編集

次回から @shadcn/Form のように指定できる

tkc310tkc310

設定

基本的にはvscodeと互換性があるので拡張機能もそのまま利用できて、設定も .vscode にお馴染みのファイルをおけば適用される

  • settings.json
  • extensions.json
  • cspell.json

cursorインストール後にvscodeの拡張機能や設定を引き継ぐか質問されるので、その時に引き継げばok
perttierなどが上手く動かなかったが、拡張機能を再インストールしたら動いた (cursorあるあるらしい)

加えてcursor専用の設定ファイルが存在する

  • .cursorrules: 後述するコーディングルール用
  • .cursorignore: 機密情報などをindexさせないようにする設定

AIによるコーディングルール

コーディングルールを指定でき、下記3つのレイヤーが存在

  • Rules for AI: プロジェクトを跨ぐルール
  • .cursorrules: プロジェクト固有のルール
  • NotePads: より詳細にfrontend, backendなどの粒度のルール

NotePadsはRAGで @ 指定することができ、DDDのディレクトリ構造などを反映させたい時などに利用できる
自然言語版scaffoldができるイメージ

人間向けのドキュメントはDocsで参照して、よりcursor向けに冗長に書いたものがNotePadsなのかな?
(めちゃハイコンテキストで論文みたいに冗長なドキュメントを置いてても人間は読めない&読まない)
あと何回も間違えてくるAIの癖を補正する文章とか

tkc310tkc310

Composer (normal/agent)

設定の後になったがcomposerを見ていく

Chatとの違いは下記らしいが、精度が高くなるという意味だと思う

  • Chat: 質問回答
  • Composer: 実装作業、特にファイル・フォルダを跨いでコードを生成してくれる

また、Composerにはnormal/agentの2種類がありagentには下記の特徴がある (normalにはない)

  • コマンドを自動実行 (e.g. 依存パッケージのインストール)
  • エラー検知と修正案の提示

ユーザーはレビューと提案の承認を対話的に進めていけば良い
IQ300の新卒エンジニアとペアプロする感じぽいな

tkc310tkc310

Composer agentを利用して画像から自動マークアップ

https://zenn.dev/kikagaku/articles/abc0c85a21880d

入力窓にpinterestなどから適当なLP画像をドロップしてプロンプトを入力

この画像からwebサイトを実装してください
要件は以下です

- HTML: プレーンなHTML
- CSS: メタ言語としてSassを利用、UIフレームワークは利用しない
- Javascript: メタ言語としてTypescriptを利用
- 各種メタ言語はviteでコンパイルしてHMRで開発できるようにする

cons

  • cursorにパスが通っていないからかnode,npmが認識されず提案されたコマンドを手動実行した (source ~/.zshrcすれば直ったかも)
  • sassはファイルの依存関係(変数ファイルの読み込み順)でエラーが出た (自分が書いてないコードのためまあまあ解析に時間が掛かる)
  • 画像の切り出しは行なってくれないため、素材は自分で用意する必要がある
  • 斜めやチグハグなどのレイアウトは反映してくれない、反映が難しかった

pros

  • flocss、bemなどがよしなに採用されていた
  • 命名も悪くない
  • プロンプトで与えた技術スタックのベストプラクティスでコーディングしてくれている感じ

生成されたコードは下記から確認できる
(画像素材は適当)
https://github.com/tkc310/knocks_cursor

感想

1~2時間程度で環境構築含めプロジェクトの雛形ができたのは素晴らしかったが、やはり再現性はかなり低い。(ちなみにUIが得意とされるboltも試してみたが、どっこいどっこいだった)

ただし、画像認識が問題だと思うのでプロンプトからコードを作る能力は十分に高そうなのと業務アプリケーションなどシンプルなUIのマークアップなら精度はもう少し上がりそう。

現時点では下記のようなケースが主な使い所になると思う

  1. 環境構築や典型的な処理などを素早く対話的に作る
  2. エディタ内でシームレスに質問できる
    e.g. このコードはどういう役割なのか
  3. 単純作業をアドホックなスクリプトを作らずに自然言語で処理できる
    e.g. csvのカラム追加、一括変換など一定のルールで文字を加工したい時
  4. プロトタイプなどの低精度が許容されるプロジェクト

特に1についてはベストプラクティスの構成で対話的に調整できるという体験が良かったと思う
ただ現時点では、ある程度使いこなすことで圧倒的なアドバンテージを得られるのかは個人的には疑問を感じる

このスクラップは2025/03/08にクローズされました