ピアノアプリ（名称未定） — 技術解説

AI生成: この技術解説はプロジェクトのソースコードからAIが作成したもので、不正確な記述を含む場合があります。

制作途中の練習ツール。スキルそのものをゲームにすることで、日々の練習を習慣化しようとする4つのピアノスキルゲームです。モデルは『タイピング・オブ・ザ・デッド』から借りています。たまたまピアノが絡むゲームを遊ぶのではなく、ピアノを弾くこと自体がゲームになっています。計画している4つのメカニクスは、視覚的な読譜、指の独立性ドリル、ベースパターンリズム、コードQTEです。各セッションは詳細なパフォーマンスデータをバージョン管理されたlocalStorageスキーマに書き込み、長期的には弱点の可視化と上達の追跡を狙っています。完成品を出すというより、レンダリングとタイミングのスタックを学ぶために作っているプレアルファ段階のプロジェクトです。

アーキテクチャ

Vite + React 19上のシングルページアプリです。各ゲームでブラウザは同時に3つのことを行います。楽譜のレンダリング、サンプル音源の再生、そしてリアルタイムのゲームループです。そのため各ゲームは本質的に、ローカルストレージへ永続化するスコアリング層に入力を供給する入力ソースになっています。

flowchart TD
    accTitle: ピアノ練習アプリのゲーム別データフロー
    accDescr: キーボードまたはポインタ入力が React と PixiJS のゲームループを駆動します。ループは VexFlow で楽譜、smplr でピアノ音源を扱い、両者がスコアリング層に供給して、セッション単位の指標をバージョン管理された localStorage に永続化します。
    IN["キーボード / ポインタ入力"]
    LOOP["ゲームループ (React + PixiJS)<br/>ゲーム別メカニク<br/>読譜 / ドリル / リズム / コードQTE"]
    VF["VexFlow 5<br/>楽譜"]
    SM["smplr<br/>ピアノ音源"]
    SCORE["スコアリング<br/>セッション単位の指標"]
    LS[("localStorage<br/>バージョン管理スキーマ")]
    IN --> LOOP
    LOOP --> VF
    LOOP --> SM
    VF --> SCORE
    SM --> SCORE
    SCORE --> LS

VexFlow 5は、出題が変わるたびに楽譜をリアルタイムでレンダリングします。smplrはピアノのサンプル音源の再生を担い、弾いた音や期待される音を鳴らせるようにします。宇宙テーマのゲームはDOMではなくPixiJS 8でレンダリングしています。このメカニクスはReactの再レンダリングではなく、フレーム単位のキャンバスループを必要とするためです。

4つのゲーム

4つのゲームに分けている狙いは、それぞれが異なるスキルを切り分けることにあります。こうすることで、収集したデータが弱点を「ピアノ」全般にではなく、特定の次元に紐づけて説明できるようになります。

視覚的な読譜 — 楽譜を読んで応答し、正確さとレイテンシで採点。
指の独立性ドリル — 指の独立した制御を強いるパターン。
ベースパターンリズム — 繰り返すベースラインに対するタイミング。
コードQTE — クイックタイムのコード出題。

メカニクス、採点の重み付け、localStorageスキーマはいずれもまだ流動的です。スキーマをバージョン管理しているのは、まさにゲームの設計中に変化することを見込んでいるからです。バックエンドはありません。すべてクライアントサイドで動作し、ローカルに永続化されます。