カスタム配列を練習できるウェブアプリを作成した話

ご挨拶

皆様ごきげんよう。エビサンドです。
QWERTY配列って非効率だな～と感じてはいたものの、いきなりキー配列を変更するのはハードルが高く、なかなかカスタム配列に手を出すことができませんでした。
そこで、今使っている配列のままカスタム配列を練習できるアプリケーションを作成してみました。

概要

カスタム配列タイピング練習
現在の配列と練習したい配列を選択することで、押したキーと入力されるキーがマッピングされ、画面下部のキーボードの配列が変わります。

いくつかの練習文のカテゴリを選択でき、ランダムに15問の問題文が出題されます。
1セッション完了後に合計打鍵数、KPM、正確性、ミス回数、かかった時間が表示されます。

画面下部のキーボードは表示しない設定にもでき、キーボード上でキー配置を覚える練習と、文章だけを見て打鍵する練習の両方ができます。

また、QWERTY配列を含め9種のカスタム配列を設定してありますが、JSON形式でキーマップをアップロードすることでどのような配列でも練習することができるようになっています。

どのように作成したか

Next.jsを利用して作成し、Vercelにデプロイしています。
実装にあたり、コードや問題文は全てClaude Codeを利用して実装しました。
最初の指示の時点でMVPとして十分なものが出力されたので、そこから少し機能を追加したりして仕上げました。

もし今後やるとしたら

・親指シフトが練習できるようにする
・問題文のインポートができるようにする
・スコアを記録、グラフ化できるようにする