CursorエディタのYoloモードが想像以上だった件

# はじめに

皆さんはCursorエディタは活用されていますでしょうか？CursorエディタとはVSCodeをフォークして作られたAIでコード実装を補助してくれる機能がついたコードエディタのことです。

最近（といっても昨年12月半ば）、CursorエディタのComposerという機能に**Yoloモード**なるモードが追加されたそうなので、早速そちらを試してみることにしました。

Composer機能やYoloモードとは何かに関しては、ChatGPT先生に聞くと以下のような回答が得られました↓

↓Composer機能とは？
![Composer機能とは.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/ba5dfe13-42fb-eed8-847f-2b8bbeba03f6.png)

↓Yoloモードとは？
![Yoloモードとは.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/f6023ec9-090c-0fcc-3057-b31054c228a2.png)

要するに**YoloモードONでCursorエディタを使用すると、様々なコードの実装・修正以外の手動作業もAIが変わってくれる**ということです。

試してみたところ、**予想以上で今後の可能性を大いに感じた**ため、一連の動作の様子をこの記事でご紹介したいと思います。

:::note warn
（2025/1/13追記）Composer機能を試す際の留意点
Composer機能はまだベータ版である点に留意してください。

現時点での最新版44.11ではComposerのAgent機能にバグがあるらしく、 [Composerと長くチャットを続けているとComposerがGenerating...と生成を停止してしまう現象](https://forum.cursor.com/t/44-11-composer-agent-constantly-stalling-stuck-on-generating/39518/1) が [公式のフォーラム](https://forum.cursor.com/) で報告されています。私も遭遇しました。

まだ開発中の機能である点に留意し、開発者側にバグ報告を送って支援するか、修正版がリリースされるのを気長に待ちましょう。
:::

# 試してみる

## Composer機能を有効にする

試すにはまずComposer機能を有効にする必要があります。

↓Composer機能の有効化の方法
![Composer機能の有効化の方法.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/c181236b-0bde-ce28-0bae-b2ede5dfadb4.png)

## Yoloモードを有効にする

次にYoloモードを有効にする必要があります。こちらはなぜかChatGPT先生にWeb検索ありで答えてもらっても回答がいまいちでした。以下の方法で有効化します。

↓まずはエディタ左上のメニューバーから**File＞Cursor Settings**と選び、Cursorの設定画面を開きます。

![CursorSettingsを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/9101979c-db6c-ece3-a29a-289b284719a3.png)

↓次に、FeaturesタブからYoloモードのチェックボックスを探し、チェックを入れます。（画像ではすでに有効化されていますが気にしないでください。）

![Yoloモードを有効にする.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/4246b6b4-5278-ae25-cd92-3ade7e504e90.png)

:::note warn
チェックを入れるときの注意点
有効化のチェックを入れようすると、**何をやっているのか（リスクを）わかっているのか？**…というような脅しみたいなウィンドウが出てきましたが私は勇気を振り絞って**Continue**を押しました。

（2025/1/9追記）
具体的には、以下のような警告が出ます↓
![Yoloモード有効前に出る警告.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/7d2a7bb1-b533-af0b-0dc3-06772e0400d0.png)
”免責事項
Yoloモードは、設定した許可リストと拒否リストに基づいて、あらゆるコマンドを実行します。外部ソースからのプロンプトインジェクションのリスクに注意し、自己責任で使用してください。”
:::

以上で設定は完了です。

## Webアプリを作ってみる

では早速Webアプリ作成を試してみます。

### お題の設定

プロジェクトフォルダを新規に作成して空のindex.htmlを作成したあと、Command + I キーでプロンプトを呼び出し以下のように指示してみました。

![お題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/3860241c-e0fb-7d86-6222-e42a1f2b80e7.png)

:::note warn
Submitを押す前に…
プロンプト右下の「agent」をあらかじめ選択しておく必要があります。
:::

### フロントエンドを勝手に実装

すると…

![フロントエンドの実装を始める.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/5ef1a920-d409-96d2-b05a-f249d96037fc.png)

何やらフロントエンドの実装を始めたようです。
さらに待ってみると…

### サーバーサイドも勝手に実装

![サーバーサイドの実装をはじめる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/2cfddc1e-284e-f311-6a49-99fa2d1f2298.png)

今度はサーバーサイドの実装を始めました。
さらに待ってみると…

![requirementsファイルの作成も始めた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/8b198bac-91eb-5ace-16a2-9e1f2b4ed9b5.png)

サーバーサイドの動作に必要なPythonパッケージのrequirements.txtの作成を始めました。

### 実装結果をテスト

![実行方法を教えてくれる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/e9d6d5d9-4e76-6312-b58a-b2602a8a45c7.png)

どうやら実装が終わったようですね…。ご親切にテスト方法も教えてくれています。実行しますか？と聞いてきたのでもちろんYesと答えます。

![必要パッケージのインストを勝手に始めた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/c6ccbda6-f5ff-c81c-2fe7-d04e4dbebcee.png)

すると必要パッケージのインストールからサーバーの起動まで勝手にやってくれました。ブラウザで開く操作はこちらでやる必要があるようです。
（2025/1/13追記）最近話題の [browser-use](https://github.com/browser-use/browser-use) を併用すればブラウザ操作も含めて自動化できるかもしれませんね。

### デバッグ
ブラウザ上でアプリを開いてみました…がしかし開けません…。Cursor先生に報告します。

![エラー原因の調査も勝手にやってくれた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/ca580a40-d841-61e3-c6c3-a2315c63f4a4.png)

するとサーバー側のエラーログから勝手に原因を特定し、修正を始めました。

![忘れがちで煩わしいサーバー再起動も当然自動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/735bfd0f-2dee-5b0b-306a-1731cedefe20.png)

忘れがちで煩わしいサーバー再起動も当然自動です。

再度ブラウザで開いてみると、今度はindex.htmlが開けたものの、ファイルダイアログで画像を選択して変換ボタンを押してもエラーが出て変換してくれません…。Cursor先生に再度報告して修正してもらいます。

![引き続きエラーがでるので勝手に修正してもらう.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/30c000fe-f9a0-a769-22a2-cda8ba31f1f0.png)

### デバッグ結果

修正終わったようです。ブラウザでの実行結果はというと…

![ブラウザでの実行結果（正常に動作）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/50081f0f-225a-2271-a9ec-b394d698fdf1.png)

無事に動いちゃいました（汗。

:::note info
テスト画像について
テスト画像にはMicrosoftのCopilotさんに作ってもらったものを使いました。
:::

## 説明資料も作ってもらう

UMLの図もPlantUMLなどを使えばコードベースで描けるので、ついでに説明資料も作成してもらうことにしました。これがかなり個人的には衝撃的でした。

### お題を再設定

![UML図作成も依頼する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/4368187c-51d0-52e5-9af2-0200e56a5919.png)

### 勝手にエラーを修正しながら図の生成を進めていく

これがかなり衝撃的だったのですが、**Yoloモードではターミナルの自動実行もできるため、指示内容を完遂するまでのバグの修正や必要パッケージのインストール、再実行まですべて自動でやってくれます。**

↓PlantUMLでコードを書いて、UML図の作成を開始した様子。
![UML図の作成を開始.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/5e2753f5-2ad2-f8d8-a069-383528e548c3.png)

↓途中で出会った問題は自分で解決してくれます。（下図はエンコード関連の不具合）
![文字エンコード問題の自動修正.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/4f2ac9b6-8bcb-13e3-fb77-e8621574838d.png)

↓最終的にはUML図の生成に成功してしまいました…。
![うまくUML図を生成できた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/fe237dae-5e7f-8670-37b4-3c5347751283.png)

### 各UML図が完成！

完成した3つのUML図を以下に示します。とてもAIが全部自分で作ったとは思えません…。

↓シーケンス図
![sequence.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/7811c833-a762-166e-09d4-a88e9edab642.png)

↓クラス図
![class.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/6b19428c-3aa1-cd8e-a9e2-cf908770174d.png)

↓コンポーネント図
![component.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/8586d6d6-d3d6-b78a-048f-f944228c43c8.png)

**一切コード自分で書かずに**各図の作成が完了しちゃいました。まじかよ…。

# おわりに

いかがでしたでしょうか？

今回のお試しでは、自分では1行もコードを書かずに正常に動作するところまでいってしまいました…。UML図も全自動で作れちゃいました…。**人間がやったのはコードが出来上がっていく様を見守ることと、ブラウザ上での実行結果を報告することぐらい**です。

これからはコード実装がかなり楽になるなと思う反面、**人間いらないんじゃね…？（恐怖）** とも思いました。皆さんもCursorが手元にある方は試してみてはいかがでしょうか？きっと感動すると思います。

（ヤバい時代になったもんだ…。）

ではまた。