バイブコーディングはじめました

# はじめに

以前から気になっていましたが、なかなかできなかった[バイブコーディング](https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)を、この度、行ってみました。どのツールを使った方が良いか、AI（ChatGPTとGemini）に尋ねたところ、Cursorをおすすめされたため、Cursorでやってみました。

# Cursorをインストールする

Cursorを[ダウンロード](https://www.cursor.com/ja)し、インストールしました。Cursorのバージョンは1.0.0でした。

Cursorを起動すると、Gitのインストールを要求されたので、インストールしました。  
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/2bf8ba54-e8ec-4828-8578-29a9ccde249f.png)

AI機能を使用するにはログインする必要があるそうなので、アカウントを作成し、ログインしました。  
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/ae72f0b0-20be-43f4-934a-cb794a219b67.png)

テーマとして「Cursor Dark」を選択しました。  
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/f0ab494a-96bf-4f2b-b66e-327b76b735db.png)

キーバインディングとして「VS Code」を選択しました。  
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/c3d2007a-fe2f-4609-b562-082c3b4fb6ea.png)

データ共有に関する説明が表示されたので、チェックボックスをチェックし、「Continue」ボタンをクリックしました。  
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/26a4efd7-299a-4806-ab7f-d43bab46cc79.png)

説明の翻訳：
```
データ共有
デフォルトでは、Cursor はコードから学習し、可能な限り最高のエクスペリエンスを得られるよう支援します。
1. 自分でコントロールできます：設定→プライバシーでいつでもオフにできます。Cursorを使い始めた最初の日は、データ共有もオフになっています。
2. デフォルトの動作: 1 日間使用すると、Cursor はプロンプト、コードベース、編集履歴、その他の使用状況データを保存して学習し、製品を改善します。
詳細については、プライバシーポリシーとセキュリティページをご覧ください。
カーソルが自分のコードから学習するのは問題ありません（または、[設定] → [プライバシー] に移動してオフにします）。
```

「Language for AI」として「Japanese」を選択しました。  
「Open from terminal」のインストールは、とりあえず、スキップしました。（「Open from terminal」は、Launchpadからではなく、ターミナルからCursorを起動するコマンドだそうです。）  
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/df9e8f68-4d2a-4075-9b69-f10c0a678c7e.png)

Cursorの画面が表示されました。  
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/c4ccb124-107c-4a9f-9804-636257dd5fc1.png)

メニューを日本語化するために、「Japanese Language Pack for VS Code」という拡張機能を入れる必要がありました。  
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/f9376a7c-452d-4c78-84e5-38a9a08bbbcd.png)

# バイブコーディングをやってみる

## 三目並べを生成してもらう

試しに三目並べを生成してもらうことにしました。  
画面の右側にあるチャットで下記のようにお願いしましたところ、早速、コードを生成してくれました。
```
JavaScriptで三目並べを作ってもらえますか？
```
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/dd4a483f-fd2f-4cac-9ede-ef26534feb47.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/2728900b-b455-4040-af62-ee582fe6830e.png)

ファイル作成や配置を自動で行ってくれるらしいので、下記のようにお願いしました。
```
はい、ファイル作成や配置を自動で行ってください。
```

ファイルの作成に同意するために、「Accept」ボタンをクリックしていきました。  
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/5dacab47-05f3-48e6-9e27-e97fb618ab27.png)
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/1c78c58e-d41a-4d6a-a0b0-163731e4a5a0.png)
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/5c9b569f-8219-47c8-ba15-37dd90298f34.png)

しかし、ファイルの作成に失敗しました。  
ルートディレクトリの直下にファイルを作成しようとしたため、権限エラーが発生したようです。  
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/15334ec7-f5e9-47aa-a458-1bd805c8b85e.png)

Cursorがアクセス可能そうなフォルダを作成し、その下にファイルを作成してもらうよう、再度お願いしました。
```
`index.html`、`style.css`、`script.js`を`/Users/u53r/Documents/tic-tac-toe`の下に作成してもらえますか？
```

今度は、無事、ファイルが作成されました。  
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/503de565-e609-461b-bd60-7252f3adcaf8.png)
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/149a7638-a2e8-4849-be73-6783848c922c.png)

`index.html`を開き、一通りの動作を確認しました。  
ちゃんと動き、感動しました。  
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/20ab25d5-8851-486b-ac52-54a79ee4c672.png)
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/f7af6c28-5add-4b38-842f-78f7a135ef0d.png)
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/0549ba84-05ef-4e79-9848-2abbd46da739.png)
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/8e44e015-0cd7-4dcc-93c2-b849414b74fc.png)

変更を確定するために「Accept all」ボタンをクリックしました。  
生成してもらったコードを保管するために、Gitリポジトリの作成をお願いしました。
```
`/Users/u53r/Documents/tic-tac-toe`にGitリポジトリを作成してください。
```
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/42b134a1-ffc5-44e6-a229-10b72b5cff9d.png)

`git init`までを想定しましたが、`git add`と`git commit`までやってくれました。  
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/b6419b93-3e18-4f72-9f79-9e219fb8a065.png)
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/70d22873-ed77-49ae-b566-0ff809757d55.png)
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/4196cd43-f4ce-4ed3-aec6-bc25e02aa88f.png)

## 生成してもらったコードを変更してもらう

Cursorが生成した三目並べは期待以上のものでした。  
しかし、一人で遊ぶ三目並べは面白くないと思いました。コンピュータと対戦できた方が面白いと思いました。  
そこで、少し難しいかも知れないと思いましたが、下記のようにお願いしました。  
```
`/Users/u53r/Documents/tic-tac-toe`に三目並べのプログラムがあります。
現在、そのプログラムは二人の人間が対戦するゲームとなっています。
私はそのプログラムを人間とコンピュータが対戦するゲームに変更したいです。
そのように変更してもらえますか？
```

Cursorは、難無く、`script.js`を変更しました。
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/d55c0e57-adca-4b96-a733-8690030519b6.png)
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/7c254b66-18ad-4649-9ab1-7a883c2f6bb2.png)

動作を確認したところ、ちゃんとコンピュータと対戦できるようになっており、感動しました。
![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/84851aa4-4d54-4c6f-8fd0-9fde287b605f.png)

最後に、変更をコミットしてもらいました。
```
動作を確認しました。
問題ありませんでした。
ありがとうございます。
変更をコミットしてもらえますか？
```
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/07eb6ded-52cd-4738-9e57-db29d517e849.png)
![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/87d651fa-fdf9-4536-8b60-cc8f388e3bf6.png)
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/ecbe06ad-0855-4a35-b4f6-e48a34670844.png)
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114257/39075176-a5c3-4f3e-95d1-094aeacbcc53.png)

# まとめ

今回、バイブコーディングをやってみて、思っていたよりも上手く行ったと感じました。  
依頼内容が簡単過ぎたのかも知れませんが。😅  
Cursorがどこまでやれるのか、知りたいと思いました。

# 参考：Cursorを完全にアンインストールする方法

参考までに、設定も含めて、Cursorを完全にアンインストールする方法を記載します。  
何度かインストールをやり直したくなり、それについて調べました。

## Cursorをアンインストールする

1) 「Finder」を起動し、「アプリケーション」をクリックし、「Cursor」を右クリックし、「ごみ箱に入れる」をクリックする
2) 「ゴミ箱」を右クリックし、「ゴミ箱を空にする」をクリックする

## Cursorの設定を削除する

```
rm -rf ~/.cursor
```
```
rm -rf ~/Library/Application\ Support/Cursor
```