Cursorのセットアップ手順とじゃんけんアプリ作成

# 実施日
早いペースで変わっていくと思うので実行日をメモ：2025:06:20

# 1. 初期セットアップ

## 1-1. ダウンロード
https://www.cursor.com/ja

## 1-2. Googleアカウントでサインインして各種設定を行う

## 1-3. VSCode の拡張機能をインポートするか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/9122d99f-056d-4d0a-8e93-3038f151cf80.png)

## 1-4. テーマカラーを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/219da90c-c89c-46e4-a516-35f6e88ec238.png)

## 1-5.キーボード操作方法を選択
ややこしいが選択肢は上部のタブ。VSCodeを選択。

- **上部**
ユーザーの入力スタイル（キーボード操作）を選ぶエリア。
「VS Code」「Vim」などから1つ選ぶ必要がある本物の選択肢です。
 
- **左の「Agent」「Cursor Tab」「Cmd-K」**
これは Cursor 固有のAI機能と、それぞれのショートカット（例：⌘Iや⌘K）の説明欄。

 **💡 補足：それぞれの機能とは？**
- Agent（⌘I）：開発のためのAIアシスタント。何を作るか相談できる。
- Cursor Tab（Tabキー）：AIが予測した次のコードを提案。
- Cmd-K（⌘K）：AIで既存コードをリファクタしたり編集できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/e8b2f71f-c210-444a-898d-a6c2d10f45b1.png)

## 1-6.データ共有の設定

**一旦、チェックして進める。
※Cursorが設定からデータ共有をoffにできる**

> チェックしたままの場合：
あなたの書いたコードやプロンプト、編集履歴などがCursorに送信され、機能改善のために使われる。
セキュリティリスクやコード漏洩リスクを最小限にしたい場合は推奨されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/f036cf3c-9440-4f1e-a2f6-0cf17c1326ff.png)


## 1-7.レビュー設定

- Language for AI（AIの言語設定）
→japanese

- Open from Terminal（ターミナルからの起動）
→install

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/e480d777-d393-4a57-9abc-029a2e5ac7f3.png)


## 1-8. 初期画面へ遷移
※ vscodeでamazon q developerを入れていたので左サイドバーに表示あり。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/2a981d2c-e9bf-4b4d-b6d3-dba13d7645a6.png)

- 共有設定をoffにしておく
Cursorが起動したらすぐに「設定の歯車マーク」→「General」→「Privasy mode」をEnabled(オフ)にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/8ded1975-e9c5-4aeb-aea8-fd074f2f871b.png)



# 2. AIコーディングをしてみる

じゃんけんゲームの作成をお願いしてみます。

## 2-1. フォルダ作成

```
mkdir janken-game
cd janken-game
ctrl + l　でプロンプトを
```
## 2-2. Cursorのチャット機能を使用
Cursor内でチャット（Ctrl+L または Cmd+L）を開いて、以下のプロンプトを入力

```
じゃんけんゲームを作ってください。以下の機能を含めてください：

機能要件：
- プレイヤー vs コンピューターの対戦
- グー、チョキ、パーのボタン
- 勝敗判定と結果表示
- 勝敗記録（勝ち・負け・引き分けの回数）
- 手の出し方にアニメーション効果
- レスポンシブデザイン

技術要件：
- HTML、CSS、JavaScript
- 1つのHTMLファイルで完結
- モダンなデザイン
- アニメーション付き
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/347c8022-f54c-4e84-bec2-e4552afb0000.png)



**しばらく待つと以下のように作成された。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/51ccc28f-7ceb-462a-9ba2-ab2aa963cc89.png)


## 2-3. ブラウザで確認

- pc

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/cd82331d-7a60-437e-bec1-0b3488586093.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/fe6bf770-be0e-425d-8014-5346e21d312d.png)

- モバイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/f81c5b71-af9b-4ac1-97f4-4fcc41305cc2.png)



## 2-4. 全体のデザインに対して修正依頼

### 依頼文[ctrl+L]
```
- UIがわかりにくいため、選択肢と直近の結果を明確にしてほしい
- 文字による説明ではなく、　デザインによって修正して
- デザインはモダンなままを保って
```

1. 修正行は以下のように表示される
2. Accept fileを実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/5dfe148f-5896-45b8-94c7-2602da609379.png)

### 以下のように修正された
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/38197ce7-dc29-4188-8b20-67c311002395.png)


## 2-5. 部分的にコード修正依頼

### 依頼文[ctrl+K]

```
グー、チョキ、パーなどが見切れている。それぞれ絵文字だけにしてください。
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/90ea24f2-408e-44a9-b656-d15d962b3ebc.png)


### 以下のように修正された

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1193125/5db6e627-acb9-4bae-8cc3-0f164a6c270b.png)


# 補足[Ctrl+L]と[Ctrl+K]の違い

## 通常のチャット（Ctrl+L）：

別のチャット画面が開く
全体的な相談や新しいコード生成
コード全体について話し合う

## インライン編集（Ctrl+K）：
- インライン編集とは、コードの一部分を選択して、その場で直接AIに修正・生成してもらう機能です

コードエディタ内で直接操作
選択した部分だけを修正
その場でコードが書き換わる

# 参考と注意事項

- 参考にした記事

https://qiita.com/ryamate/items/94a6170c4661242b4c1c#%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AB%E5%9F%BA%E3%81%A5%E3%81%84%E3%81%9F%E5%9B%9E%E7%AD%94

- 参考になるyoutube動画

https://youtu.be/m-iuemnHpCk?si=QWTVpMFLGCIjjKdP

- セキュリティに関する注意

https://www.cursor.com/ja/security#privacy

- セキュリティに関する注意 npmパッケージ

https://thehackernews.com/2025/05/malicious-npm-packages-infect-3200.html