ViveCoding with Claude

Canva Version
https://www.canva.com/design/DAGtaFcVZ9g/rDuIY5kwfxGsu1CElHPLeA/view?utm_content=DAGtaFcVZ9g&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=hf69e28913d

Prototype
https://bivouac.onrender.com
https://youtu.be/HWoXwUKMr8g?si=afrfCPVayTJ8LN7E

ViveCodingMaster
https://zenn.dev/oggata/books/612325bc050fae

Transcript

1. ViveCoding with Claude
2. Vive Coding ? Vibe Coding（バイブコーディング）とは、 「人間が音声やテキストで指示を出 し、AIが主体となってコードを書くコーディングスタイル」を指す革新的な概 念です。この用語は2025年2月にAI研究者のAndrej Karpathy氏によって提唱 され、瞬く間にプログラミング界で大きな話題となりました。
3. 従来の開発プロセス（Todoアプリ） ： // 開発者が手動で書く必要があったコード例 function createTodoApp() { const todoList = document.getElementById('todo-list'); const addButton = document.getElementById('add-button'); const todoInput = document.getElementById('todo-input'); let todos = JSON.parse(localStorage.getItem('todos')) || []; function renderTodos() { todoList.innerHTML = ''; todos.forEach((todo, index) => { const li = document.createElement('li'); li.className = todo.completed ? 'completed' : ''; li.innerHTML = ` <span onclick="toggleTodo(${index})">${todo.text}</span> <button onclick="deleteTodo(${index})">削除</button> `; todoList.appendChild(li); }); } // ... 以下50行以上のコード } Vibe Codingでの同じ開発 - 開発者: "シンプルなTodoアプリを作って。タスクの追加、完了チェ ック、削除ができて、データはlocalStorageに保存して" - AI: [完全なTodoアプリのHTML、CSS、JavaScriptを3分で生成] - 開発者: "完了済みタスクを薄いグレーにして、完了日時も表示してく ださい。" - AI: [即座に修正版を生成]
4. 現代のVibe Coding実践者は、従来の開発者とは根本的に異なる思考プロセスを持っています。彼らは技 術実装の詳細よりも、 「どのような体験を提供したいか」 「ユーザーにどのような価値を提供したいか」と いった体験設計に重点を置いています。 従来の開発プロセス AI協働開発プロセス 要件定義 技術選定 アーキテクチャ設計 実装 テスト デバッグ 体験設計 AIとの対話実装 迅速なプロトタイピ ング リアルタイム改善
5. Created multiplay GAME Claudeでマルチプレイゲームのプロトタイプを作りました
7. Claudeは開発者でなくても、言語でコーディングをしたり、敵キャラクターを言語でコン トロールすることができる優れたvive codingツールです。
8. Artifacts Artifactを使うことで作成したアプリを即座に実行、共有できます。 インタラクティブArtifactという機能で、LLMを使ったアプリケーションも作成可能です。 （API Keyは 不要で利用者側の枠を利用してアプリを動作できます）
9. MCP MCPは様々なアプリケーションと接続できる機能です。デフォルトでも多くのアプリと接続できます し、自分が作ったアプリケーションにも簡単に接続できます。 （後ほどMCPを使ってキャラクターをコントロールする方法をご紹介します）
10. TIPS ClaudeによるViveCodingをここ１年ほどやってみたTIPSをご紹介します。
11. Tips1. ヘッドレスの活用 ツールは、最近は、ヘッドレスのツールを使うことが多いです。UnityやXCodeなどを使って開発をし ていましたが、Vive Codingではヘッドレスの仕組みを使うのが良いのではないかと思っています。 （将来的にはMCPで解決するかも？） ThreeJS Node.js Colyseus flutter Express.js Diango REST Framework Puppetter LangGraph Unity Unreal Godot XCode Android Studio Chrome Dify ヘッドレスツール GUIツール
12. app app app app app merge merge merge Tips2. Small Steps, Big Results Vive Codingをするときに、一つのファイルに対して、試行錯誤していると、AIが勝手に消したり、同 じメソッドを作ってしまったりと意図しない挙動になるケースがあります。 小さく完成形を作って完成ファイルにマージしていくのが良いのではないかと思います。 Claude Artifact Claude Code
13. ゲームの場合は作りたいものによって、大きく実装や考え方が変わります。 （例えば、車のゲームなどは、車両力学をベースに開発されていたり） そういったものをRAGとして活用して利用してみましょう Tips3. RAG
14. Process それでは簡単にプロトタイプの開発の流れをご紹介します
15. まずは、マルチプレイの雛形を作成します。次に地形を分割して起伏をつけて いきます。
16. フィールドに配置するオブジェクトを作成。 間接的なオブジェクトツールを作成して、配置する手法を取っています。
17. Text-to-3Dのモデリングツールも増えてきています。 ただ、メッシュ数が多かったりと、ローポリゴンモデルの作成など 細かい調整は手直しが必要です。
18. Claude Artifactで簡単なボーンアニメーションを支持してみました。
19. BGMはSUNO.AI 　SEはOptimizerAIを活用します。
20. データの保存は最初はMCPからSQLiteを使っていましたが、公開するために サーバーレスなPostgresデータベース Neonでデータベースを作成しました。
21. MCPでキャラクターのコントロールを行いました。 視野（vision)と操作(Controll)、発射(launch)の３種類をMCPで渡すことで、 「敵を全滅せよ！」という指 示だけで、自律的に行動することができます。
22. MCPの実装自体はとても簡単。index.jsに設定を書いて、Claudeから紐付けを 行うだけでとても簡単に接続が行えます。
23. Enjoy Prototyping !
24. ViveCodingMasterという記事（Zenn)を書いています。 詳しくはそちらをご覧ください。 今回ご紹介したプロトタイプゲームもぜひ、遊んでみてください！ vive coding master survival game