React 19 + Vite 8 + TypeScript でポケモンの「習得技」クイズアプリを作ってみた

概要

作ろうと思ったきっかけとしては友達とポケモンの図鑑クイズをやっていたことがきっかけでした

ポケモンの名前がほとんど出きったので、レベルアップで覚える技を当てるクイズが出したいという流れになり、作ることを決めました

本題

ポケモンデータの収集

PokeAPIというものがあると知りました

Pythonで以下のようなスクリプトを組み、各世代で存在するポケモンについてレベルアップで覚える技構成をjsonファイルに書き出すようにしました

import requests
import json
import time
from tqdm import tqdm

def fetch_all_pokemon_for_version(max_id, version_group_name):
    """
    1番からmax_idまでのポケモンを、指定したタイトルの技構成で取得する
    第1世代までなら max_id=151, version_group_name="red-blue"
    第2世代までなら max_id=251, version_group_name="gold-silver"
    第4世代までなら max_id=493, version_group_name="diamond-pearl"
    """

    all_data = []
    print(f"--- 1番から{max_id}番までのデータを取得中 (基準ソフト: {version_group_name}) ---")

    for p_id in tqdm(range(1, max_id + 1)):
        try:
            # 1. 基本情報
            p_res = requests.get(f"https://pokeapi.co/api/v2/pokemon/{p_id}").json()
            # 2. 日本語名（種族情報）
            s_res = requests.get(f"https://pokeapi.co/api/v2/pokemon-species/{p_id}").json()

            ja_name = next(n['name'] for n in s_res['names'] if n['language']['name'] == 'ja')

            move_list = []
            for m in p_res['moves']:
                # 指定したソフトのレベルアップ技だけを抽出
                details = [d for d in m['version_group_details'] if
                           d['version_group']['name'] == version_group_name and
                           d['move_learn_method']['name'] == 'level-up']

                if details:
                    # 技の日本語名を取得
                    m_res = requests.get(m['move']['url']).json()
                    m_ja_name = next(n['name'] for n in m_res['names'] if n['language']['name'] == 'ja')

                    # 習得レベルを取得
                    level = min(d['level_learned_at'] for d in details)

                    move_list.append({
                        "move_name": m_ja_name,
                        "level": level
                    })

            # 技があるポケモンのみ追加（そのソフトにデータが存在しない場合はスキップされる）
            if move_list:
                all_data.append({
                    "id": p_id,
                    "name": ja_name,
                    "moves": sorted(move_list, key=lambda x: x['level'])
                })

            time.sleep(0.05)

        except Exception as e:
            print(f"ID {p_id} でエラーが発生しました: {e}")

    return all_data

# 実行例：ダイパ世代（第4世代）までのポケモンを「ダイパ」の技構成で取得
data_gen1 = fetch_all_pokemon_for_version(151, "red-blue")
data_gen2 = fetch_all_pokemon_for_version(251, "gold-silver")
data_gen3 = fetch_all_pokemon_for_version(386, "ruby-sapphire")
data_gen4 = fetch_all_pokemon_for_version(493, "diamond-pearl")

with open('pokemon_full_rb.json', 'w', encoding='utf-8') as f:
    json.dump(data_gen1, f, ensure_ascii=False, indent=4)

with open('pokemon_full_gs.json', 'w', encoding='utf-8') as f:
    json.dump(data_gen2, f, ensure_ascii=False, indent=4)

with open('pokemon_full_rs.json', 'w', encoding='utf-8') as f:
    json.dump(data_gen3, f, ensure_ascii=False, indent=4)

with open('pokemon_full_dp.json', 'w', encoding='utf-8') as f:
    json.dump(data_gen4, f, ensure_ascii=False, indent=4)

使用技術

• Frontend: React 19
• Build Tool: Vite 8
• Language: TypeScript 6
• Linter/Formatter: ESLint 10 (Flat Config)
• Styling: Vanilla CSS (CSS Variablesによる共通設計)

デプロイ先はrenderを使用しました

主な機能

世代別クイズ

以下の4つの世代から選択してプレイできます

• 赤・緑（第1世代）
• 金・銀（第2世代）
• ルビー・サファイア（第3世代）
• ダイヤモンド・パール（第4世代）

エンドレスモード

全世代のデータからランダムに出題されます1問でも間違えると即終了のリザルト画面へ自分の知識の限界に挑戦できます

工夫した点

• UI/UX: プログレスバーにより、全10問中の現在地を視覚的に把握できるようにしました
• 拡張性: 世代別のデータが独立したJSONファイルになっているため、第5世代以降の追加も容易な設計にしています
• レスポンシブ: PCでもスマホでも遊びやすい、中央配置のカードレイアウトを採用しました

実際の画面

おわりに

作ろうと思ったものがすぐに作れる良い時代になりました
今後はAIエージェントが作ったものが安全か、意図した通りの挙動を実装できているかを判断できるようになる力が必要だと思うので、実際に使いつつその辺りの能力を伸ばして色々形にしていけたらなと思います