はじめに
私はこのゲーム開発において、一行もコードを書きませんでした。
それでも、ブラウザゲームは完成しました。
これは、平成中期の開発スタイルが染みついたままのエンジニアが、
オリジナルのブラウザゲームを考案し、
AIコーディングを実践しながら開発した記録です。
簡単に自己紹介
- 新卒からSIer業界に入り、エンジニア歴は20年ほどです
- キャリアのほとんどを業務システムのサーバーサイドエンジニアとして過ごしました
- JavaやPythonを書くことが多かったです
- ゲーム開発の経験はありません
- 現在はIT部門に所属しています
- 思うところあり、1年ほど前にキャリアチェンジし運用エンジニアとなりました
開発の動機
もともとは、所属部門で出された課題が始まりでした。
「AIエージェントの可能性を探り、それをレポートせよ」
という主旨のもので、正直なところ、それがきっかけです。
そこから課題に対する目標設定までは行いましたが、
何から手を付けてよいか分からず、途方に暮れてしまいました。
どうにも具体的なアクションプランが思い浮かびません。
この状況を振り返ってみると、最大の問題は
「AIというツールをよく理解していない」 ことだと考えました。
これまでの私のAIの使い方は、「ググる」の延長だったと思います。
その使い方だけでもAIがすごいことは分かりますが、
それは現代のAIの真価のごく一部に触れているだけでしょう。
運用支援のちょっとしたスクリプト作成をお願いすることはありましたが、
それも「ググる・コピペする」と大差ありませんでした。
その感覚のままでは、自律的に機能するAIを想像することなどできない。
そう考え、まずは
「AIはググるの延長でしょ」
という自分の認識を改める必要があると思いました。
いきなり「AIエージェント」を理解するのは難しい。
そこで、その一歩手前として、
自分のキャリアとも親和性のある題材でAIコーディングを実践してみる
ことにしました。
複数のWeb記事を参考にしながら、
ブラウザゲームを考案し、それをAIコーディングで実装することで、
AIの真価を体感しようと考えました。
（文末に紹介している記事が大変参考になりました）
ゲームの概要
カード配置のメカニクスと、スロットマシンの絵柄（シンボル）を組み合わせた、
オリジナルのカードゲームです。
3×3のボードにカードを配置して役（コンビネーション）を作り、
戦略的なプレイで勝利を目指します。
題して、
Card Slot – Survive First, Win Later –
です。
最後にGitHubのリポジトリと、すぐに遊べるホスティング先も用意したので、
あわせてご案内します。
技術
- HTML / CSS / JavaScript のみで構成されたシンプルな構成です
- GitHub Pagesでホスティングしています
ゲーム画面
AIコーディングの実践
まず考えたこと
「仕様をちゃんと与えれば、あとは自分がコードを書くことはほぼない」
という話を、会社の同僚から聞いていました。
まずはこの体験を得ることを、最重要事項にしました。
使用したツール
- Claude Code for VS Code：実装・構造設計を担当
- ChatGPT：仕様整理・言語化・設計相談を担当
用途を明確に分けたことで、非常に使いやすく感じました。
実践手順
仕様をまとめる
-
まずは大まかなアイデアをメモに書き出します
-
ゲーム仕様書
specification.mdを、ChatGPTに相談しながら練り上げます -
この段階で仕様書は英語になりました
- 「カード」と「札」など、カタカナ英語と日本語が混ざりやすかったためです
- 開発中は英語仕様を使い、UIの最終段階で日本語表現を調整すればよい、というアドバイスをもらいました
-
おおよそ固まったら、
「これはAIコーディングを実践する題材として適切ですか？」
と最終確認し、次の工程へ進みます
Claude Codeにクラス設計と実装を任せる
- 私が実装するなら、まずドメインモデリングから始めます
- そのため、最初にドメイン層のクラス設計を依頼しました
- コントローラ層やビュー層は後回しでよいことも伝えます
- この段階で main.js や index.html などのファイルは作られますが、中身はほぼ空です
- 生成されたクラスをレビューし必要な箇所は修正してもらいます
- クラス構成は妥当か
- 責務の割り当ては適切か
- （ここまで、私はHTML/CSS/JSを一切書いていません）
次にコントローラ層を作ってもらう
- 仕様書とドメインクラスをもとに、コントローラ層の設計・実装を依頼します
- 本来ドメインが持つべきでない知識は、コントローラ層へ整理されていきます
- （同様に、私は実装していません）
次にプレゼンテーション層を作ってもらう
- UIの実装を依頼します
- （ここでも私は実装していません、素材画像も作ってもらいました）
動作確認
- 画面上で大まかな動きを確認します
- これは従来の開発と同様です
総合テスト仕様書を作ってもらう
- 仕様書をもとに、総合テスト仕様書の作成を依頼します
- 「E2Eテスト相当ですね？」と確認され、その形で作成してもらいました
- （テスト仕様書も書いていません）
テストと修正依頼
-
テストを消化していくと、細かなバグや仕様の誤解が見つかります
-
それらに対して、一つずつ修正依頼を出します
- なるべく一度に複数の指摘をしないようにしました
- 論点を一つに絞った方が、曖昧さのない指示が出しやすかったです
-
ドメイン層だけでなく、UI/UXについても相談しながら調整しました
- ボタン配置
- プレイヤーへのメッセージ文言 など
-
適切に修正してくれました
-
（やはりコードは触っていません、文言のニュアンスを僅かに修正した程度でしょうか）
そして……
- ブラウザゲームが完成しました
- 本当に一行もコードを書きませんでした
振り返り
「自分がコードを書かない」を実感
正直、衝撃でした。
あまりにも夢のような開発体験だったので、
「本当にこれでよいのか？」とClaudeに確認したほどです。
仕様書完成後からゲーム完成までの総制作時間は、
およそ20時間程度だったと思います。
もし自分で実装していたら……想像もできません。
途中で諦めていたかもしれません。
我々の仕事は、ものづくりではなく問題解決である
10年以上前、たしか日経コンピュータで目にし、
ずっと心に残っている言葉です。
AIコーディングは、この考え方を強力に後押しするものだと実感しました。
私は「面白いゲームを作る」という問題解決に集中し、
エネルギーのほぼ全てをそこに注ぐことができました。
これまでの知識もやはり重要
生成されたコードを読むと、「おや？」と思う箇所もあります。
しかし、その点を指摘すると、
丁寧に分析し、修正案を提示してくれました。
Claudeとの対話は、
非常に優秀なパートナーとのペアプログラミング
そのものでした。
「割と複雑なケースのバグだけど対応してくれるのかな？」というケースも丁寧に分析しながら解決してくれました。
AIを使うスキルは必要
Qiitaの記事や同僚の意見を参考にしながら、
以下の点を意識しました。
- AIに理解しやすい仕様書を書く
- いきなり「全部作れ」と言わない
- コミットは細かく行い、いつでも戻れるようにする
AIをうまく活用するには、
それなりの工夫やスキルが必要だと感じました。
ただ、うまく噛み合ったときのアウトプットは、
AI以前の開発とは比較にならないほどの差があります。
参考記事
生成AIだけでゲームを作るプロダクト開発においてエンジニアとして何をしたのか
https://qiita.com/kensuke2_suzuki/items/3efb5ef38e2cc12b3f24
今回の取り組みでもっとも参考にした記事です。
進め方の大枠は、ほぼこの記事にならっています。
この記事がきっかけで、
「自分も体験を共有してみよう」と思い、Qiitaに投稿しました。
ちなみに、これがQiita初投稿です。
余談
業務系システムに携わる人間にとって、
「問題解決にこそ価値がある」という考え方は特に重要だと思います。
一方で今回の体験を通じて、
「ものづくりそのものの楽しさ」 を久しぶりに感じました。
アイデアが形になっていく過程が、
驚くほどストレスなく進みます。
今回、とても良いゲームができたと感じています。
ChatGPTから仕様について褒められたのも、素直に嬉しかったです。
- リポジトリ
https://github.com/mmiyajima2/card-slot/ - ゲームホスティングサイト
https://mmiyajima2.github.io/card-slot/
- Survive First, Win Later -
(勝つことよりも、まずは生き残れ)
これがゲームの副題です。
これもChatGPTからの提案で、とても気に入っています。
追記：その後の話
この記事を書いたあと、ゲーム作りそのものが楽しくなり、以前から温めていた別のアイデアをもう一度AIコーディングで実装しました。
今回は HTML/JS ではなく、Vite + React + TypeScript 構成に挑戦しています。
技術スタックを変えても、「仕様を言語化し、判断に集中する」という体験は変わらず、AIコーディングが再現可能な開発手法だと確信しました。