⌨️

タイプが苦手な単語をタイピング練習できるツールを作った

2022/03/13に公開約1,700字

最近椅子を変えてキーボードに添える手の位置が変わったのか、タイピングしづらいと感じることが増えました。
昔は TyepWell という知る限りでは一番良いタイピング練習ソフトを使っていましたが Mac では使えません。うち間違えた単語を自動で苦手辞書に追加してくれて専用練習できるのが 1 つの特徴でした。

そこで自分で登録した単語を練習できるアプリを作ってみました。

苦手タイパー nigate typing

nigate typing

使っている技術は React + TypeScript + @mui/material + Next.js + Vercel です。

https://elzup-image-storage.s3.amazonaws.com/blog/nigate-typing.png

技術的な点

特に凝ったことはしてないので少しだけ。

コード: https://github.com/elzup/tools/blob/main/src/components/NigateTyping/index.tsx

半角文字のみ制限

単語登録のテキストエリアで半角文字と改行のみ使えるようにする。

export const asciify = (s: string) => s.replace(/[^\x20-\x7e\n]*/g, '')

inputpattern 属性も使える可能性がある。

input とテキスト の文字サイズを揃える

font-familyfont-size を揃えることでサイズが一致します。

span,
input {
  font-family: 'Roboto Mono', monospace;
  font-size: 100%;
}

チェック結果の色付け

レンダリング部分にロジックをおいているのが微妙。

<div className="answer">
  {ans.split('').map((c, i) => (
    <span
      key={i}
      data-correct={c === text[i]}
      data-current={i === text.length}
      data-leached={i < text.length}
    >
      {c}
    </span>
  ))}
</div>
.answer {
  margin-left: 4px;
  span {
    color: gray;
    &[data-correct='true'] {
      color: black;
    }
    &[data-correct='false'][data-leached='true'] {
      color: red;
      border-bottom: solid 1px red;
    }
    &[data-current='true'] {
      border-bottom: solid 1px blue;
      background: hsla(180, 50%, 50%, 0.5);
    }
  }
}

その他備考

  • タイピングツールは間違えた文字から入力するタイプと入力した文 Backspace が必要なタイプがありますが後者のが好き
  • 苦手な単語をスムーズに打てるようにするよりも、苦手な指の運びを攻略していきたいという目的で作った。
  • カーソル位置の表示は意外と css で簡単にできた。
GitHubで編集を提案

Discussion

ログインするとコメントできます