この記事について
Python実践試験の対策アプリを、通勤電車の中でChatGPTに作らせた話です。
要するに、開発環境はiPhoneです（笑）
設計、開発、テスト、デプロイは、ほぼすべてChatGPTに任せました。
私が担当したのは、企画、仕様決定、実機テスト、ChatGPTへの修正指示です。詳しい開発方法が気になる方は、続きをご覧ください。
はじめに
Pythonの資格試験対策として、スマートフォンで問題を解ける学習アプリが欲しくなりました。
既存の学習サイトには、地下鉄で電波が悪いとページが切り替わらない、広告が邪魔になる、といったストレスがありました。
そこで、次のように考えました。
- iPhone上で静的サイトをローカル実行すれば、通信環境に左右されないのでは？
- もしかすると、ChatGPTだけでもアプリを開発できるのでは？
そんな思いつきから、実際に作ってみることにしました。
欲しかった機能は次のとおりです。
- Pythonの基礎・実践問題を繰り返し解ける
- 間違えた問題だけを復習できる
- 未回答の問題だけを出題できる
- 章別・カテゴリ別に学習できる
- 学習履歴から弱点を確認できる
- iPhoneのホーム画面からアプリのように起動できる
- 一度読み込めばオフラインでも利用できる
そこで、ChatGPTに相談しながら、Python学習用PWA「PyTrain」を開発しました。
リポジトリはこちらです。
今回の特徴は、自分のPCに開発環境を構築していないことです。
VS Code、Node.js、ローカルWebサーバーなどを使って自分でコードを書くのではなく、ChatGPTに要件を伝え、GitHub上のリポジトリを直接更新してもらいました。
また、CodexやClaude Codeのようなコーディングエージェントではなく、通常の対話型LLMを使って開発した点も特徴です。
私は主に企画、仕様決定、実機テストを担当し、ChatGPTが設計、実装、修正、テスト、デプロイ設定を担当しました。
作ったもの
PyTrainは、Pythonの資格試験対策問題をスマートフォンで学習するためのWebアプリです。
現在は400問を収録しており、実践試験対策を中心とした問題バンクとして利用しています。
主な機能
- 10問、20問、40問、100問、200問、全問から出題数を選択
- 章別・カテゴリ別の出題
- 未回答問題のみ出題
- 選択肢の順番をランダム化
- 回答直後に正解と解説を表示
- 前回間違えた問題だけを復習
- 回答済み問題と未回答問題の管理
- 正答率に応じたランク表示
- 章別・カテゴリ別の学習実績表示
- 正答率から弱点を自動判定
- 実績を横棒グラフまたは表形式で表示
- PWAとしてiPhoneのホーム画面へ追加
- Service Workerによるオフライン利用
学習履歴はサーバーへ送信せず、ブラウザのlocalStorageへ保存しています。
そのため、ログイン機能、バックエンドサーバー、データベースはありません。
システム構成
PyTrainは、フレームワークを使用しないシンプルなWebアプリです。
| 分類 | 使用技術 |
|---|---|
| UI | HTML / CSS |
| アプリ処理 | Vanilla JavaScript |
| 問題データ | JavaScriptオブジェクト |
| データ保存 | Web Storage APIのlocalStorage
|
| PWA | Web App Manifest / Service Worker |
| ホスティング | GitHub Pages |
| CI/CD | GitHub Actions |
| 検証処理 | Python |
| ソース管理 | GitHub |
| 開発 | ChatGPT |
バックエンドを持たない静的サイトなので、GitHub Pagesだけで公開できます。
フォルダ構成
主要な構成は次のとおりです。
PyTrain/
├─ public/
│ ├─ index.html
│ ├─ manifest.webmanifest
│ ├─ sw.js
│ ├─ icons/
│ └─ data/
│ ├─ basic-1.js
│ ├─ basic-2.js
│ ├─ practical-1.js
│ ├─ practical-2.js
│ ├─ scope-fix.js
│ ├─ practical-only.js
│ ├─ level-scope-audit.js
│ ├─ choice-display-fix.js
│ └─ stats-dashboard.js
├─ tools/
│ └─ validate_project.py
└─ .github/
└─ workflows/
└─ pages.yml
publicディレクトリが、そのままGitHub Pagesへ公開されます。
ローカル開発環境を使わない開発フロー
今回の開発では、自分のPC上にリポジトリをクローンしていません。
開発の流れは、ほぼ次の繰り返しでした。
iPhoneでPyTrainを操作
↓
問題点や追加したい機能を見つける
↓
ChatGPTへ日本語で要件を伝える
↓
ChatGPTがGitHub上のコードを確認
↓
ChatGPTがコードを実装・修正
↓
mainブランチへ反映
↓
GitHub Actionsで自動検証
↓
GitHub Pagesへ自動デプロイ
↓
iPhoneで動作確認
一般的な開発では、ローカル環境でコードを書き、テストしてからGitHubへpushします。
今回は、GitHubをソースコード置き場としてだけでなく、開発環境、検証環境、デプロイ環境として利用しました。
ChatGPTに担当してもらったこと
今回、ChatGPTは「開発支援ツール」ではなく、実際の開発者として利用しました。
主に担当してもらった作業は次のとおりです。
アプリの初期実装
要望を自然言語で伝え、HTML、CSS、JavaScriptを使ったクイズアプリを作成してもらいました。
PWA対応
iPhoneのホーム画面からアプリとして起動できるように、以下を実装してもらいました。
manifest.webmanifest- PWA用アイコン
- Service Worker
- オフラインキャッシュ
- iPhoneのセーフエリア対応
- スマートフォン向けレスポンシブ表示
問題データの作成と整理
問題文、4択の選択肢、正解、解説、カテゴリを持つ問題データを作成しました。
問題データは、おおむね次の形式です。
{
q: "問題文",
choices: [
"選択肢A",
"選択肢B",
"選択肢C",
"選択肢D"
],
answer: 0,
explanation: "解説",
category: "カテゴリ名"
}
正解位置が特定の選択肢へ偏らないように、AからDまでの正答数も調整しています。
学習履歴の実装
localStorageを使い、以下の情報を端末内へ保存しています。
- 回答済み問題
- 各問題の回答回数
- 各問題の正解回数
- 累計正答数
- 最高正答率
- 前回間違えた問題
- 学習設定
実績ダッシュボードの実装
問題を解くだけでなく、自分の弱点を確認できるようにしました。
章別・カテゴリ別に、次の情報を表示できます。
- 全問題数
- 回答済み問題数
- 未回答問題数
- 学習進捗率
- 累計解答数
- 累計正解数
- 正答率
- 最も正答率が低い項目
当初はレーダーチャートを実装しましたが、項目数が増えると読みにくくなったため、横棒グラフへ変更しました。
さらに、グラフだけでなく、数値を確認しやすい表形式にも切り替えられるようにしています。
私が担当したこと
コードそのものはChatGPTが作成しましたが、人間側の作業がなくなったわけではありません。
私が担当したのは、主に次の部分です。
何を作るか決める
最初に「Pythonの問題を解けるアプリが欲しい」という目的を決めました。
その後、実際に使いながら、次のように仕様を追加していきました。
- 間違いだけ復習したい
- 未回答だけ出題したい
- 章ごとに問題を選びたい
- 成績をグラフで見たい
- 自分の弱点を知りたい
- 成績に応じてランクを表示したい
期待する動作を説明する
ChatGPTに「表示がおかしい」と伝えるだけでは、正確な修正はできません。
次のような情報を伝える必要がありました。
実行した操作：
期待した動作：
実際に起きた動作：
修正してほしい箇所：
維持してほしい既存機能：
これは通常のシステム開発における、要件定義や不具合報告と同じです。
iPhoneで実機テストする
GitHub Pagesへ反映されたアプリをiPhoneで操作し、次の点を確認しました。
- ボタンを押しやすいか
- 画面内に情報が収まっているか
- ホーム画面から起動できるか
- オフラインで問題を開けるか
- 更新後に新しい画面が表示されるか
- 学習履歴が正しく保存されるか
- 問題数や出題条件が正しいか
今回の役割分担は、次のような形だったと思います。
私
├─ 企画
├─ 要件定義
├─ 仕様決定
├─ 受け入れテスト
└─ 改善点の判断
ChatGPT
├─ 設計
├─ コーディング
├─ GitHub上のファイル編集
├─ バグ修正
├─ リファクタリング
├─ 検証処理の実装
└─ デプロイ設定
私はプロダクトオーナー兼テスターで、ChatGPTが開発者という構図です。
GitHub Actionsによる自動検証
ローカル環境を使わないため、変更後の検証はGitHub Actionsで実行しています。
mainブランチへ変更が反映されると、次の処理が実行されます。
リポジトリをチェックアウト
↓
validate_project.pyを実行
↓
検証に成功したらpublicをアップロード
↓
GitHub Pagesへデプロイ
検証スクリプトでは、以下を確認しています。
- 必須ファイルが存在するか
- 問題数が正しいか
- 各問題に必要な項目があるか
- 選択肢が4件あるか
- 同じ選択肢が重複していないか
- 正解番号が0から3の範囲か
- 問題文が重複していないか
- 解説やカテゴリが空になっていないか
- 正答位置が偏っていないか
- ManifestやService Workerが存在するか
- 必要なファイルがオフラインキャッシュ対象に含まれているか
つまり、ChatGPTがコードを変更しても、最低限のデータ構造やPWA構成を壊した状態では公開されないようにしています。
苦労した点
Service Workerのキャッシュ
PWAでは、一度読み込んだファイルが端末内へキャッシュされます。
これはオフライン利用には便利ですが、更新後も古いJavaScriptやHTMLが表示される問題が起きます。
対策として、キャッシュ名をバージョンごとに変更し、古いキャッシュを削除する処理を追加しました。
また、HTMLやJavaScriptはネットワーク上の最新版を優先し、取得できない場合にキャッシュを利用する方式へ調整しています。
問題データの品質
400問を収録すると、単純な構文エラー以外にも次の問題が発生します。
- 問題文が重複する
- 選択肢が重複する
- 正答位置が偏る
- 解説と正解が一致しない
- 基礎問題と実践問題の難易度が合わない
- カテゴリや章の分類が不適切になる
そのため、問題数だけでなく、問題の構造や重複を機械的に検証する仕組みが必要になりました。
仕様変更時の学習履歴
問題を別カテゴリや別レベルへ移動すると、問題IDが変わる場合があります。
問題IDが変わると、過去の回答履歴と新しい問題を関連付けられません。
そこで、問題バンクの構成を変更する際には、古いIDで保存されているlocalStorageのデータを新しいIDへ移行する処理も追加しました。
機能追加によるコードの複雑化
短期間で機能を追加したため、追加JavaScriptによって既存画面を拡張する構成が増えました。
この方法は、既存コードを大きく変更せず機能を追加できるメリットがあります。
一方で、長期的には次の問題が発生します。
- 読み込むJavaScriptファイルが増える
- 実行順序への依存が強くなる
- どのファイルが画面を変更しているか分かりにくい
- Service Workerのキャッシュ対象管理が複雑になる
今後さらに機能を増やす場合は、アプリ本体、データ管理、画面表示、実績管理をモジュール単位に整理する必要があります。
ChatGPTだけで開発して分かったこと
簡易Webアプリは実装できる
今回の開発によって、ChatGPTを使えば、用途を限定したWebアプリを実際に完成させられることが分かりました。
特に、次のようなアプリは相性が良いと思います。
- 個人用学習アプリ
- 社内向け簡易ツール
- データ入力・集計ツール
- チェックリスト
- クイズアプリ
- プロトタイプ
- アイデア検証用アプリ
コーディング以外の能力が重要になる
コードをChatGPTが書く場合でも、人間側には次の能力が必要です。
- 作りたいものを決める
- 必要な機能を整理する
- 期待する動作を言語化する
- 不具合を再現する
- 修正内容を評価する
- どこまで作れば完成かを判断する
コードを書く比重が下がる一方で、要件定義、テスト、レビュー、優先順位付けの比重が上がります。
動いたことと、正しいことは別
ChatGPTが生成したコードがエラーなく動いても、仕様どおりとは限りません。
例えば、グラフが表示されていても、集計対象や計算式が間違っている可能性があります。
問題が400問表示されていても、重複問題や誤答が含まれている可能性があります。
そのため、最終的な確認は人間が行う必要があります。
ChatGPTは開発者になれるが、プロダクトオーナーは必要
今回、ChatGPTは設計やコーディングだけでなく、GitHub上の修正とデプロイ設定まで担当しました。
ただし、ChatGPT自身が「この機能は本当に必要か」「この状態で完成とするか」を決めるわけではありません。
人間が目的と優先順位を決め、ChatGPTが実装する形が、現時点では最も使いやすいと感じました。
今後の課題
PyTrainは、自分で学習するための簡易Webアプリとしては、ひとまず必要な機能が揃いました。
今後さらに改善する場合は、次のような対応が考えられます。
- 問題データと画面処理の分離
- 問題内容の継続的な精査
- 学習履歴のバックアップ・復元
- 複数端末間での履歴同期
- アクセシビリティ改善
ただし、認証やクラウド同期を追加すると、バックエンド、データベース、セキュリティ設計が必要になります。
個人用PWAとしてシンプルさを維持するのか、複数端末対応のサービスへ発展させるのかは、分けて考える必要があります。
まとめ
PyTrainの開発では、自分のPCにローカル開発環境を作らず、ChatGPTとGitHubだけでWebアプリを実装しました。
使用した主な構成は次のとおりです。
ChatGPT
↓ コードを実装・修正
GitHub
↓ mainブランチへ反映
GitHub Actions
↓ 自動検証
GitHub Pages
↓ 自動公開
iPhone
↓ 実機テスト
ChatGPTへ改善内容を伝える
今回分かったのは、ChatGPTでも簡単なWebアプリの開発ができるということです。
正直、トークンを気にしなくていいのはかなり快適でした。
LLMがHTML、CSS、JSをここまで高精度に書けるのであれば、
人間には、何を作るかを決め、仕様を説明し、完成したものが正しいかを評価ことに集中できます。
今回の開発では、私はまったくコードを書いていません。
それでも、企画から実装、テスト、公開まで進め、実際に利用できるPWAを完成させることができました。
PyTrainそのものが完成したことに加えて、ChatGPTを開発者として使えば、個人でも簡易Webアプリを形にできると確認できたことが、今回の最も大きな成果でした。