requestIdleCallbackを使うと、重い計算をブラウザの手が空いたときだけ少しずつ進められます。Reactのフックにまとめる書き方と、timeoutの付け方、二重に走らせない後片付けをChromiumで確かめました。

レシピを見ながら料理をするときのように、触らずに見続けるあいだ画面をスリープさせたくないときは、Wake Lock APIが使えます。Reactでオン・オフを切り替えるフックの書き方と、タブを切り替えると解除される動き、StrictM ...

選んだファイルが本当に PNG や JPEG なのかを、React でファイルの先頭の数バイトを読んで調べます。拡張子から決まる file.type との違い、PNG・JPEG・GIF・WebP・BMP・AVIF の見分け方、先頭だけ ...

バブルソートが2本の棒を比べて入れ替える様子を、React の棒グラフで1手ずつ見せる部品を作りました。並べ替えの途中を配列に記録してから再生する作り方と、棒をすべらせて動かすための key と DOM の並べ方を、Chromium ...

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

お手本の文を1文字ずつ打ち、まちがえた文字をピンクで示し、最後に時間と正確率を出すタイピング練習の画面を React で作りました。2文字目から進まない、Shift をミスに数える、Space でボタンが押される書き方とも比べています ...

React のアプリで、ブラウザの IndexedDB にメモを保存し、次に開いたときに読み出す方法です。IndexedDB の操作を Promise を返す関数にまとめ、useEffect で読み込みます。Date などがそのまま戻 ...

未読が3件あるとき、タブに「(3) 猫のメモ」と出し、ファビコンに件数を描く方法です。React 19 の title と canvas で作り、100件以上を「99+」にする場合、件数が続けて変わる場合、アイコンが別オリジンにある場 ...

入力が1秒止まったらサーバーに保存し、「保存中…」「13:05 に保存しました」と表示するカスタムフックを React で作りました。メモや下書きを、保存ボタンを押さずに残したいときに使えます。保存の最中に続きを打っても古い内容で上書 ...

Geolocation API の getCurrentPosition() で緯度・経度を取得し、React の state に入れて表示する方法です。timeout と maximumAge の効き方、許可されないときの表示、wa ...