はじめに
皆さんはCursorエディタは活用されていますでしょうか？CursorエディタとはVSCodeをフォークして作られたAIでコード実装を補助してくれる機能がついたコードエディタのことです。
最近（といっても昨年12月半ば）、CursorエディタのComposerという機能にYoloモードなるモードが追加されたそうなので、早速そちらを試してみることにしました。
Composer機能やYoloモードとは何かに関しては、ChatGPT先生に聞くと以下のような回答が得られました↓
↓Composer機能とは？
↓Yoloモードとは？
要するにYoloモードONでCursorエディタを使用すると、様々なコードの実装・修正以外の手動作業もAIが変わってくれるということです。
試してみたところ、予想以上で今後の可能性を大いに感じたため、一連の動作の様子をこの記事でご紹介したいと思います。
試してみる
Composer機能を有効にする
試すにはまずComposer機能を有効にする必要があります。
↓Composer機能の有効化の方法
Yoloモードを有効にする
次にYoloモードを有効にする必要があります。こちらはなぜかChatGPT先生にWeb検索ありで答えてもらっても回答がいまいちでした。以下の方法で有効化します。
↓まずはエディタ左上のメニューバーからFile＞Cursor Settingsと選び、Cursorの設定画面を開きます。
↓次に、FeaturesタブからYoloモードのチェックボックスを探し、チェックを入れます。（画像ではすでに有効化されていますが気にしないでください。）
チェックを入れるときの注意点
有効化のチェックを入れようすると、何をやっているのか（リスクを）わかっているのか？…というような脅しみたいなウィンドウが出てきましたが私は勇気を振り絞ってContinueを押しました。
（2025/1/9追記）
具体的には、以下のような警告が出ます↓
”免責事項
Yoloモードは、設定した許可リストと拒否リストに基づいて、あらゆるコマンドを実行します。外部ソースからのプロンプトインジェクションのリスクに注意し、自己責任で使用してください。”
以上で設定は完了です。
Webアプリを作ってみる
では早速Webアプリ作成を試してみます。
お題の設定
プロジェクトフォルダを新規に作成して空のindex.htmlを作成したあと、Command + I キーでプロンプトを呼び出し以下のように指示してみました。
Submitを押す前に…
プロンプト右下の「agent」をあらかじめ選択しておく必要があります。
フロントエンドを勝手に実装
すると…
何やらフロントエンドの実装を始めたようです。
さらに待ってみると…
サーバーサイドも勝手に実装
今度はサーバーサイドの実装を始めました。
さらに待ってみると…
サーバーサイドの動作に必要なPythonパッケージのrequirements.txtの作成を始めました。
実装結果をテスト
どうやら実装が終わったようですね…。ご親切にテスト方法も教えてくれています。実行しますか？と聞いてきたのでもちろんYesと答えます。
すると必要パッケージのインストールからサーバーの起動まで勝手にやってくれました。ブラウザで開く操作はこちらでやる必要があるようです。
デバッグ
ブラウザ上でアプリを開いてみました…がしかし開けません…。Cursor先生に報告します。
するとサーバー側のエラーログから勝手に原因を特定し、修正を始めました。
忘れがちで煩わしいサーバー再起動も当然自動です。
再度ブラウザで開いてみると、今度はindex.htmlが開けたものの、ファイルダイアログで画像を選択して変換ボタンを押してもエラーが出て変換してくれません…。Cursor先生に再度報告して修正してもらいます。
デバッグ結果
修正終わったようです。ブラウザでの実行結果はというと…
無事に動いちゃいました（汗。
テスト画像について
テスト画像にはMicrosoftのCopilotさんに作ってもらったものを使いました。
説明資料も作ってもらう
UMLの図もPlantUMLなどを使えばコードベースで描けるので、ついでに説明資料も作成してもらうことにしました。これがかなり個人的には衝撃的でした。
お題を再設定
勝手にエラーを修正しながら図の生成を進めていく
これがかなり衝撃的だったのですが、Yoloモードではターミナルの自動実行もできるため、指示内容を完遂するまでのバグの修正や必要パッケージのインストール、再実行まですべて自動でやってくれます。
↓PlantUMLでコードを書いて、UML図の作成を開始した様子。
↓途中で出会った問題は自分で解決してくれます。（下図はエンコード関連の不具合）
↓最終的にはUML図の生成に成功してしまいました…。
各UML図が完成！
完成した3つのUML図を以下に示します。とてもAIが全部自分で作ったとは思えません…。
↓シーケンス図
↓クラス図
↓コンポーネント図
一切コード自分で書かずに各図の作成が完了しちゃいました。まじかよ…。
おわりに
いかがでしたでしょうか？
今回のお試しでは、自分では1行もコードを書かずに正常に動作するところまでいってしまいました…。UML図も全自動で作れちゃいました…。人間がやったのはコードが出来上がっていく様を見守ることと、ブラウザ上での実行結果を報告することぐらいです。
これからはコード実装がかなり楽になるなと思う反面、人間いらないんじゃね…？（恐怖） とも思いました。皆さんもCursorが手元にある方は試してみてはいかがでしょうか？きっと感動すると思います。
（ヤバい時代になったもんだ…。）
ではまた。