AIチャットCursorでお試しゲーム作り

こんにちは「なかむら」です。

前回はv0を使ってAIで提案画面を作ったのですが、今回はCursorでWebアプリゲームを作ってみようと思います。チャットの会話だけで完成したハエたたきゲームをぜひご覧いただければと思います。作っていく過程もハエたたきのように叩いて改善しています。

本記事の想定読者

• CursorのAIがどんなことできるのか知りたい方

• AIチャットで何か作ってみたい方

---

Cursorとはなにか

Cursorは、AIを活用したコードエディタで開発者の生産性を大幅に向上されることを目指して作られています。VS Codeをフォークして作られているので、操作性が似ていて慣れている人は使いやすいと思います。

---

ハエたたきゲームを作ってみる

始めの設定などは色々なサイトで紹介されているので、省きます

まずは実際に見てもらったほうがわかりやすいと思いますので、作っていってみましょう。

まずはチャットに「ハエたたきゲームを作りたい」と雑に書いてみます。

話が進み始めました。

フォルダを作りましょう、と言われましたが、「Run Command」ボタン押せば作ってくれます。

以下のようにコードを書き始めます。私は何もせず待っているだけです。

画像ファイルも作成してくれるとのことで、そのまま待っています。

出来たようです。ゲームの特徴を教えてくれています。

以下のようなシンプルすぎる作りのゲームが出来るようになったのですが、スタートボタンを押しても動きませんでした…

チャットでうまくいかない事象を伝えてみます。

画像ファイルに問題があるようです、と言われました。開発者だと出来たらまずテストして気づく部分ですが、そこはまだまだですね。

どうやら解決してくれたようです。さぁ見てみましょう。

おおっと笑　ハエじゃなくて怪しいニコちゃんマークを叩くゲームが完成しました！！！

さぁ、チャットで改善点を伝えましょう。以下の3点お願いしてみました。

色々改善してくれたようです。本当か疑わしい改善もあります。。。

ハエ笑　これはハエでしょうか。謎の生物を叩くゲームが完成しました！

ちょっとクリックする範囲が狭すぎるので修正お願いっと。雑なお願いもきちんと理解して対応してくれるのはすごいですね。

音楽と効果音もお願いしてみました。エラー出ても考えて違う方法でリトライしていますね。

試したら音が出なかったので、クレームを伝えてみました。

さあ、完成版のハエたたきゲームです。かなりシュールな出来になりました。ちなみにノイズは録画の時の入り込んだもので、実際動かしているときはなかったです。このノイズと音楽で昔のファミコンのような雰囲気を醸し出していますね！

---

最後に

今回はシンプルなゲームで試しましたが、開発にAIを使うことがかなり多くなってきているし、大幅に時間短縮出来ていると感じでいます。これからはコードを書くことよりも何を作ってビジネスと繋げていくか、みたいな部分がエンジニアにとって重要になってくるかもしれません。

【今日の格言】

「コンピューターは非常に速く馬鹿なことができる。」

アイザック・アシモフ