技術仕様

フロントエンド

用途技術
ビルドツール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 を採用し、 ポインター操作とタッチ操作の両方に対応しています。