実施日
早いペースで変わっていくと思うので実行日をメモ：2025:06:20
1. 初期セットアップ
1-1. ダウンロード
1-2. Googleアカウントでサインインして各種設定を行う
1-3. VSCode の拡張機能をインポートするか
1-4. テーマカラーを選択
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で既存コードをリファクタしたり編集できる。
1-6.データ共有の設定
一旦、チェックして進める。
※Cursorが設定からデータ共有をoffにできる
チェックしたままの場合：
あなたの書いたコードやプロンプト、編集履歴などがCursorに送信され、機能改善のために使われる。
セキュリティリスクやコード漏洩リスクを最小限にしたい場合は推奨されません。
1-7.レビュー設定
-
Language for AI（AIの言語設定）
→japanese -
Open from Terminal（ターミナルからの起動）
→install
1-8. 初期画面へ遷移
※ vscodeでamazon q developerを入れていたので左サイドバーに表示あり。
- 共有設定をoffにしておく
Cursorが起動したらすぐに「設定の歯車マーク」→「General」→「Privasy mode」をEnabled(オフ)にする
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ファイルで完結
- モダンなデザイン
- アニメーション付き
しばらく待つと以下のように作成された。
2-3. ブラウザで確認
- pc
- モバイル
2-4. 全体のデザインに対して修正依頼
依頼文[ctrl+L]
- UIがわかりにくいため、選択肢と直近の結果を明確にしてほしい
- 文字による説明ではなく、 デザインによって修正して
- デザインはモダンなままを保って
- 修正行は以下のように表示される
- Accept fileを実行
以下のように修正された
2-5. 部分的にコード修正依頼
依頼文[ctrl+K]
グー、チョキ、パーなどが見切れている。それぞれ絵文字だけにしてください。
以下のように修正された
補足[Ctrl+L]と[Ctrl+K]の違い
通常のチャット（Ctrl+L）：
別のチャット画面が開く
全体的な相談や新しいコード生成
コード全体について話し合う
インライン編集（Ctrl+K）：
- インライン編集とは、コードの一部分を選択して、その場で直接AIに修正・生成してもらう機能です
コードエディタ内で直接操作
選択した部分だけを修正
その場でコードが書き換わる
参考と注意事項
- 参考にした記事
- 参考になるyoutube動画
- セキュリティに関する注意
- セキュリティに関する注意 npmパッケージ