【Flutter】GitHub Copilotの各モデルでポケモン / ハリポタ / 犬の絵合わせゲームを作成してみた（ソースコード公開）
はじめに
こんにちは、Flutterエンジニアのおまつです！
今回はGitHub CopilotのAgentモードで、3種類のモデルを比較してみた記事になります。
それぞれのモデルに「絵合わせゲーム」のソースコードを丸ごと自動生成してもらって中身を検証します。
文末にGitHubのURLも公開しているので、良ければダウンロードしてみてください！！
GitHub Copilotで自動生成されたソースコードが気になる方、
参考にして別のアプリを作りたい方など是非ご自由に使用ください！
ポケモン、ハリーポッター、犬の画像が取得できるフリーAPIを使用するので、
そこらへんが気になる方もぜひぜひ〜〜〜！！
GitHub Copilotの概要
そもそもAgentモードとは
2025年に正式リリースされたGitHub Copilotの新モードです。
Agentモードでは、既存モードだと実現できない自律的な開発タスク実行をしてくれます。
要するに「こんなアプリが作りたい」という情報から、プロジェクトの中身を丸ごと書き換えてくれます。
- [Askモード]
チャットでのコード提案や説明をしてくれる。（既存モード） - [Editモード]
指定したファイルに対してのコード補完をしてくれる。（既存モード） - [Agentモード]
目標を与えると、Copilotが自律的に複数ステップを実行し、コードを直接変更・検証までしてくれる。（新モード）
使用するモデル
今回使用するAgentモードのモデルは下記の3つとなります。
どれもプレミアムモデルで、かなり高性能と言われているものです。
- GPT-5
- Claude Sonnet 4.5
- Gemini 2.5 Pro
アプリの概要
基本的な仕様
- 縦5×横5=25枚のカードから2枚をめくって、同じ絵を合わせる簡単な絵合わせゲームです。
絵の枚数は、あえて奇数にしてみます。 - 絵合わせの画像はフリーのAPIから取得します。
比較するのであれば条件は同じにする必要がありますが、
同じAPIを呼んでも詰まらないという私個人のエゴからモデル毎に違うAPIを呼びます。
Copilotのモデルと使用するAPIの組み合わせ
| モデル名 | 作成するアプリ | 使用するAPI |
|---|---|---|
| GPT-5 | ポケモンの絵合わせ | https://pokeapi.co |
| Claude Sonnet 4.5 | ハリーポッターの絵合わせ | https://hp-api.onrender.com |
| Gemini 2.5 Pro | 犬の絵合わせ | https://dog.ceo/dog-api |
画面構成
画面はシンプルに、下記3つを作成します。
- スタート画面
- 絵合わせ画面と履歴画面に遷移できる最初の画面。
- 絵合わせ画面
- 5×5の絵合わせができる。
- 履歴画面
- どの絵を何回揃えたかを確認できる。
- SharedPreferencesで管理してアプリを終了しても保持する。
状態管理 / アーキテクチャ周り
- アーキテクチャ：レイアードアーキテクチャとする。lib配下のフォルダ構成は下記の通り。
- Presentation（UIページのファイルを配置）
- Domain（UIページ毎のコントローラーのファイルを配置）
- Infrastructure（API通信、repository周りを配置）
- provider（アプリ全体で使用するproviderなどを配置）
- 状態管理：riverpod + freezed（riverpod_generatorも使用する）
- 画面遷移：go_router（go_router_builderも使用する）
- API通信：Retrofit、Dio
Copilotへの指示文章
Copilotへの指示文章は下記の通りです。
上記のアプリ概要に記載したような内容をまとめています。
※Copilot初心者なのもあり、もっと具体的な指示が出来たなぁと後々後悔しています。
基本的な文章は変わりませんが、
ハリーポッターのAPIは呪文一覧を出力できるとのことだったので、
ついでにおまけ画面として作成してもらいました。
指示文章の全文（ポケモンの絵合わせ）
ポケモンの絵合わせアプリを作成してください。
■言語：Flutter(Dart)
■画面構成：
- スタート画面（絵合わせ画面と履歴画面に遷移できる）
- 絵合わせ画面（5×5のポケモン絵合わせができる）
- 履歴画面（どのポケモンを何回揃えたかを確認できる。SharedPreferencesで管理してアプリを終了しても保持する）
■画面向き：縦画面固定
■状態管理：下記を使用してください。（riverpod+freezed構成）
- hoos_riverpod
- flutter_hooks
- riverpod_annotation
- riverpod_generator
- freezed
- freezed_annotation
■画面遷移：下記を使用してください。（GoRouter構成）
- go_router
- go_router_builder
■画像、名前取得：下記のAPIを使用してください。RetrofitとDioを使って通信してください。
- https://pokeapi.co
■アーキテクチャ：レイアードアーキテクチャでlib配下は下記のフォルダ構成とします。
- Presentation（UIページのファイルを配置）
- Domain（UIページ毎のコントローラーのファイルを配置）
- Infrastructure（API通信、repository周りを配置）
- provider（アプリ全体で使用するproviderなどを配置）
■テーマカラー：水色のグラデーション
■APIなどのエラー時：画面にメッセージとリトライボタンを表示
指示文章の全文（ハリーポッターの絵合わせ）
ハリーポッターの絵合わせアプリを作成してください。
■言語：Flutter(Dart)
■画面構成：
- スタート画面（絵合わせ画面、履歴画面、おまけ画面に遷移できる）
- 絵合わせ画面（5×5のハリーポッター絵合わせができる）
- 履歴画面（どのキャラを何回揃えたかを確認できる。SharedPreferencesで管理してアプリを終了しても保持する）
- おまけ画面（呪文一覧が確認できる）
■画面向き：縦画面固定
■状態管理：下記を使用してください。（riverpod+freezed構成）
- hoos_riverpod
- flutter_hooks
- riverpod_annotation
- riverpod_generator
- freezed
- freezed_annotation
■画面遷移：下記を使用してください。（GoRouter構成）
- go_router
- go_router_builder
■画像、名前取得：下記のAPIを使用してください。RetrofitとDioを使って通信してください。
- https://hp-api.onrender.com/api
■アーキテクチャ：レイアードアーキテクチャでlib配下は下記のフォルダ構成とします。
- Presentation（UIページのファイルを配置）
- Domain（UIページ毎のコントローラーのファイルを配置）
- Infrastructure（API通信、repository周りを配置）
- provider（アプリ全体で使用するproviderなどを配置）
■テーマカラー：水色のグラデーション
■APIなどのエラー時：画面にメッセージとリトライボタンを表示
指示文章の全文（犬の絵合わせ）
犬の絵合わせアプリを作成してください。
■言語：Flutter(Dart)
■画面構成：
- スタート画面（絵合わせ画面、履歴画面に遷移できる）
- 絵合わせ画面（5×5の犬の絵合わせができる）
- 履歴画面（どの犬種を何回揃えたかを確認できる。SharedPreferencesで管理してアプリを終了しても保持する）
■画面向き：縦画面固定
■状態管理：下記を使用してください。（riverpod+freezed構成）
- hoos_riverpod
- flutter_hooks
- riverpod_annotation
- riverpod_generator
- freezed
- freezed_annotation
■画面遷移：下記を使用してください。（GoRouter構成）
- go_router
- go_router_builder
■画像、名前取得：下記のAPIを使用してください。犬種はエンドポイントから取ってください。RetrofitとDioを使って通信してください。
- https://dog.ceo/dog-api/
■アーキテクチャ：レイアードアーキテクチャでlib配下は下記のフォルダ構成とします。
- Presentation（UIページのファイルを配置）
- Domain（UIページ毎のコントローラーのファイルを配置）
- Infrastructure（API通信、repository周りを配置）
- provider（アプリ全体で使用するproviderなどを配置）
■テーマカラー：水色のグラデーション
■APIなどのエラー時：画面にメッセージとリトライボタンを表示
生成結果と評価
3つのモデル全て、10〜15分程度で生成してくれました。
これも全てに言えることですが、そのままビルドできる状態ではなくお作法的なコード不備が一部ありました。
軽く修正するだったので10分程度かなと思います。
要するに3つのモデル全て生成時間＋一部コード修正を踏まえても、
30分もかからず絵合わせゲームが完成しました。
では、実際に動かしてみた動作とソースコードで評価してみましょう。
動作の評価
指示していない部分でちょっとしたUIの違いなどはありましたが、
機能としては3つのモデル全てちゃんとした絵合わせゲームが出来ていました！！
API通信周り、絵合わせのロジックなども問題なしです！！
| モデル名 | スタート画面 | 絵合わせ画面 | 履歴画面 | おまけ画面 |
|---|---|---|---|---|
| GPT-5(ポケモン) | ○ | ○ | ○ | - |
| Claude Sonnet 4.5(ハリポタ) | ○ | ○ | ○ | ○ |
| Gemini 2.5 Pro(犬) | ○ | ○ | ○ | - |
[補足事項]
25枚にしたので、GPT-5(ポケモン)は最初から1枚が表になっていてモンスターボール固定、
他2つのモデルは絶対に揃わない1枚絵がダミーで用意されていました。
-
GPT-5生成 - ポケモンの絵合わせゲーム
-
Claude Sonnet 4.5生成 - ハリーポッターの絵合わせゲーム
-
Gemini 2.5 Pro生成 - 犬の絵合わせゲーム
ソースコードの評価
こちらも指示外の部分で作り方に多少の違いはありましたが、
3つのモデル全て指定した条件は満たしていたかなと思います。
RiverpodやGoRouterはしっかりとGeneratorが使用されていたり、
Domainのコントローラーだけでなく、repositoryやrouter周りもRiverpodで管理されていました。
| モデル名 | アーキテクチャ構成 | 状態管理 | 画面遷移 |
|---|---|---|---|
| GPT-5(ポケモン) | ○ | ○ | ○ |
| Claude Sonnet 4.5(ハリポタ) | ○ | ○ | ○ |
| Gemini 2.5 Pro(犬) | ○ | ○ | ○ |
総評
- 今回検証した3つのモデルは全て高性能と言われているだけあって、
簡単なアプリであれば問題なく期待するソースコードを生成してくれました。
正直今回の検証では、3つのモデルに優劣はつけられませんでした。 - ガチガチに動作仕様やUI仕様を固めて長文で指示出しをすれば、
モデル毎の違いも少なくもっと精度の高いアプリが作れるのかなと感じました。 - 逆に指示していない部分はCopilotがいいように解釈して生成してくれるため、
一度生成してから手動だったり、再度Copilotに頼るなりでブラッシュアップするのも良いと思います。 - 現在は人間がコーディングしながらAIに補助してもらう印象がありますが、
まもなく立場が逆転してAIがコーディングして人間が多少の補助をする時代が来るかもしれませんね。
備考（生成したソースコード）
気になる方は是非ダウンロードしてみてください！
GPT-5生成 - ポケモンの絵合わせゲーム
Claude Sonnet 4.5生成 - ハリーポッターの絵合わせゲーム
Gemini 2.5 Pro生成 - 犬の絵合わせゲーム
Discussion