※ 本記事は、以前投稿した 【Python/Flask】TDDとCIで構築する、Mac System 7風レトロ英語タイピングアプリ開発記 の続編（機能拡張編）です。
1. はじめに
約30年前に親しまれていたMac版『Typing Tutor』のオマージュとして、レトロな世界観を持ちつつモダンな開発手法を取り入れた英語タイピング学習Webアプリケーション「Typing Tutor」を自作しました。
本記事では、テスト駆動開発（TDD）による堅牢なバックエンド実装からGitHub Actionsを用いたCI環境の構築、さらにはWeb Audio APIによるリアルタイム効果音やChart.jsによるスコア可視化までの実装プロセスをまとめています。
2. アプリの概要と技術スタック
主な機能
-
リアルタイム打鍵判定 & WPM/正確率計算:
Strict/Freeモード対応。 - System 7 レトロ UI テーマ: 90年代クラシックMac風デザインと Modern Dark テーマの即時切り替え。
- オンスクリーンキーボード & 指位置ガイド: 次に打つべきキーと推奨指位置をハイライト。
- Web Audio API によるリアルタイム効果音: 軽快な打鍵音とミス時の警告音をブラウザ側で遅延なく音声合成。
- Chart.js によるスコア推移グラフ: 練習ごとの WPM（入力速度）と Accuracy（正確率）の向上推移を折れ線グラフで表示。
- JSON 管理による段階的レッスン（Level 1〜5）: 単文から長文段落、Python/JSコード（Level 5）まで外部JSONで柔軟に拡張。
技術スタック
- バックエンド: Python 3.11+, Flask (RESTful API)
-
テスト / 品質:
pytest, GitHub Actions (CI) - フロントエンド: HTML5, CSS3, JavaScript (Fetch API, Web Audio API, Chart.js)
-
データ管理: JSON (
app/data/texts.json),localStorage
3. テスト駆動開発（TDD）と柔軟なデータ設計
アプリの堅牢性を保つため、コアロジックはすべて pytest による TDD プロセスで構築しました。
練習テキストは外部 JSON ファイル（app/data/texts.json）で管理し、app/text_manager.py で動的に取得する構造を採用。長文（Level 4）やコード（Level 5）の追加も容易で、テストケース（tests/test_text_manager.py）により安全性が担保されています。
# test_text_manager.py のテストケース例
def test_get_lesson_text_valid_levels():
for level in ["1", "2", "3", "4", "5"]:
text = get_lesson_text(level=level, category="default")
assert isinstance(text, str)
assert len(text) > 0
4. フロントエンド表現力の強化（Chart.js & Web Audio API）
① Web Audio API による遅延なしのタイピングサウンド
外部音声ファイルのロードを不要にするため、Web Audio API（オシレーター）を用いて純粋な JavaScript のみでクリック音とエラー警告音を自動生成しました。
② Chart.js によるスコア推移グラフ
localStorage から時系列データを抽出して Chart.js で描画。テーマ変更時にはグラフの配色も自動再適応されるよう動的更新処理を組み込んでいます。
5. おわりに
TDD によるバックエンド設計から CI 自動テスト、フロントエンドのレトロUI表現と音・グラフの統合まで、一貫した開発サイクルを構築できました。
GitHub Repository: mysweetlatte201051/TypingTutor