Reactで、正規表現を試せる入力欄を作る方法
正規表現とフラグを入力すると、一致した部分の強調とキャプチャグループの一覧がその場で出る入力欄を、React で作りました。書き間違いのエラー表示、長さ 0 の一致の扱い、時間のかかるパターンで固まらないように Worker で止める ...
Reactで、ファイルのハッシュ値を計算して表示する方法
選んだファイルの SHA-256 などのハッシュ値を、React でブラウザだけで計算して表示します。crypto.subtle.digest の使い方、選び直したときに前の結果で上書きされない書き方、大きいファイルを Worker ...
Reactで、入力したパスワードの強さを表示する方法
入力したパスワードの強さを、React で5本のバーと「弱い」「強い」などの言葉で表示します。判定は zxcvbn-ts に任せ、重い計算は Web Worker に移し、メールアドレスの一部を使ったパスワードも弱いと出るようにしまし ...
ReactでWeb Workerを使い、重い計算中も入力を止めない方法
入力のたびに約200ミリ秒かかる計算を描画の中で呼ぶと、入力欄が止まります。計算を Web Worker に移すと入力欄は止まりません。Worker を1つ使い回すと結果が遅れることも確かめ、入力のたびに作り直して古い計算を止める書き ...
