VScodeは使ってる。コードもAIに書かせてる。Cursorは使ってない。ツボだけ知りたい。
・ふだんVScodeを使っている人で、
・すでにChatGPTやClaudeなどでAIコーディングをしている人で、
・コードのコピペ作業が大変と感じている人で、
・しかしながらCursorみたいな新しいツールを覚えるのもイヤだという人
この記事はそういう人（一週間前の自分）向けの記事です。
一連の導入にあたって、つまずきポイントやツボのところにざっと触れていますので、上記のリテラシーのある方ならすんなりとCursorに移行できると思います。
今回はCursorを使い、まっさらな状態からブラウザで動くシューティングゲームをAI作成してみます。
※2025年5月10日現在の情報となります。
CursorはVSコードをフォークしたものだそうです。使い勝手はVScodeとほぼ一緒です。
Cursorはいまのところ通常プランが20ドルです。
すでにChatGPTやClaudeを使っている場合、そこからさらに20ドルの課金かぁ…と思いますが、今のところCursorはAIサービスの使用料も含んでいます。
たとえばAIコーディングだけのためにClaudeを使っている場合は、Cursorに移行するという手もありということです。しかも、使用するAIも複数のメジャーなAIサービスから選ぶことができます。
ChatGPTやClaudeのAPIをすでに契約している場合は、無料プランのcursorに外部AIサービスのAPIキーを入力して使うこともできます。
最近変わったようなので後述します。（2025年5月10日現在の情報）
- Mac(PCでももちろんOKのはず）
- Windowsの方はコマンドキーやメニュー表示を読み替えて進めてください。
※以降の例は有料版でCursorを使用しています。
普通にインストールできると思います。
つまづきを感じた場合は、以下の記事が参考になるかもしれません。（ありがとうございます）
CursorはほぼVScodeと同様に使うことができます。
さっそく使ってみます。
STEP1 : 作業スペースを作る
-
Cursorを開く前に、まず適当な場所に空のフォルダを作成しておきます。名前はなんでもOKです。
-
Cursorを起動します。
- Cursorで「Open project」や「フォルダーを開く」からフォルダを開きます。
- 「ファイル」→「名前をつけてワークスペースを保存」としてワークスペースを作っておきます。
この時、もちろんgit cloneしたり、gitに対応したフォルダを選ぶことなどもできますが、その説明は割愛します。
STEP2 : 返答を日本語にしておく
メニューから「Cursor」（windowsでは歯車メニュー）→「基本設定」→「CursorSettings」→「Rules」に入り、User Rulesに「Always respond in 日本語」と入力しておきます。
（関西弁なども指定可能ではあります）
STEP3 : AIコーディングを試してみる
- コマンド＋LでAIウィンドウを開きます。右側にウィンドウが出ます。
- AIウィンドウの下にあるメニューからまずはAI Agentを選びます。
- 今回は「Next.jsなどは使用せず、ノーマル環境で使える、ブラウザ用のシューティングゲームを作ってください。」と入力してみましょう。
AI がコーディングのプランを考えてくれます。
STEP4 : AIコーディングをアクセプトする
コードが自動で生成されます。もしコードの生成が始まらない場合は「コードを生成してください」などと入力してプロセスを進めてみてください。
コードの表示が完了するのを待ちます。
- 中央の画面の下に「Reject/Accept」が表示されるので一旦Acceptします。
※中央のメインウィンドウにコード修正表示が現れない場合
左側のファイル選択が修正対象のファイルではないかもしれません。その場合は該当のファイルを選択することで、メインウィンドウにReject/Acceptが表示されると思います。
また、右側のウィンドウのコードのチェックボタンを押すことでも、コードに修正を反映することができます。
STEP5 : AIが作ったコードを実行する
- 「このコードの実行方法は？」と聞いてみましょう。
- 実行方法が示されるので、従います。
たとえば今回の場合は、チャットウィンドウにシェルコマンドと「Run ⌘↩︎」のボタンが表示されました。チャット欄のターミナル（Windowsではコマンドプロンプトと呼ぶ）はちょっと狭いので、今回は、Cursor上の別ウィンドウでターミナルを開いて実行します。（ウィンドウの境目をドラッグしてチャット欄を広くすることも可能です。）
- コマンド+Jで画面下にターミナルを表示します。
- ターミナルにシェルコマンドをコピペして実行します。
ローカルサーバーで実行するタイプとなりました。
ターミナルに表示されている「port 8000 (http://[::]:8000/)」のhttp://…の部分をコマンド＋クリックすると、ブラウザが立ち上がりゲームが始まります。
今回は１発で動きました。
うまくいかない場合は、エラーの状況を説明したり、エラーコードをチャット欄に貼り、AIに修正していってもらいます。
これで、基本の使い方は完了です。
ChatGPTやClaudeでAIコーディングしてコピペ、という作業をしていた方はかなりの効率化を実感できると思います。
コマンド + K で部分修正
コードを範囲選択した状態で「コマンド + K 」を押すと、部分的な修正が可能になります。
たとえば、キー入力の部分を見つけて該当部分を選択し、コマンド＋Kの後に
「awsdキーに変更」と入力してみます。
変更点が表示されますので、Acceptしてみます。
しかし、いざ実行してみると、まだawsdキーでは動かないということもあると思います。
その場合は、またチャットにもどり、Agentに「awsdキーで動作するように調整してください。」と指示してみます。
すると、コードの全体から、修正が必要な部分を見つけて、修正案を提案してくれました。
これでキーの変更が可能となりました。
設定から読み込ませるdocを指定できます。
ライブラリのドキュメントなどを読み込ませておくとコード生成の精度が上がりそうです。
AIに質問や相談ができます。ただし、モード選択の横のメニューで「Auto」を選択しておけば、質問文章の内容に則して、適切なモードで回答したりコード生成してくれているようです。
ここまでざっくりと使えるようになれば、あとはネットの他の情報も読んですぐわかるようになっていると思います。ぜひ便利な使い方をマスターし、コーディングを効率化してよいアウトプットに繋げてください。
Next.js用のセットアップなども自動で行ってくれるので、githubやVercelと連携すればオリジナルのサイト公開まで一気にできてしまったりもします。
自分もまだ使い始めて１週間程度なので、いろんな使い方に親しんでいきたいと思います。
Cursorに親しむことでどんどん手放せなくなくなり依存度が高まるのもちょっと怖いですが、ほどよくつきあっていきましょう。
参考
こちらの動画を参考にさせていただきました。ありがとうございます。
おまけ
とくに具体的な指示を出さずに「面白くして」と１〜２回お願いしただけの拡張例です。エネルギー表示やボス、ゲームオーバー画面などをAIがプランニングし、追加してくれました。（Claudeを使用）
Views: 0
