はじめに
こんなゲームを作って公開しました。
League of Legendsのチャンピオンをアキネイター形式で当てるゲームです。Teemoが質問を繰り返し、172体のチャンピオンの中からあなたが思い浮かべたチャンピオンを当てにきます。完全無料、ログイン不要です。
この記事で伝えたいのは「Claude Codeを使ったらこんなものが作れた」という話です。自分でコードを書いた量は数行程度。残りはすべてClaude Codeへの指示だけで完成しました。
「Claude Codeって実際どこまでやってくれるの？」という疑問を持っている方に、リアルな体験談をお届けします。
技術スタック
| 層 | 技術 |
|---|---|
| フロントエンド | Vanilla HTML / CSS / JavaScript |
| バックエンド | Cloudflare Workers |
| データ | 静的JSON（Data Dragonより） |
| ホスティング | Cloudflare Pages |
フレームワークなし、DBなし、外部APIなし。Cloudflareの無料枠だけで完結しています。
「なぜLLMを使わないのか」とよく聞かれますが、アキネイター形式は情報理論ベースの質問選択で十分に実現できます。API費用ゼロ・レスポンス遅延ゼロのほうがユーザー体験として優れていると判断しました。
Day1で何が起きたか
最初にClaude Codeに投げた指示の詳細は割愛しますが、
おおむね以下のような内容でした。
「League of Legendsのチャンピオンを当てるアキネイター風ゲームを作りたい。Cloudflare WorkersとPagesで動かす構成で。」
※ 実際の最初のプロンプトはより詳細なものでしたが、趣旨をまとめると概ねこのような内容でした。
30分後、最初のコミットで 1,715行 が生成されていました。
その内訳がこちらです。
-
frontend/index.htmlapp.jsstyle.css：動作するUI一式 -
worker/index.js：Cloudflare Workers上で動くAPI -
worker/champions.json：172体分のチャンピオンデータ（属性付き） -
wrangler.toml：デプロイ設定 -
README.md：プロジェクト説明
仕様を伝えた一言から、設計・実装・データ生成・デプロイ設定まで、すべてが揃った状態で出てきました。自分でゼロから設計していたら数日はかかっていたと思います。
Claude Codeが特に光った3場面
場面① champions.jsonの全属性生成
172体のチャンピオン全員に対して、以下の9属性を付与したJSONを一発で生成しました。
| 属性 | 内容 |
|---|---|
| tags | Fighter / Mage / Support など |
| partype | マナ / エナジー / なし など |
| ranged | 遠距離か近距離か |
| gender | 性別 |
| species | 人間 / ヨードル / 機械 など |
| region | デマーシア / ザウン / アイオニア など |
| vibe | 雰囲気・キャラクター性 |
172体×9属性を手作業で埋めたら数時間仕事です。これが指示一発で出てきたのは素直に驚きました。
場面② 情報理論ベースの質問選択アルゴリズム
アキネイターの核心は「次にどの質問をするか」の選択です。候補を最も均等に二分する質問を動的に選ぶアルゴリズムが、初回コミットから実装されていました。
// 候補プールを最も均等に二分する質問を選ぶ
for (const q of remaining) {
let yes = 0, no = 0;
for (const champ of candidates) {
attrMatches(champ, q.attr, q.match) ? yes++ : no++;
}
const diff = Math.abs(yes - no); // これを最小化
if (diff < bestDiff) { bestDiff = diff; best = q; }
}
二分探索に近い動作で、理論上 log₂(172) ≈ 7.4問で候補を絞り込めます。自分でこのアルゴリズムを設計しながらコーディングしていたら、1〜2日はかかっていたと思います。
場面③ 486行の多言語化リファクタを1セッションで
Day3に「日英バイリンガル対応にしたい」と指示したところ、486行追加・229行変更の大規模リファクタが1セッションで完了しました。
具体的には、すべてのQUESTIONS配列のエントリを以下の形式に変換するリファクタです。
// 変換前
{ text: "このチャンピオンは魔法使いですか？" }
// 変換後
{ text: { ja: "このチャンピオンは魔法使いですか？", en: "Is this champion a mage?" } }
全エントリの変換に加えて、Workerとフロントエンドのlangパラメータのやりとりまでまとめて実装されました。手作業でやると見落としが出やすい作業なので、ここは特に助かりました。
人間が直した箇所
しかし、Claude Codeは万能ではありません。実際に詰まった場面を正直に書きます。
誤字：日本語チャンピオン名が9件間違っていた
champions.jsonはLLMが生成したデータなので、公式の日本語表記と微妙にずれているものが含まれていました。
- { "id": "Taliyah", "name_ja": "タリア" }
+ { "id": "Taliyah", "name_ja": "タリヤ" }
Taliyah / Velkoz / Twitch / Warwick / TwistedFate / Vladimir / Volibear / Tryndamere / Xerathの9体で誤字が見つかりました。公式表記との照合は人間の目が必要でした。
バグ①：20問上限が機能していなかった
MAX_QUESTIONSの定数は定義されていたものの、実際の判定条件に組み込まれていませんでした。
// 修正前：MAX_QUESTIONSが条件に入っていない
const shouldGuess = candidates.length <= 3 || remaining.length <= 3;
// 修正後
const shouldGuess = candidates.length <= 3 || remaining.length <= 3
|| regularAnswers.length >= MAX_QUESTIONS;
動かしてみて初めて気づいたバグです。実際にプレイしてみることの大切さを再確認しました。
ドメイン取得とCloudflareへの設定
一部人間でしかできない作業があり、こちらはClaudeに聞きながら作業を実施しています。
ドメインはさくらインターネットで champ-akinator.com を取得しました。
Cloudflareへの設定もClaude Codeに手順を聞きながら進めました。
大まかな流れは以下の通りです。
- Cloudflareにサイトを追加
- さくらインターネットのネームサーバーをCloudflareのものに変更
- Cloudflare PagesにカスタムドメインとしてChamp Akinatorを登録
DNSの伝播待ちも含めて、特に大きなトラブルなく設定できました。
Claude Codeに「次は何をすればいいか」を都度確認しながら進められたので、
初めての独自ドメイン設定でもスムーズに完了しました。
おわりに
Claude Codeへの指示だけでWebゲームを公開できました。自分で書いたコードは数行、残りはすべてClaude Codeが生成しています。
ただし「AIに任せれば終わり」ではありませんでした。生成されたデータの検証、実際にプレイしてのバグ発見、コードのレビューといった作業は人間が担う必要があります。Claude Codeは「実装する人」であり、「確認する人」は自分自身です。
ゲームはこちらで遊べます。ぜひ試してみてください。
感想・フィードバックはXまで。
👉 https://x.com/tawashi12
本記事はAI生成コンテンツではなく、実際の開発体験をもとに執筆しました。