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?

Day 19

AI Coding Challenge Advent Calendar 2025

@zzzzico

[AI Coding Challenge] 国旗クイズアプリを作ってみた！

0
Last updated at Posted at 2025-12-18

はじめに

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

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

:arrow_left: 18日目の記事：あのマトリックスの世界を再現するアプリを作ってみた！
　 20日目の記事：世界地図国名当てゲームアプリを作ってみた！ :arrow_right:

AI アプリ

概要

:speech_balloon:
国旗クイズしたい！ :grinning:

AI 実装

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

:boy_tone1: プロンプト：

国旗当てゲームのアプリを作りたい
ランダムに表示される国旗の国を当てる。全世界対応。

:robot:

世界50カ国の国旗当てゲームを作成しました！

完成したアプリ

できました！

　　:flag_jp: 世界国旗クイズ

:point_down: のリンクからアプリを確認できます:sparkles:

使い方：

  • 世界50カ国の国旗に対応
  • 4択クイズ形式

こんなイメージです。

image.png
image.png

普通に楽しいかも 笑

プログラム解説

ポイントとなるプログラムを解説します。

const FlagQuizGame = () => {
  const countries = [
    { name: '日本', code: 'JP', flag: '🇯🇵' },
    { name: 'アメリカ', code: 'US', flag: '🇺🇸' },
    { name: 'イギリス', code: 'GB', flag: '🇬🇧' },
    { name: 'フランス', code: 'FR', flag: '🇫🇷' },
    { name: 'ドイツ', code: 'DE', flag: '🇩🇪' },
    { name: 'イタリア', code: 'IT', flag: '🇮🇹' },
    { name: 'スペイン', code: 'ES', flag: '🇪🇸' },
    { name: 'カナダ', code: 'CA', flag: '🇨🇦' },
    { name: 'オーストラリア', code: 'AU', flag: '🇦🇺' },
    { name: '中国', code: 'CN', flag: '🇨🇳' },
    { name: '韓国', code: 'KR', flag: '🇰🇷' },
    { name: 'ブラジル', code: 'BR', flag: '🇧🇷' },
    { name: 'メキシコ', code: 'MX', flag: '🇲🇽' },
    { name: 'アルゼンチン', code: 'AR', flag: '🇦🇷' },
    { name: 'インド', code: 'IN', flag: '🇮🇳' },
    { name: 'ロシア', code: 'RU', flag: '🇷🇺' },
    { name: 'トルコ', code: 'TR', flag: '🇹🇷' },
    { name: 'サウジアラビア', code: 'SA', flag: '🇸🇦' },
    { name: '南アフリカ', code: 'ZA', flag: '🇿🇦' },
    { name: 'エジプト', code: 'EG', flag: '🇪🇬' },
    { name: 'オランダ', code: 'NL', flag: '🇳🇱' },
    { name: 'ベルギー', code: 'BE', flag: '🇧🇪' },
    { name: 'スイス', code: 'CH', flag: '🇨🇭' },
    { name: 'スウェーデン', code: 'SE', flag: '🇸🇪' },
    { name: 'ノルウェー', code: 'NO', flag: '🇳🇴' },
    { name: 'デンマーク', code: 'DK', flag: '🇩🇰' },
    { name: 'フィンランド', code: 'FI', flag: '🇫🇮' },
    { name: 'ポーランド', code: 'PL', flag: '🇵🇱' },
    { name: 'ギリシャ', code: 'GR', flag: '🇬🇷' },
    { name: 'ポルトガル', code: 'PT', flag: '🇵🇹' },
    { name: 'アイルランド', code: 'IE', flag: '🇮🇪' },
    { name: 'オーストリア', code: 'AT', flag: '🇦🇹' },
    { name: 'チェコ', code: 'CZ', flag: '🇨🇿' },
    { name: 'タイ', code: 'TH', flag: '🇹🇭' },
    { name: 'ベトナム', code: 'VN', flag: '🇻🇳' },
    { name: 'シンガポール', code: 'SG', flag: '🇸🇬' },
    { name: 'マレーシア', code: 'MY', flag: '🇲🇾' },
    { name: 'インドネシア', code: 'ID', flag: '🇮🇩' },
    { name: 'フィリピン', code: 'PH', flag: '🇵🇭' },
    { name: 'ニュージーランド', code: 'NZ', flag: '🇳🇿' },
    { name: 'チリ', code: 'CL', flag: '🇨🇱' },
    { name: 'コロンビア', code: 'CO', flag: '🇨🇴' },
    { name: 'ペルー', code: 'PE', flag: '🇵🇪' },
    { name: 'ウクライナ', code: 'UA', flag: '🇺🇦' },
    { name: 'イスラエル', code: 'IL', flag: '🇮🇱' },
    { name: 'UAE', code: 'AE', flag: '🇦🇪' },
    { name: 'ナイジェリア', code: 'NG', flag: '🇳🇬' },
    { name: 'ケニア', code: 'KE', flag: '🇰🇪' },
    { name: 'パキスタン', code: 'PK', flag: '🇵🇰' },
    { name: 'バングラデシュ', code: 'BD', flag: '🇧🇩' },
  ];

  const [currentQuestion, setCurrentQuestion] = useState(null);
  const [options, setOptions] = useState([]);
  const [score, setScore] = useState(0);
  const [total, setTotal] = useState(0);
  const [showResult, setShowResult] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [isCorrect, setIsCorrect] = useState(false);

  const generateQuestion = () => {
    const correctAnswer = countries[Math.floor(Math.random() * countries.length)];
    const wrongAnswers = [];
    
    while (wrongAnswers.length < 3) {
      const randomCountry = countries[Math.floor(Math.random() * countries.length)];
      if (randomCountry.code !== correctAnswer.code && !wrongAnswers.includes(randomCountry)) {
        wrongAnswers.push(randomCountry);
      }
    }
    
    const allOptions = [correctAnswer, ...wrongAnswers].sort(() => Math.random() - 0.5);
    
    setCurrentQuestion(correctAnswer);
    setOptions(allOptions);
    setShowResult(false);
    setSelectedAnswer(null);
  };

  useEffect(() => {
    generateQuestion();
  }, []);

  const handleAnswer = (country) => {
    if (showResult) return;
    
    setSelectedAnswer(country);
    setShowResult(true);
    setTotal(total + 1);
    
    if (country.code === currentQuestion.code) {
      setScore(score + 1);
      setIsCorrect(true);
    } else {
      setIsCorrect(false);
    }
  };

  const nextQuestion = () => {
    generateQuestion();
  };

  const resetGame = () => {
    setScore(0);
    setTotal(0);
    generateQuestion();
  };
  • クイズのための国旗を定義します。この配列からランダムに問題を作ります。
  const countries = [
    { name: '日本', code: 'JP', flag: '🇯🇵' },
    { name: 'アメリカ', code: 'US', flag: '🇺🇸' },
    { name: 'イギリス', code: 'GB', flag: '🇬🇧' },
    { name: 'フランス', code: 'FR', flag: '🇫🇷' },
    { name: 'ドイツ', code: 'DE', flag: '🇩🇪' },
    { name: 'イタリア', code: 'IT', flag: '🇮🇹' },
    { name: 'スペイン', code: 'ES', flag: '🇪🇸' },
    { name: 'カナダ', code: 'CA', flag: '🇨🇦' },
    { name: 'オーストラリア', code: 'AU', flag: '🇦🇺' },
    { name: '中国', code: 'CN', flag: '🇨🇳' },
    { name: '韓国', code: 'KR', flag: '🇰🇷' },
    { name: 'ブラジル', code: 'BR', flag: '🇧🇷' },
    { name: 'メキシコ', code: 'MX', flag: '🇲🇽' },
    { name: 'アルゼンチン', code: 'AR', flag: '🇦🇷' },
    { name: 'インド', code: 'IN', flag: '🇮🇳' },
    { name: 'ロシア', code: 'RU', flag: '🇷🇺' },
    { name: 'トルコ', code: 'TR', flag: '🇹🇷' },
    { name: 'サウジアラビア', code: 'SA', flag: '🇸🇦' },
    { name: '南アフリカ', code: 'ZA', flag: '🇿🇦' },
    { name: 'エジプト', code: 'EG', flag: '🇪🇬' },
    { name: 'オランダ', code: 'NL', flag: '🇳🇱' },
    { name: 'ベルギー', code: 'BE', flag: '🇧🇪' },
    { name: 'スイス', code: 'CH', flag: '🇨🇭' },
    { name: 'スウェーデン', code: 'SE', flag: '🇸🇪' },
    { name: 'ノルウェー', code: 'NO', flag: '🇳🇴' },
    { name: 'デンマーク', code: 'DK', flag: '🇩🇰' },
    { name: 'フィンランド', code: 'FI', flag: '🇫🇮' },
    { name: 'ポーランド', code: 'PL', flag: '🇵🇱' },
    { name: 'ギリシャ', code: 'GR', flag: '🇬🇷' },
    { name: 'ポルトガル', code: 'PT', flag: '🇵🇹' },
    { name: 'アイルランド', code: 'IE', flag: '🇮🇪' },
    { name: 'オーストリア', code: 'AT', flag: '🇦🇹' },
    { name: 'チェコ', code: 'CZ', flag: '🇨🇿' },
    { name: 'タイ', code: 'TH', flag: '🇹🇭' },
    { name: 'ベトナム', code: 'VN', flag: '🇻🇳' },
    { name: 'シンガポール', code: 'SG', flag: '🇸🇬' },
    { name: 'マレーシア', code: 'MY', flag: '🇲🇾' },
    { name: 'インドネシア', code: 'ID', flag: '🇮🇩' },
    { name: 'フィリピン', code: 'PH', flag: '🇵🇭' },
    { name: 'ニュージーランド', code: 'NZ', flag: '🇳🇿' },
    { name: 'チリ', code: 'CL', flag: '🇨🇱' },
    { name: 'コロンビア', code: 'CO', flag: '🇨🇴' },
    { name: 'ペルー', code: 'PE', flag: '🇵🇪' },
    { name: 'ウクライナ', code: 'UA', flag: '🇺🇦' },
    { name: 'イスラエル', code: 'IL', flag: '🇮🇱' },
    { name: 'UAE', code: 'AE', flag: '🇦🇪' },
    { name: 'ナイジェリア', code: 'NG', flag: '🇳🇬' },
    { name: 'ケニア', code: 'KE', flag: '🇰🇪' },
    { name: 'パキスタン', code: 'PK', flag: '🇵🇰' },
    { name: 'バングラデシュ', code: 'BD', flag: '🇧🇩' },
  ];
  • useStateで以下のことを管理します。
    currentQuestion 正解となる国のオブジェクト
    options 4択の選択肢（正解＋不正解3つ）
    score 正解数
    total 回答した問題数
    showResult 回答後に結果を表示するか
    selectedAnswer ユーザーが選んだ国
    isCorrect 正解かどうかのフラグ
  const [currentQuestion, setCurrentQuestion] = useState(null);
  const [options, setOptions] = useState([]);
  const [score, setScore] = useState(0);
  const [total, setTotal] = useState(0);
  const [showResult, setShowResult] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [isCorrect, setIsCorrect] = useState(false);
  • countriesの配列からランダムに1つ選びます。正解の国旗とします。
const generateQuestion = () => {
  const correctAnswer = countries[Math.floor(Math.random() * countries.length)];
  const wrongAnswers = [];
  • 不正解の国旗を3つランダムに選びます。
while (wrongAnswers.length < 3) {
  const randomCountry = countries[Math.floor(Math.random() * countries.length)];
  if (randomCountry.code !== correctAnswer.code && !wrongAnswers.includes(randomCountry)) {
    wrongAnswers.push(randomCountry);
  }
}
  • 正解＋不正解をシャッフルします。4択のクイズの選択肢とします。
const allOptions = [correctAnswer, ...wrongAnswers].sort(() => Math.random() - 0.5);

おわりに

  • プロンプト一発でいい感じのアプリができました。
  • 子どもの勉強にもちょうど良いかもですね！

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

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

:arrow_left: 18日目の記事：あのマトリックスの世界を再現するアプリを作ってみた！
　 20日目の記事：世界地図国名当てゲームアプリを作ってみた！ :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
Sign upLogin
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?