技術仕様
フロントエンド
| 用途 | 技術 |
|---|---|
| ビルドツール | Vite |
| UIライブラリ | React(TypeScript) |
| スタイル | SCSS (Sass) |
| ドラッグ&ドロップ | @dnd-kit/core, @dnd-kit/sortable |
テスト・品質
| 用途 | 技術 |
|---|---|
| E2Eテスト | Playwright |
| 静的解析 | ESLint(Flat Config) |
| 型チェック | TypeScript strict mode |
インフラ・デプロイ
| 用途 | 技術 |
|---|---|
| Webホスティング | Vercel |
| Androidアプリ化 | Capacitor |
ゲームロジック
ゲームの状態管理はフレームワークに依存しない純粋な TypeScript クラス(Gameクラス)として実装されており、
React はビューレイヤーとしてのみ機能しています。
状態が変化するたびにコールバック経由でReactに通知し、再レンダリングが行われます。
ドラッグ&ドロップによる牌の並べ替えには dnd-kit を採用し、 ポインター操作とタッチ操作の両方に対応しています。