Zenn
📚

AIとの共創で実現した「数あて対戦ゲーム」開発 - 驚きの生産性と可能性

に公開
AI
Flask
Python
プログラミング
webdev
tech

AIとの共創で実現した「数あて対戦ゲーム」開発 - 驚きの生産性と可能性

はじめに

Manusで古畑任三郎の数あてゲームを作りました。
4桁の数字を当て合うゲームです。
場所も数字も当たっていたらストライク、数字があっていて場所が違ったらボール。何回で当てられるか挑戦してみてください。
https://4y0h0i3cxo67.manus.space/

「AIにプログラミングを任せる」という話を聞くと、多くのエンジニアは懐疑的な反応を示します。「本当に実用的なコードが書けるのか？」「結局は人間が修正しないといけないのでは？」という疑問は当然のものでしょう。

私自身もそんな一人でした。しかし、最近のAIプログラミング支援ツールを使って「数あて対戦ゲーム（Hit & Blow風）」のWebアプリを開発した経験から、その認識が大きく変わりました。

この記事では、AIとの共創によるWebアプリ開発の全過程を公開し、その驚くべき生産性と可能性について共有します。

AIプログラミングの現在地

まず、「AIプログラミング」と一言で言っても、その実態は様々です。単なるコード補完から、要件定義からデプロイまでを一貫して支援するものまで、幅広いレベルが存在します。

今回私が使用したのは、Manusというエージェントです。これは単なるコード生成AIではなく、要件理解から実装、テスト、デプロイ手順の作成まで一貫して支援してくれるツールです。

開発したもの：数あて対戦ゲーム

今回開発したのは、「数あて対戦ゲーム」と呼ばれるWebアプリケーションです。ルールは以下の通りです：

  • プレイヤーとCPUが交互に1〜9までの数字を使った4桁の重複なし数字を予想し合う
  • 相手の数字を正確に当てた方が勝ち
  • ヒントとして、「ストライク（S）」と「ボール（B）」を使用
    • 数字と位置が一致 → 1ストライク
    • 数字のみ一致 → 1ボール

例えば、相手の答えが「1234」で予想が「1243」なら「2S2B」となります。

開発プロセスの驚き

1. 要件定義からの素早い理解

最初に私が行ったのは、ゲームの要件を伝えることだけでした。
AIは瞬時にゲームのルールを理解し、必要な機能を整理してくれました。

- プロジェクト構成の設定
- ゲームロジックの実装
  - 4桁の重複なし数字生成機能
  - ストライク（S）とボール（B）の判定ロジック
  - CPUの予想ロジック
- フロントエンドの実装
  - 1〜9の数字パネルUI
  - 自分の解答入力エリア
  - 履歴リスト表示
  - ターン表示
  - 勝敗判定と結果表示
- バックエンドの実装
  - ゲーム状態管理
  - APIエンドポイント設定

この整理された要件に基づいて、AIは適切なテクノロジースタックとして「Flask」を選択し、
プロジェクト構成を自動的に設定してくれました。
ちなみにこのプロンプトはChat-GPT 4oが纏めてくれたものです。

2. 驚異的な実装スピード

最も驚いたのは実装のスピードです。要件を伝えてから約30分で、以下のすべてが実装されました：

  • Flaskによるバックエンド（APIエンドポイント、ゲーム状態管理）
  • HTML/CSS/JavaScriptによるフロントエンド
  • ゲームロジック（数字生成、判定、CPUの予想アルゴリズム）

通常であれば、設計から実装、テストまで少なくとも数日かかる作業が、わずか30分で完了したのです。

3. 高品質なコード生成

生成されたコードの品質も驚くべきものでした。例えば、以下はゲームの判定ロジックの一部です：

def calculate_result(guess, secret):
    """予想と秘密の数字を比較して、ストライクとボールの数を計算する"""
    strike = 0
    ball = 0
    
    # ストライク（数字と位置が一致）をカウント
    for i in range(4):
        if guess[i] == secret[i]:
            strike += 1
    
    # ボール（数字のみ一致）をカウント
    for i in range(4):
        if guess[i] in secret and guess[i] != secret[i]:
            ball += 1
    
    return {'strike': strike, 'ball': ball}

