0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[AI Coding Challenge] 世界地図国名当てゲームアプリを作ってみた!

0
Last updated at Posted at 2025-12-19

はじめに

毎日ひとつ、AIアプリをつくる。
日替わりでテーマに沿って小さなアプリを開発します。Claudeで。

この記事は :calendar_spiral: AI Code Challenge Advent Calender 2025 の 20 日目の記事です!

:arrow_left: 19日目の記事:国旗クイズアプリを作ってみた!
  21日目の記事:麻雀の点数計算アプリを作ってみた! :arrow_right:

AI アプリ

概要

:speech_balloon:
世界地図から国名を当てるゲームを作りたい! :grinning:

AI 実装

Claude Desktopでプロンプトを与えて実装してもらいます。

:boy_tone1: プロンプト:

世界地図国当てゲームのアプリを作りたい
白地図で国名を入力して当てる

:robot:

世界地図国当てゲームを作成しました!

:boy_tone1: プロンプト:

世界地図の白地図から国をクリックして国名を入力するようにしたい

:robot:

地図上の国をクリックして国名を入力する方式に変更しました

:boy_tone1: プロンプト:

(国の形が雑だな。)
世界地図はもっと詳細な地図にして

:robot:

より詳細な世界地図に更新しました

完成したアプリ

できました!

  :map: 世界地図国当てゲーム
  (地図の精度が良くなかったので非公開です💦)

使い方:

  1. 地図上の国をクリック
  2. 表示されたモーダルに国名を入力
  3. Enterキーまたは「回答」ボタンで送信
  4. 正解すると地図に国名が表示されます

こんなイメージです。

image.png

世界地図のクオリティー...世界地図を選択できるようにするのは難しかったか。

国をクリックして国名を入力します。

image.png

正解するとこんな感じです。

image.png

...うん、たぶん当たってたんだろう。


Claudeではなく、Replitを使ってみました。

AI 実装 v2

:boy_tone1: プロンプト:

白地図から国を選択して国名を入力して当てるゲームを作って

:robot:

ゲームの機能として、クリックした国がハイライトされ、正解・不正解の判定、スコア表示などを実装します。

:boy_tone1: プロンプト:

Start building

:robot:

それでは実装を開始します。

完璧です。全てのコンポーネントが揃いました。次はTask 2: バックエンドの実装に進みます。

Task 2が完了しました。次にTask 3に進み、統合とテストを行います。

Architectから重大な問題が指摘されました。GamePageのロジックに欠陥があり、ユーザーがクリックした国ではなく、ランダムに取得した国で回答を検証していました。これを修正します。

素晴らしい!Architectから合格評価を受けました。次のステップとして、エラーハンドリングを改善し、国データの取得に失敗した場合のフィードバックを追加します。

次に、エンドツーエンドテストを実行して、ゲームフローが正しく機能することを確認します。
Pasted image 20251121194718.png

:boy_tone1: (すごい!ブラウザで動作確認してる!)

:robot:

素晴らしい!テストが成功しました。

完璧です!全てのタスクが完了しました。世界地理クイズゲームが完全に動作しています。

:boy_tone1: (すごい!設計、実装、テストの全ての工程をやってくれた!)

完成したアプリ v2

できました!

  :map: 世界地図国当てゲームv2
  (ReplitのFreeプランで作成したため非公開です💦)

使い方:

  1. 地図上の国をクリック
  2. 表示されたモーダルに国名を入力
  3. Enterキーまたは「回答する」ボタンで送信
  4. 正解すると地図に国名が表示されます

こんなイメージです。

image.png

アメリカを選択して「アメリカ」と入力しました。・・・アメリカ合衆国が正解でした。

image.png

アプリの動きはいい感じです!

スマホの表示確認もできるみたいです。

image.png

おわりに

  • Claudeだと世界地図のクオリティーが残念すぎました。笑
  • 初めてReplitを使ってみました。
    ブラウザ操作をして動作確認しているのはすごいですね。
    Freeプランではアプリは公開できないけど、お試しにはちょうど良いです。

AI で楽しいアプリ開発を!!

この記事は :calendar_spiral: AI Code Challenge Advent Calender 2025 の 20 日目の記事です!

:arrow_left: 19日目の記事:国旗クイズアプリを作ってみた!
  21日目の記事:麻雀の点数計算アプリを作ってみた! :arrow_right:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?