cursorで自律型AIエージェントを使う
更新日：2025年4月29日｜公開日：2025年4月26日
今話題の自律型AIエージェントが使えるAIエディタのcursorをインストールして使ってみました。
インストール
日本語で情報もあり有償ライセンスの提供もあることから段々と市場に浸透してきているcursorは以下のページから無料でも利用が可能です。
Windows版をインストールしてvscodeから設定をインポートして早速使ってみました。ベースがvscodeなのでJapanese Language Pack for VS Codeで日本語を選択すれば基本メニューは日本語に変えられました。
新規プロジェクトで何か作ってみる
基本的にプロジェクトとか操作はvscodeと同じなので新規フォルダ（sampleという空白フォルダ）を作ってサイドパネルのAIチャットから以下のプロンプトでサンプル的なファイルを作ってもらいました。
#基本的なHTMLとCSSとJSのサンプルページを作成
・構成はトップページと下層ページは会社案内とお問い合わせの3ページ
・トップページの構成はカルーセルとお知らせ一覧とサービスメニューを仮画像を使って作成自律型AIエージェントモードなのでとりあえずのコードでファイルも作成しながら作業を進めてくれます。ディレクトリを作ったり、ファイルを消したりといった場合は確認を入れてくれるので少し安心です。
CSSやJSや画像など作成してコードも出来上がりました。
live serverでブラウザで確認します。
それらしいサンプルページを作ってくれたのであとはチャットで要素を追加とか色を変えてだとか指示をいれながらlive serverでブラウザで仕上がりを確認して進めていきました。
フレームワークのオーダーもお手の物
作成してくれたものはオーダー通りシンプルなHTMLとCSSとJSのサンプルページですが、以下のようなプロンプトを入れるとnext.jsのようなフレームワークを使った仕様に変更もしてもらえました。
#表示速度を早くしたい
・next.jsを使った形に変更してほしい
・next.jsで使用しない以前の不要なファイルは削除してほしいステップや初期設定について
変更とファイル削除を同時に依頼すると止まってしまったので、複数処理を依頼せずに一つ一つステップで依頼していく形が良いかと思います。
next.jsを使った形に変更してほしいnext.jsで使用しない以前の不要なファイルは削除してほしいもしくは初期設定でルールを追加することでファインチューニングしていくことが可能のようです。
#初期設定
・タスクを１つ１つステップを踏んで進める
・処理が遅くなる場合は確認を入れる
・不要かどうか判断が迷う場合は確認を入れる
以下略
#コーディングルール
・classの命名規則は****にする
・共通要素は****にまとめる
以下略
私はnext.jsを使ったことがなかったのでPCにNode.jsをインストールしていませんでした。でもAIエージェントがインストールのコマンドやサーバを立ち上げて表示させるフローが必要という事も教えてくれるのでnext.jsのフレームワークの勉強にもなりました。
次回はMCPサーバを使ってFigmaのデザインデータをべースにコーディングをしたり外部ツールの連携をしていきたいと思います。