はじめに
基本情報技術者試験(FE)の勉強、続かなくないですか？
過去問を黙々と解くだけだと、どうしてもモチベが維持できない。
「もっとゲーム感覚で続けられないかな」と思って、
過去問をRPGバトル形式で解ける無料Webアプリを個人開発しました。
🔗 公開URL: https://it-study.jp/
この記事では、開発の背景・技術選定・工夫した点を共有します。
どんなアプリ？
⚔️ IT王国の勇者 ― 基本情報技術者試験RPG
- 正解 = モンスターに10ダメージ
- 不正解 = 勇者がダメージを受ける
- 連続正解で コンボボーナス
- 各ダンジョンのボスを倒すとクリア
- レベルアップで称号がもらえる
- 全12種類の実績トロフィー
10ダンジョン・400問以上を全問解説付きで収録しています。
出題分野（ダンジョン）
| 分野 | 内容 |
|---|---|
| 🏰 基礎理論 | 2進数・論理演算・確率 |
| 🌐 ネットワーク | TCP/IP・DNS・OSI |
| 🔒 セキュリティ | 暗号・攻撃手法 |
| 💾 データベース | SQL・正規化・ACID |
| ⚙️ アルゴリズム | 探索・ソート・計算量 |
| 🖥️ システム | 稼働率・性能評価 |
| 💻 ハードウェア・OS | CPU・メモリ・ページング |
| 🔧 システム開発 | テスト・アジャイル |
| 📋 マネジメント | PMBOK・ITIL |
| 🏢 ストラテジ | 経営・法務・会計 |
技術スタック
シンプルさを最優先しました。
- HTML / CSS / Vanilla JavaScript のみ
- フレームワーク・ライブラリゼロ
- 状態管理は
localStorage - 問題データは静的JSON
- ホスティング: リトルサーバー（共有レンタル）
ビルド工程なし。エディタで保存してFTPでアップロードすれば反映されます。
個人開発の小規模アプリでは、これくらいシンプルでも全然OK。
工夫した点
① 出題ロジック
ただランダム出題ではなく、以下のルールで「学習効果」と「ゲームらしさ」を両立しました。
- カテゴリー内を最大10問ずつシャッフル出題
- セット完了時、不正解があれば復習ラウンドで再出題
- 全問正解（不正解ゼロ）になったら次のセットへ進む
- 全セット消化後にボス出現
- 復習なしでボス撃破すると 「パーフェクト」実績
② 弱点分析ダッシュボード
ダンジョンごとに累計正答率・復習回数を集計し、マップ画面で「次はここを復習しよう」と提案します。
学習者が自分の苦手分野に気付けるように。
③ 問題データの遅延ロード
最初は全問題（約370KB）を一括ロードしていましたが、初期表示が遅くなる問題があったため、
ダンジョン別JSONに分割（各25〜45KB）して、入場時にfetchする方式に変更しました。
async function ensureDungeonLoaded(dungeonId) {
if (QUESTIONS[dungeonId] && QUESTIONS[dungeonId][0]) return;
const res = await fetch(`./questions/${dungeonId}.json`);
QUESTIONS[dungeonId] = await res.json();
}
これで初期通信量を92%削減できました。
④ SEO最適化
PageSpeed Insights 全項目100点を目指して以下を実施：
- メタタグ（title / description / canonical）
- OGP / Twitter Card
- 構造化データ（JSON-LD: WebApplication / LearningResource / FAQPage）
- sitemap.xml / robots.txt
- 静的HTMLでSEO用解説ページを別途用意
-
.htaccessでgzip圧縮・ブラウザキャッシュ - アクセシビリティ（コントラスト比AAA /
<main>ランドマーク）
結果、パフォーマンス/UX/ベストプラクティス/SEO 全項目100点を達成🎉
つまずいた点
Google Search Console のドメイン認証
ドメインプロパティでDNS TXTレコード認証しようとしたら、
リトルサーバーはユーザー自身でDNSレコード追加ができない仕様（サポートに依頼が必要）でした。
URLプレフィックスプロパティ + HTMLタグ認証に切り替えて解決。
ドメインの方向性ミスマッチ
最初は別ジャンルで取得したドメインで公開しましたが、
基本情報技術者試験のサイトと内容が合わなくなり、
途中で it-study.jp にドメイン移転しました。
SEO資産がまだ少ない初期段階だったので、移転コストは最小限で済みました。
振り返り
- ゲーム要素の有無で継続学習率は劇的に変わる（自分自身でも実感）
- フレームワークなしでもこの規模のアプリは余裕で作れる
- SEOは**「やる」より「続ける」**こと
今後やりたいこと
- 問題数をさらに増やす
- 応用情報技術者試験版を作る
- ITパスポート版を作る
- 学習データのバックアップ機能
おわりに
基本情報の勉強でモチベが続かない方、ぜひ使ってみてください。
🔗 遊ぶ: https://it-study.jp/
🔗 学習ガイド: https://it-study.jp/study.html
フィードバック・感想・「こんな問題追加して」などコメント大歓迎です。