Cursorチュートリアルをやってみた

## 立ち上げ・設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/9e79870d-c099-4a30-bfe3-7321b8cb5476.png)
`Sign Up`からGitHubでログイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/91fb0a3c-3680-483f-bdbc-ce79dd470900.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/a95ec106-fafb-47d2-b2e4-523cfe0c950d.png)
む...遷移しない
こんどは`Log In`から進んでみたら入れた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/5ca7cff5-7de1-4b2d-a381-c8a3c66dbdf4.png)
`Import from VS Code`で進む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/67c873e4-3530-48ad-a145-1cd5ea072397.png)
`Import`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/f6350c35-d669-46fc-bc94-210a779c431c.png)
お好みで`Continue`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/2a387468-80d3-4a0e-9955-83585c124afa.png)
このページはただ`Continue`でいいのかな
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/8cb45107-1199-4fe7-9cca-fa3e9a71e5fa.png)
`Privacy Mode`で`Continue`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/2420d544-65dc-4ebd-bded-4ad44ea76cf9.png)
`Language for AI`を`Japanese`に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/3081be3d-2a1f-4cc6-b0c2-1af0ade2c33f.png)
日本語設定を求めてProfilesに行ってみたけど、言語設定はなさそう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/6816960f-7a8a-4539-ae96-0f229e3b684f.png)
ここから先は特にウィザードが出たりするわけではなかったので、以下のガイドに従って進める

https://learn-cursor.com/ja/wiki/user-guide/install

### 日本語インターフェースの設定
`Cmd+Shift+P`から`language`と入力し、`Configure Display Language`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/fe90967e-1ccb-4580-b68a-6d88faf99538.png)
`日本語`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/d9d664e7-c449-4da8-83e9-30836b968713.png)

あれ...
Cursorを再起動してみる。
日本語表記になっていなさそうだったので、再度日本語に設定した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/7f6e20c5-add1-46c2-99c5-4b9fa04f5dfe.png)
おっ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/995bd9fd-2a14-48ac-ab1d-044d8ac80d8a.png)
初期画面には日本語要素がないけど、ステータスが日本語表記になっているのを見た...!

## チュートリアルに沿って動かしてみる
### 「話す」で小さな製品を作る

https://learn-cursor.com/ja/wiki/user-guide/quick-start

`Ctrl+i`でAIチャットボックスを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/a5ca283a-0d1b-44d7-9562-9c6a2014672f.png)

以下を入力
```
PCウェブサイトを作成してください。機能は以下の通りです：
1. 画像をアップロードできる入口があり、複数の画像をアップロードできる
2. 結合ボタンがあり、クリックするとアップロードした画像を1つに結合して表示し、結合した画像をダウンロードできる
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/067e808c-4f61-4688-80fa-ff3b23551953.png)
リポジトリもない状態でお願いしようとしたらさすがに実行できないようだった。
GitHubでリポジトリを作って、クローンする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/59d0cb4f-0610-43bb-8c26-fb9cedbee052.png)
改めて、指示を入力する

<iframe width="560" height="315" src="https://www.youtube.com/embed/8YHdMLtUo_Y?si=Mv22MdcEGFJTG6Gz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

出来上がった：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/ba596c5c-a749-4686-b77c-2c4ef7ebb0e9.png)

### 動作確認1
<iframe width="560" height="315" src="https://www.youtube.com/embed/LcabE5zNWy0?si=Qs0-F8XqQX6kMAx_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
失敗した。

### 改修1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/ffee1e01-0414-4d11-8c9a-c60b60a605bf.png)
ログの該当部分を選択して`Add to Chat`し、そのまま`Send`したら修正してくれた様子。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/d7c2a013-9765-4109-8f98-d63e8bfd8535.png)
`Accept all`してみる。
サーバーが落ちてしまったので、ターミナルで再度`node server.js`を実行する。
### 動作確認2
<iframe width="560" height="315" src="https://www.youtube.com/embed/OpqPvpyLCEU?si=WMnupBuTMUvCntJY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
同じエラーで失敗。

...

ブランチ切ってコミットしよう。それってお願いできるのかな。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/0b884e9a-c8ff-480f-955c-c9bcd6491afb.png)
できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/741b5bcc-817e-4387-aa0b-d6f1e8fc309b.png)

コミットOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/50d4cad0-29e2-4119-93ba-a3df13647608.png)

### 改修2
エラーメッセージを送っただけでは改修に失敗したので、プロンプトを入れてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/dace81cd-d9ff-4ae2-8171-b4603f133b98.png)

### 動作確認3
<iframe width="560" height="315" src="https://www.youtube.com/embed/utfc6QFgjdw?si=jPo5-C_nwTgvRDh6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
動いた🎉
疲れた...

### PRを作ることができるかどうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/faf72903-fc01-496e-a16d-f105bb4fde89.png)
タイトルと説明を生成してくれたので、便利は便利。GitHub CLIを使ってPR生成まで完結できそうな気もするな🤔

`GitHub CLIを使ったらPRを作るところまでやれる？`って聞いてみたら、GitHubの存在確認から、homeblewによるインストールから、PRの作成まで全部やってくれた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/846d5f52-33ae-4225-9650-244251f604d3.png)

惜しい...！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/6e2bb51b-f2cb-4b2a-a6cd-5328a0998758.png)

できた！けど、既存のPRをクローズして新しいPRを作成しているところがちょっと引っかかるな。

### レビューしてもらってみたい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/1e08d118-2a13-4b9a-a377-6c749c7a326e.png)
いきなりApproveしようとしたのでびっくりした...
ステップバイステップで考えるのが苦手なの忘れていた。
その後、じっくりレビューする、というよりは、私が指摘した観点で修正してくれた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/27795ddc-f828-4b97-a976-a496a848d1ed.png)

#### すごいと思ったところ
観点を伝えれば、私が技術スタックとして持っていない部分をケアしてくれていそうなのがとても助かる。

### 動作確認はできないらしい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/2b19d323-74b6-40ac-afd9-bc8eac9d7317.png)

### テストはかける
書いてくれたけど、通りはしない。修正しても、テストが通ることを確認しない。
`テストが通ることを確認してからコミットを作成してほしい`ってお願いしたら、その通り動いてくれるようになった。

#### どつぼにハマりがち
サイクルを回していくと、同じ問題を何度も対応している様子が見られた。
一向にCIが通るようにならない...
Cursorのクレジット消費ってどこで確認できるのかな🤔

本当に、全く通らない。

しまいには全部落ちるようになってしまった...

#### プロンプトでCI的に確認するようにしてみた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/9df2c152-be10-441d-8a82-027cf4300a64.png)

だめだ...テストを通せない。


### GitHub ActionsでCIが回るように設定できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/85d6ad4d-fafd-439c-a70c-f11e9ebbcb91.png)

### ルール設定
そういえばルールを設定できるって聞いたような。

https://docs.cursor.com/context/rules-for-ai

### 参考になりそうなキーワード

https://note.com/yukkie1114/n/n7449462f62d8

## Usage
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/efd4aea7-df46-467b-af66-a158b4a81c92.png)
どつぼに入ったものを頑張ろうとすると1日でこうなる。

## 学び
- ルール設定は大事
- テストを通すのは苦手
- 広い視点でテスト項目を作成してくれるので、サポート的に使う分には便利