技術仕様
フロントエンド
| 用途 | 技術 |
|---|
| ビルドツール | Vite |
| UI ライブラリ | React（TypeScript） |
| スタイル | SCSS (Sass) |
| 状態管理 | カスタム React フック（画面遷移とクイズ状態を集中管理） |
ネイティブアプリ
| 用途 | 技術 |
|---|
| アプリ化 | Capacitor（Android） |
| 広告 | Google AdMob（バナー／インタースティシャル） |
| 触覚フィードバック | Capacitor Haptics |
データ・外部サービス
| 用途 | 技術 |
|---|
| クイズデータ | 端末内に同梱した JSON（オフラインで出題） |
| 学習履歴の保存 | ブラウザ／アプリの localStorage |
| 地図タイル | CARTO ラスタタイル |
| 世界遺産などの画像 | 外部提供元（UNESCO 等） |
| 誤り報告フォーム | Web3Forms |
テスト・品質
| 用途 | 技術 |
|---|
| ユニットテスト | Vitest |
| E2E テスト | Playwright |
| 静的解析 | ESLint（Flat Config） |
| 型チェック | TypeScript strict mode |
インフラ・配信
| 用途 | 技術 |
|---|
| Web ホスティング | Vercel |
| Android 配信 | Google Play（App Bundle） |
設計方針
クイズの生成・採点ロジックはドメイン層として切り出し、React はビュー層として
機能します。クイズデータは端末に同梱しているため、地図タイルや世界遺産画像の
表示を除き、ネットワーク接続なしで出題・回答が可能です。