西川和久の不定期コラム

プログラミング知識はもう不要に！？VS Code+LLMでブロック崩しゲームを生成してみた！

  • 西川 和久

2025年1月23日 06:11

　この連載の前回はLLMとWebブラウザの組合せで、AIによるタスク処理をご紹介した。今回はLLMとVisual Studio Code(VS Code)を使ったAIによるタスク処理。多くの機能を持つのだが、プログラミングに興味のない人でも分かりやすいよう、簡単な例でいくつかご紹介したい。

VS Code上でLLMを走らせる「Roo-Cline」とは？

　「Roo-Cline」は、VS Codeの拡張機能。元々「Cline」という拡張機能があるのだが、+αの価値を狙ったフォーク版となる。VS CodeにRoo-Clineをインストールすることによって、日本語を含む自然言語を使いプログラムの自動生成、実行などが可能。加えてMCPやエラーを自動修復しながらタスクを進める機能も搭載している。

　昨年(2024年)の6月に、Claude 3.5 Sonnetの「Artifacts」をご紹介したが、あの環境はあくまでもClaude内でできる範囲のもので、WindowsやmacOSのコマンド/アプリなどは(MCPを使えば可能なものもあるが)実行できない。

関連記事

　一方、Roo-Clineではファイルの読み書きはもちろん、プログラムやWebブラウザの実行、さらにgitまでにも対応するため、筆者が普段作業している内容とプログラミングが自動になるという以外、あまり変わらない状況となる。

　設定は2段階。まずVS CodeのRoo-Cline拡張機能をインストール。ここは説明不要だろう。次にLLMの設定。プロバイダは以下に対応している(執筆時)。

  • OpenRouter
  • Anthropic
  • Google Gemini
  • DeepSeek
  • OpenAI
  • OpenAI Compatible
  • GCP Vertex AI
  • AWS Bedrock
  • Glama
  • VS Code LM API
  • Mistral
  • LM Studio
  • Ollama
Roo Cline拡張機能
Roo Cline/プロバイダの設定(左側)

　ここで選ぶプロバイダ/モデルは、いわばプログラミングの頭脳そのものであり、できれば商用の大規模モデルを選びたいところ。加えてVision(画像認識)対応だと指示に画像を含めることもできる。

　とは言え、プログラミング系だと入力も出力もtokenを結構大量に消費するため、コストが気になる。トライアンドエラーの対応になるだけになおさらだ。

　そこで、今回はOpenAI Compatible/LM Studioに対応していることもあり、ローカルPCでLLMを動かし、どの程度できるかも含め確認してみたい。選んだのは、

  • Codestral-22B-v0.1-GGUF/Codestral-22B-v0.1-Q4_K_M.gguf

これ。ほかにもいくつか試したところ一番調子が良いようで、コーディングには定評のあるモデルだ。LM StudioのWindows版とmacOS版、両方実行すると、

1. Windows(GeForce RTX 3090 24GB)
それなりの速度で動くが、コンテキスト長を大きくするとVRAMから溢れRAMを使うため激遅に。収まる範囲のコンテキスト長だとコーディング用としては微妙

2. macOS(M4 Max 128GB)
GeForce RTX 3090よりは遅いもののコンテキスト長が最大にできる

と、どちらも微妙(笑)。以下、説明に加え実際に動く様子を動画にして掲載した。

実例1 - 簡単なpythonのプログラムを生成/実行

　まず簡単なところから。いつもの“pythonでquick sortを作り実行、結果を表示”を指示してみた。タスクの説明が英語になったり日本語になったりするので、“タスクの説明は日本語で”を加えている。

pythonでquick sortを作り実行、結果を表示。M4 Max 128GBでCodestral-22B-v0.1-GGUF/Codestral-22B-v0.1-Q4_K_M.ggufを使用

これを実行すると、

  1. ファイルquick_sort.pyを作る*
  2. quick sortのコードを生成
  3. quick sortのコードを保存*
  4. コンソールで python quick_sort.py を実行*
  5. 結果をパネル側でも表示*

ファイル入出力、コード自動生成、コンソールでプログラム実行……と、一連のタスク処理をしていることが分かる。サラッと実行されたことを書いているが、*印がついた部分は、これまでのチャット形式だとできなかった部分だ。つまり、「LLMが外部とつながったことによって初めてできた」ことを意味する。

　簡単な内容とは言え、これはコード自動生成以外(コードは自分で書く)、普段と同じ手順となる。

　なお、デフォルトではファイルアクセスなどは確認が入るようになっているが、動画と言うこともあり、可能な範囲でチェックを全部外している。それでもプログラムの実行だけは確認が入る。

　上記、動画はM4 Max 128GBでCodestral-22B-v0.1-GGUF/Codestral-22B-v0.1-Q4_K_M.ggufを使用した時の速度だ。この程度のサンプルなら我慢できなくないが、もう少し大掛かりになるとせめて倍速は欲しい感じだろうか。

　ローカルで動作するLLMは、商用の大規模LLMより賢くないので、できることは限られそうだが、逆に言えば、賢いLLMへ接続すれば何でもできることということにもなる。いよいよ、“ちょっとしたプログラマー”はやばいレベルになってきた気がする。

実例2 - 簡単なLPを作り表示

　次は簡単なLP(ランディングページ)の作成。htmlが書けるのは当たり前の話として、Roo-Clineはタスク実行中、

  • open index.html

