タイピング練習アプリに成績管理機能を追加実装した

一昨日のブログで紹介したタイピング練習アプリ。
https://forum.pc5bai.com/work/typing/

「やっぱ、成績管理機能があったほうがおもしろいよね...」と思い、追加実装した。

タイピング練習アプリの成績管理機能

タイピング練習アプリの成績公開機能

開発メモ

claude 3.5 Sonnet, claude 3 Opus に同時に相談しつつ、実装にかかった時間はだいたい4.0時間くらい。
UI側の機能追加だけだと1.5時間くらい。あとは、ついでに Vue のメソッドのリファクタリングとかもかなりやって、あわせて2.5時間くらい。
サーバ側の雑になっていた Django REST Framework のシリアライザのテストをしっかり書いたりとか、ついでにほかの APIViews をメンテナンスしたりとか、そういうところに案外時間がかかった。

さらに、夜になってから、出題範囲の絞りこみ機能について、直感的に操作できるようなUIへの変更を思いついたので、これもまた改修。こっちは、だいたい4時間くらい。

従来はラジオボタンでレベルを選択するとその下に一部のかな文字がチェックボックスといっしょに表示されるという仕様だった。
これを、全かな文字のチェックボックスは表示したままにしておき、ラジオボタンクリックによってチェックボックスのオンオフを切り替えられるようにした。

タイピング練習アプリの出題範囲選択コントロール(改修前)

タイピング練習アプリの出題範囲選択コントロール(改修後)

古いバージョンでは範囲選択画面で無駄になってきた余白にかなのチェックボックスをつめられた。
上の2つの画像を比較する、範囲選択で何が起きているのかが直感的に分かるようになったのではないかと思う。

チェックボックス用の値の持ち方、ラジオボタンでレベル選択したときのフィルターのやり方などかなり書き換えた。
これはそうとうしんどかった...やはり、4時間くらい。 Vue.js は、 JavaScript のリストのフィルターとかが続くうえに computed の値が乱立してきたりすると、訳がわからなくなる。
computed と method が連動している場合も近接したモジュール内の近接した場所に置けないというのも悩み。
あっちこっちに飛んで状況確認しているとくたびれる (^^;

全体のリファクタリングもしたいのだが、いつになることやら。