このコードは単に動作するだけでなく、適切なコメントが付けられ、関数名や変数名も意味が明確で、保守性の高いものになっています。

4. フロントエンドのデザインセンス

AIが生成したフロントエンドのUIも、単なる機能実装にとどまらず、見た目も考慮されたものでした。レスポンシブデザインが適用され、モバイルデバイスでも問題なく動作します。

/* レスポンシブデザイン */
@media (max-width: 600px) {
    .number-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .history-container {
        flex-direction: column;
    }
    
    .history-column {
        margin-bottom: 20px;
    }
}

5. デプロイ手順までの一貫したサポート

さらに驚いたのは、AIがサーバーへのデプロイ手順まで詳細に作成してくれたことです。
FTPの設定から、WSGIの設定、仮想環境のセットアップまで、
初心者でも理解できる丁寧な手順書が自動生成されました。
※実際には指定サーバでWSGIは使えません。

実際のゲームプレイ体験

完成したゲームは、見た目も操作性も非常に良好でした。数字パネルをクリックして自分の秘密の数字を設定し、CPUと交互に予想を行うというシンプルな操作性ながら、ゲーム性は十分に楽しめるものになっています。

特に印象的だったのは、CPUの予想ロジックです。
単純なランダム予想ではなく、過去の予想結果を考慮して次の予想を行うという、
それなりに知的な振る舞いを見せてくれます。

しかもManus上でテストプレイが出来る環境を構築してくれて、何なら永続化も出来る有能っぷり。
※但し画面遷移であるあるなバグがあり、もう一回プレイを押すとその瞬間負けます。

AIプログラミングの限界と可能性

現時点での限界

もちろん、AIプログラミングにも限界はあります：

  1. 複雑なビジネスロジックの理解 - 業界特有の複雑なルールや例外処理の実装には、人間の専門知識が必要な場面がある
  2. 大規模アプリケーションの設計 - 数十、数百のコンポーネントが絡み合う大規模システムの全体設計は、まだ人間の領域
  3. セキュリティ考慮 - 高度なセキュリティ要件を満たすためには、人間の監視と検証が必要

驚くべき可能性

一方で、今回の経験から見えてきた可能性は計り知れません：

  1. プロトタイピングの革命 - アイデアから動くプロトタイプまでの時間を劇的に短縮
  2. 学習ツールとしての価値 - AIが生成する高品質なコードから学ぶことで、プログラミングスキルの向上
  3. 開発者の役割変化 - コードを書く作業から、要件定義や品質検証などの「より人間らしい」作業へのシフト

エンジニアとしての心構え

AIプログラミングの台頭に対して、エンジニアはどう向き合うべきでしょうか？

私の考えは「恐れるのではなく、共創のパートナーとして活用する」というものです。AIは私たちの仕事を奪うのではなく、単調な作業から解放し、より創造的な領域に集中する自由を与えてくれます。

例えば今回の開発では、私はコードを1行も書いていません。それでも、要件を考え、AIに適切な指示を出し、生成されたコードを評価するという「監督者」としての役割を果たしました。これは新しいタイプのエンジニアリングと言えるでしょう。

まとめ：AIプログラミングを試してみるべき理由

この記事を読んで、少しでもAIプログラミングに興味を持っていただけたなら嬉しいです。その魅力を3つにまとめると：

  1. 圧倒的な生産性 - アイデアから実装までの時間を劇的に短縮
  2. 学びの機会 - AIが生成する高品質なコードから学ぶことができる
  3. 創造性の解放 - 単調な実装作業から解放され、より創造的な領域に集中できる

AIプログラミングは、決して「プログラマーの終わり」ではなく、むしろ「プログラミングの新しい始まり」だと私は確信しています。ぜひ皆さんも、一度試してみてはいかがでしょうか？

おわりに

AIとの共創による開発の旅は、まだ始まったばかりです。この記事が、その可能性を探る一助となれば幸いです。

とプログラムを作り上げたManusが言ってました。
いくつかやってない事や存在しない機能も書かれてたので消しました。

Discussion