今話題のVibe Codingを取り入れてゲームメモのWebアプリを作りました
はじめに
最近、ClineをはじめとするVibe Codingが話題になっています。実は私はまだ触れていなかったので、どんなものか体験するためにWebアプリを作ってみることにしました。
作成したもの
ゲームの戦績をメモするためのアプリです。ちょっとカッコつけて英語で作りました。
このアプリは2つのモードを提供しています。1つ目はアクセスするだけですぐに使える「Basic Mode」で、データはすべてブラウザのローカルストレージに保存されるため気軽に利用できます。2つ目はサインインして使用する「Session Mode」で、ユーザーに紐づいたデータがサーバー上に保存される仕組みになっています。
以下がスクリーンショットです。
技術構成
技術スタックはシンプルで、Firebaseをメインに活用しています。構成は次の図のとおり。
エージェント
今回使用したのはGitHub Copilotのエージェント機能。
Clineではない理由
私にとってVibe Codingといえば最初はClineというイメージでした。そして実際に使ってもいました。
OpenAIやAnthropicのAPIと連携して使う場合、当然ながら従量課金で費用が発生します。使用量を気にしながら開発するのは心理的な負担になりました。
そこで、GitHub Copilotを使用すれば、Cline + VS Code LM APIの組み合わせで同様のことが月額10ドルという定額で利用できることを知りました。
しかし、実際に使ってみると2つの問題に直面。
- Claude 3.7 Sonnetが使用できない（UI上で選択はできても実行時にエラー）
- 長時間使用するとRate Limitのエラーが発生する
1については、UI上では選択できるものの、実行しようとすると以下のエラーが表示されてしまいます。
「Request Failed: 400 {"error":{"message":"Model is not supported for this request.","code":"model_not_supported","param":"model","type":"invalid_request_error"}}」
2については、体感で連続2時間くらい使用するとエラーが出てしまいます。
意外と使いづらい、月額課金でケチにやっているから仕方ないか。そう思っていたところ4/4にGitHub Copilotのエージェントモードが提供開始。
こちらに蔵替えしたところ使い勝手が上がったのでそのまま使い続けています。
使ってみた感想
これはやばいです。自身でコードを書かずともアプリができてしまいます。1行もコードを書かずともです。
さすがに大規模開発となるとインプットするソースコードの量も多いですし、実用に耐えうるかどうかは検証しないと分からないですが、私が作ったような小規模なアプリであれば全然余裕です。
思い描いたことがすぐにかたちにできるのはおもしろいですね。新感覚です。
また、AIが書いたコードをじっくり読むことで学習も進みそうです。過信は禁物ですが、少なくとも自分以外の書いたコードに触れるという機会が増えるのはとても良いことだと思います。
Vibe Codingのコツ
1回1タスク
エージェントに頼むタスクはとにかく小さく。
セッション内の会話履歴は（おそらく）すべてリクエストに含まれるため、会話が長くなると応答が遅くなったり、最悪の場合Rate Limitに引っかかる可能性があります。Clineを使っていた際は、このコツがつかめておらず、1時間もしないうちにRate Limitに達してしまいました。
GitHub Copilotでは今のところRate Limitには遭遇していませんが、リソースには当然限りがあるため、できるだけ効率的に利用するよう心がけるべきでしょう。
プロンプトを用意
Clineだと .clinerules , GitHub Copilotだと .github/copilot-instructions.md です。
他の人が書いたものを参考に自分好みに設定していけばある程度はうまく動きます。
おわりに
ソフトウェアエンジニアリングの世界は年々進化しているのを実感します。来年のどんなふうに進化しているんだろう。楽しみでなりません。
今回作成したWebアプリ「GGMemo」ですが、使い捨てではなく今後もメンテナンスします。
ぜひ覗いてみてください！
Discussion