​​React​Playwright,TypeScript,Web Worker,正規表現

Thumbnail of post image 173

正規表現とフラグを入力すると、一致した部分の強調とキャプチャグループの一覧がその場で出る入力欄を、React で作りました。書き間違いのエラー表示、長さ 0 の一致の扱い、時間のかかるパターンで固まらないように Worker で止める ...

​​React​Playwright,TypeScript,useEffect,Web Crypto API,Web Worker

Thumbnail of post image 019

選んだファイルの SHA-256 などのハッシュ値を、React でブラウザだけで計算して表示します。crypto.subtle.digest の使い方、選び直したときに前の結果で上書きされない書き方、大きいファイルを Worker ...

​​React​Playwright,TypeScript,Web Worker,zxcvbn-ts,アクセシビリティ,フォーム

Thumbnail of post image 188

入力したパスワードの強さを、React で5本のバーと「弱い」「強い」などの言葉で表示します。判定は zxcvbn-ts に任せ、重い計算は Web Worker に移し、メールアドレスの一部を使ったパスワードも弱いと出るようにしまし ...

​​React​Playwright,TypeScript,useDeferredValue,Vite,Web Worker

Thumbnail of post image 068

​

入力のたびに約200ミリ秒かかる計算を描画の中で呼ぶと、入力欄が止まります。計算を Web Worker に移すと入力欄は止まりません。Worker を1つ使い回すと結果が遅れることも確かめ、入力のたびに作り直して古い計算を止める書き ...

カテゴリー