とすると、自動的にWebブラウザが開く仕掛けが入っている。できたhtmlをWebブラウザにドロップするより一手間省けるので、ちょっとしたことだが、お！っと思う部分だったりする。指示は以下の通り。cdnを明示的に指示してるのは、何も書かないとrpm installするケースがあったため。

生成AI画像関連スタートアップのLPをbootstrap(cdn)で作ってください。一般的に必要なセクションとその内容を考え日本語で記入してください。問い合わせフォームも必要です。ファイル名はindex.htmlでお願いします。

LPの自動生成。GeForce RTX 3090(24GB)でコンテキスト長がRAMへ溢れない範囲にしてCodestral-22B-v0.1-GGUF/Codestral-22B-v0.1-Q4_K_M.ggufを使用
実際作られたLP。必要最小限だが、bootstrapの作法には基づいている

　今度は同じCodestral-22B-v0.1-GGUF/Codestral-22B-v0.1-Q4_K_M.ggufでもGeForce RTX 3090 (24GB)を使い、コンテキスト長がRAMへ溢れない範囲にして実行した。先のM4 Max 128GBよりかなり速いことが分かる。

　最後、Webブラウザをほかの画面から移動しているが、いろいろ複数のChromeを開いていると、open index.htmlがどこのChromeで開くのか指定できないため、開いたところから移動した次第。

　結果はご覧の通り、bootstrapの作法に基づき、最小構成だが一応LPになっている。html初心者よりは綺麗なコードだろうか！？(笑)。この後、対話式でセクションの中身を追加/変更も可能。

　何度か作ってみて面白かったのは、ざっくり2通り作り方があり、1つは今回のように1 passで全部記述するパターン。もう1つは、1 pass目のsectionの中身は空で、2 pass目に記述するパターンもあった。

　今回は省略したが、ありがちなLPのヘッダー画像は、指示すると「images/header.jpg」など、具体的なファイル名を指定され、そこへ画像をコピーすると、確認して表示できるようになる。

　また、Roo-Clineパネルの左下[Code]とあるが、ここは、Code/Architect/Askの選択ができる。説明によると

  • Code - 実装の詳細に重点を置く
  • Architect - 高レベルの設計に重点を置く
  • Ask - コードベースに関する質問に重点を置く

と、用途に応じて動作モードを切り替えることが可能だ。いずれにしても、この速度ならちょっと触ってみようと思うのではないだろうか。

実例3 - OpenAI/gpt-4oで動かしてみた！

　さて怖いもの見たさで(笑)、OpenAI/gpt-4oで先のLPを作るとどうなるか？前回のbrowser-use WebUIでチャージしたクレジットがまだ残っているので試してみたい。

OpenAI/gpt-4oでLP生成中。さすがに速くまた内容も濃い。かかった費用は0.05ドル。この程度でこれだと、本格的に触るとそれなりにかかるかも知れない……
完成したLP。画像のURLだけミスっていたので筆者が作ったのを手動で設定

　こちらはさすがに商用大規模モデルだけあって、ローカルLLMとはいろいろ違う。一点、画像は指定のURLが実在せず、筆者が作ったのに差し替えた。今回は手で書き換えたが、指示すれば直るだろう。

　次は大業？のブロック崩しゲームづくりを依頼してみた。プロンプトは“html、javascript、cssだけを使ってブロック崩しを作り表示してください”だ。

OpenAI /gpt-4oでブロック崩し生成。予想外に(笑)正常動作したので驚いている間に即ゲームオーバー
ブロック崩し生成後のコードの一部。ほぼJavaScriptで書かれている
リベンジ！

　あっと言うまに出来上がってしまった。何度か修正必要だろうと思っていただけに、いきなり動いてビックリで！即負け(笑)。ということでリベンジ版も掲載した。

　コードのcode.zipを見ると、ほぼJavaScriptだけで実現している。しかもかかった時間は約40秒、費用はたったの0.08ドル！これはさすがに人間の負けだ。参考までにローカルのLLMだと現状、完全に動くものは作れていない。

　ほかにも仕事で使えそうなものをいくつか試しているが、OpenAI/gpt-4oだとかなり実用的に利用できる。2025年1月でこのできだと、後数年もすると、この手の作り方が主流になっているのではないだろうか。凄い？便利な？悲しい？時代になったものだ……。

　以上のようにRoo-Clineは、LLMとVisual Studioの組合せでタスク処理するAIエージェントだ。ちょっとした内容ならローカルで動作するLLMでもOK。本格的運用なら商用LLM APIサービスと、用途や予算に応じて使い分けも可能。

　今回掲載した内容は非常に簡単なもので、gitやエラーを自動修復も含め、ネット検索するとかなりのことができるようだ。興味のある人は是非試してほしい。OpenAI APIの残8.05ドル。まだしばらく遊べるか！？(笑)。

　ちなみに、入稿直後リリースされた「DeepSeek-R1」の「deepseek-r1-distill-qwen-14b-q8_0.gguf」をWindows(GeForce RTX 3090)で使って動かしたところ、ブロック崩しが無事動いた！これは噂通りの高性能だ(32Bでo1-mini相当)。生成速度も、OpenAI/gpt-4oほどではないものの十分速い。これはちょっと驚きに値する。

　ただファイル生成→open index.html後も、また同じタスクに入ってしまい永久ループになってしまう(途中キャンセルで抜ければ良い)。コードDeepSeek-R1.zipも添付するので参考にしてほしい。

Windows(GeForce RTX 3090)のdeepseek-r1-distill-qwen-14b-q8_0.ggufで無事ブロック崩しを生成できた！これは驚き