AIバイブコーディング例:Cursorでワードゲームを作る

5,758 文字

Vibe Coding -- Example in Cursor -- Making a Word Game
Part 1 of Vibe Coding a game that a few years ago I paid a lot of money for someone to develop and they didn't completeV...

こんにちは、この動画はシンプルなゲーム、友人がデザインしたワードゲームのバイブコーディング動画です。何年か前に開発者を雇ってこのゲームを作ろうとしたのですが、完成間近で放置されてしまったので、自分で完成させられるか試してみます。すでに一度挑戦して指示を出し、エージェントの実行ボタンを押したのですが、多くの奇妙なバグが発生して動作せず、様々な問題がありました。
そこで一歩下がって、ここに表示されている最初の指示を少し言い換えました。もう少しステップバイステップにし、また少し規範的にしました。Pythonファイルの定義や、ファイル内のメソッドや関数などを定義するのが好きです。それが指針になると思います。また、最初のバージョンではテキストのみにします。グラフィックに進む前にテキストを機能させたいと思います。それが信頼性の向上に役立つでしょう。
エージェントバージョンでやってみましょう。私はClaude 3.5 Sonnetを使っています。まだとても優れていますし、Claude 3.7では使用量の制限エラーが出ることがあるからです。中断させたくないので、3.5 Sonnetのままにします。ストップウォッチをクリックして始めましょう。
約1分経過し、これを実行するように求められていますが、ここでは実行したくありません。基本構造が機能するかテストしてみましょう。ゲームを実行してみます。素晴らしい、基本構造は機能しています。続けさせましょう。
今度はrequestsをインストールするコマンドを実行するよう求められています。すでにインストールされているはずですが、彼らの使用環境ではそうなのでしょう。ゲームコマンドを実行しています。前回の動画では自分のコマンドラインを使うようルールを設定したと思いますが、今回はエージェントを使っているので、ここで実行させてみましょう。
「Pを押してカードをプレイするかEを押してターンを終了する」と表示されています。端末が固まっているようですが、少し待ちましょう。キャンセルして再開します。
ボードが表示されました。すべて受け入れて、開始から5分も経っていませんが、すでに何かができているようです。「python use_your_words.py」を実行してみましょう。
プレイしてみると、手札が表示されています。ボードが開始され、スコアと現在のターン、手札が表示されています。「Use Your Words」はボードを正しく作成しています。より良いグラフィカルインターフェースを後で作りますが、少し考えてみましょう。
辞書APIが機能するとのことなので、明らかに機能しないものを試してみましょう。「E」を1の位置にプレイしてみます。「E」は単語ではないと思いますが、プレイできました。もう一度プレイして、「RSC」が確実に単語ではないことを確認しましょう。これはプレイできました。「R」は単語ではありません。
待ってください、「E」は実際に単語なのでしょうか?スペイン語由来のようです。興味深いですね。スチールフェーズに進んでみましょう。
「RIP」があるので、最初のすべてを置き換えてみます。カードをプレイし、1、2、3の位置に「R」「I」「P」をプレイしようとしますが、1ターンに3枚以上プレイできないとのことです。正確かどうか分かりませんが、別のことを試してみましょう。
最初の行に「PI」をつづることができるので、もう一度プレイして、1と2の位置に「P」と「I」をプレイします。3ポイント獲得しました。「プレイする位置を入力するか、0を入力して捨てる」と表示されています。「U」をプレイしたところ、「U」を盗みましたが、それはあまり明確に表示されていません。
いくつか注意点がありますが、「プレイする位置を入力するか」という部分で、「U」を6の位置に置きたいと思います。他のプレイヤーから取るだけなので、そのポイントは得られません。「無効な入力です。数字を使用してください」と表示されました。数字の6を入力したはずですが、奇妙です。
明確にしたいことがありますが、今は飛ばします。エージェントに戻ってみましょう。「U」を使ってみます。これは長くかかりませんでした。キャンセルして受け入れ、スクリプトを終了して、もう一度試してみます。
「CON」をプレイしました。3文字の単語なので、スチールのチャンスがあります。あなたは0枚のカードを相手の手札から盗みました。それが自分の手札からプレイしているという意味なのか分かりませんが、もう少し調べてみましょう。2を入力して、その上に「O」を置きます。0ポイントで「O」が成功しました。そして「E」を盗みました。
待ってください、自分の手札から「E」を盗んだようです。コピーして貼り付けて、修正させましょう。変更をテストしましょう。キャンセルして受け入れ、もう一度実行します。
星印がありました。別のバグを見つけました。「P」「A」「I」をプレイすると「PAIR」になりますが、「P」「A」「I」だけをチェックしていて、単語全体をチェックしていません。これを修正しましょう。
通常、追跡するのが簡単なので、普通のメモ帳を使っています。コマンドラインを正確にコピーしましたが、正確に測定できませんでした。修正できるか見てみましょう。
これはバイブコーディングなので、自分で修正しようとするのではなく、モデルやエージェントに与えて問題を見つけて修正させます。これは良い例だと思います。多くの人がゲームをすぐにグラフィックから始めますが、ルールが正しく機能することを確認したいので、一度に少しずつテストする方が良いと思います。複雑なルールを正しく実装するのをモデルにあまり信頼していません。
テストはせずに受け入れて、もう一度実行してみます。完全には正しく動作していません。3つの単語をすべて一緒に扱っています。「USE YOUR TURDS」は有効な単語ではありません。「T」を「TOUR」の位置に置こうとしましたが、3つの単語をすべて1つの単語として数えています。実際には3つの別々の単語です。コマンドラインを再度コピーして貼り付けて、それを伝えましょう。
近づいていますが、同時に、これはモデルが苦労するかもしれない部分です。コードが増えるにつれて、ますます難しくなることがよくあります。実行中に、コードの行数を確認してみましょう。約300行のコードがあります。
これは自分で手書きするよりも間違いなく速いです。これらのライブラリの一部にはあまり詳しくなく、最初の構造を作成したり、辞書APIを呼び出したりしたことがありません。どうなるか見てみましょう。確かに時間を節約しています。
2つのバグを見つけました。最初と2番目の単語を1つの単語として扱っていますが、3文字をプレイしても何も起こりませんでした。それを入れて、モデルが何をできるか見てみましょう。
このコンテキストウィンドウがかなり長くなっていることは分かっています。同じ問題を解決しようとしているので、解決するまで続けますが、かなり大きくなっているので、チャンスを損なっているかもしれません。どれくらい時間がかかるか見てみましょう。
それほど時間はかかりませんでした。約1分です。特定できたと主張していますが、いつもそう言うので、受け入れて何が起こるか見てみましょう。エラーが出ています。それをコピーして戻します。長くはかかりませんでしたが、受け入れてエラーが出るか見てみましょう。
正しい単語をチェックしましたが、「YOUR」は有効な単語ではないと言っています。なぜそうなのか、それが実際にdictionary.comから来ているのかデバッグする必要があります。dictionary.comの辞書APIに何を送信して何を受信しているのか、テキストファイルに保存したいと思います。
新しいものをクリアします。長くなりすぎているので、これが役立つと思います。関連するものが一部失われるかもしれませんが、この時点ですべては独立して機能する必要があります。
受け入れて、5をプレイしてみましょう。「YOUR」は有効な単語ではありません。でも実際に単語です。何を送信しているか見てみましょう。404エラーが出ているようです。APIそのものに問題があるのでしょう。
Merriam-Websterには無料のものがありますが、GPT-3.5 turboを使うことにします。APIが実際に機能することをより信頼していますし、GPT-3.5 turboは非常に安価で、これらは非常に小さな入力です。
通常はwebタグを付けるのですが、忘れていました。検索しているのは素晴らしいです。実際には確認のためにクリックする必要がありました。情報を探すのに3分待っていましたが、クリックする必要があったのです。今後クリックする必要がないよう設定します。
検索して、ここにサンプルコードを入れた方が実際には速かったかもしれませんが、検索自体ができるか見たかったのです。実行してみましょう。プロンプトを正しく処理するか疑問ですが、何をしているのか理解しているか見てみましょう。
5をプレイして、「YOUR」は有効な単語ではありません。ここに応答が保存されています。「YOUR」は有効な単語なのでしょうか?小文字にしたからかもしれません。もう一度試してみましょう。5をプレイします。
これを大文字小文字を区別しないようにしたいと思います。少しきれいにしたいので、小文字の「O」で動作したと思います。彼らは良いプロンプトを書きました。「あなたは辞書バリデーターです」と書いて、正確に何をしたいのかわかっていました。検索でそれを見つけたのは素晴らしく、コードに組み込みました。
全体的に満足しています。何も調べる必要がなく、もし方法を知らなかったとしても、必要なAPI情報を見つけてくれました。コードをレビューはせず、ただチェックします。
現在45分経過しています。1時間以内に終わるか見てみたいです。これは確かに自分でコーディングするよりも速かったと思います。検証に時間がかかったのは、APIの経験不足によるものでした。素晴らしい視聴者である皆さんに話す時間を費やしています。
一つ気づいたのは、手札にこの文字があるかどうかチェックしていないことです。それをチェックするように指示しましょう。新しく始めます。
これは、最初から手書きでコーディングしていたら、明らかに最初から行っていただろうことです。これは大きなバグとは言えませんが、誰かが好きな時に好きな文字をプレイできるとゲームは機能しません。
変更を受け入れ、コードを再実行し、持っていない文字をプレイしようとします。5をプレイします。「あなたの手札に以下のカードがありません」と表示されました。素晴らしい!
かなり近づいていると思います。この時間の一部は、実際に単語を見て、プレイしようとしたり、さまざまな段階に到達するための方法を考えたりしています。スチールフェーズはうまく機能しませんでした。ターンを終了すると、次のプレイヤーのターンに進みます。
同じ手札を維持し、ターンが切り替わっています。以前のスチールフェーズの後にターンが終了しませんでした。手札が補充され、9ポイント追加されました。それは修正されましたが、チェックする前に、デッキの記録を始めてほしいと思います。
完全なゲームをプレイしてエンドゲームに到達したいかどうかはわかりませんが、スチールが機能すると思うので、実行中にスチールをテストしてみましょう。スチールは機能したようです。手札に3枚のカードがあります。ターンを終了してみましょう。ターンを終了します。
これを受け入れて、もう一度試してみます。チェックする前に、エンドゲームに到達したいと思います。プレイヤーごとの最大ターン数変数を追加し、ゲームをすぐに終了できるようにします。
今は5に設定して、もう一度ゲームをプレイします。素早く行きましょう。プレイヤー1のターンでたくさんのポイントを獲得しました。ゲームを終了する前に、デッキを確認してみましょう。
それはうまく機能しているようです。もう一つの問題は、小文字の文字をプレイしたときに、手札に大文字があると、正しいケースをチェックしない、またはケースマッチングしようとすることです。また、何ターン目かを表示すべきですが、それ以外はこれは機能しており、完全にバイブコーディングで実現しました。
このコメントを編集する以外に、自分でコードを1行も変更していないと思います。これは自分でコーディングするより速かったでしょうか?絶対にそうです。ここにはたくさんのものがあり、それを見つけて考えるだけでも1時間以上かかったでしょう。
この動画はここで終わります。次の改良版では、ロジックが機能しているので、いくつかの点をクリーンアップして、グラフィカルにして、人々が互いにプレイできるウェブサイトに公開してみようと思います。エージェントを使ってそれができるか見てみますが、これが適切な方法だと思います。
最初から「ウェブサイトに置いて完全な指示を与えよう」とするのではなく、エージェントを使う場合は、検証できる機能する部分を段階的に与えるのが理にかなっていると思います。見てきたように、変更すべき点や更新すべき点がたくさんありました。AIの問題もあれば、合理的なもの、明確でなかったもの、見落としたものなど様々でした。
これは、かなりクールなバイブコーディング実験だったと思います。次のレベルに進んで、グラフィックを追加し、二人用のゲームにして、人々がプレイできるウェブサイトに公開するとどうなるか見るのが楽しみです。次の二つのステップは、まずグラフィカルユーザーインターフェースを追加し、その後ウェブサイトに公開して人々がプレイできるようにすることです。
この動画を楽しんでいただけたなら、次の動画もお楽しみに。ありがとうございました、良い一日を。さようなら。

コメント

タイトルとURLをコピーしました