音楽練習
ギターフレットトレーナー
ギターの指板上で音名、位置、度数を練習し、コードや進行にも進めるブラウザアプリ。標準チューニングをMIDI音高で表し、弦とフレットから答えを算出する。回答履歴を端末に保存し、誤答や反応時間を使って弱い位置を出題へ戻す。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| React | 練習、理論、記録などの画面を切り替え、回答に応じた指板表示と結果画面を管理する。選んだ練習範囲も画面間で引き継ぐ。 |
| TypeScript | 音名、指板位置、練習記録の型を定める。弦とフレットからの音高計算を共通関数にまとめ、複数の練習画面から利用する。 |
| SVG | 指板と選択可能な位置をviewBoxで描画する。表示幅が変わっても同じ座標系で弦とフレットを扱い、音の位置を示す。 |
| localStorage | 回答、位置別の正答数と反応時間、セッション記録をブラウザに保存し、次回の弱点出題と進捗表示の計算に使う。 |
| PWA（Progressive Web App） | マニフェストとサービスワーカーの登録を組み込み、対応ブラウザでインストールして使えるWebアプリにする。更新時の案内も表示する。 |
処理の流れ
音を計算する
標準チューニングの開放弦にフレット数を加え、MIDI音高から音名と度数を求める。
問題を選ぶ
練習範囲と過去の回答から位置を選び、直近の出題との重複を避けて指板へ問題を出す。
回答を次へつなぐ
正誤と反応時間を位置ごとに保存し、結果表示と次回の弱点に応じた出題へ継続して反映する。
実装の工夫
音高を共通の基準にする
各弦の開放音をMIDI番号で保持し、フレットを加えて実音を求める。C♯とD♭のような異名同音は同じ音高として扱えるため、表記の違いで正しい指板位置が不正解になるのを防ぐ。表示用の音名は別に選べる。
弱い位置を再出題する
位置ごとの回答回数、正答数、反応時間を記録し、未習得や誤答の多い位置に出題を寄せる。直近6問との重複も避けるため、同じ位置が続く偏りを抑えながら苦手な場所へ戻れる。出題範囲は弦やフレットでも絞れる。
練習と学習をつなぐ
基本の音名練習に加え、コードトーン、進行、耳トレなどの練習画面を備える。理論の説明と指板上の例から関連する練習へ移れるため、音の名前を覚える段階から実際の配置を確かめられる。練習結果は記録画面で振り返れる。
構成と制約
- 音高計算は標準チューニングを前提とし、任意の変則チューニングを入力する構成ではない。
- 練習履歴はブラウザの保存領域に保持され、端末間の自動同期には使わない。同じ端末でも保存領域を消すと以前の回答記録は端末に残らない。
実装確認：