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

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

過去・現在・未来の3つに分けて状態を持つ、useReducer を使ったフックで、元に戻す・やり直すを作りました。Ctrl+Z などのショートカット、入力欄でのブラウザの「元に戻す」との分け方、更新の書き方で履歴が壊れる例も確かめてい ...

Reactで animate() を呼び、要素を揺らす、ふわっと出す、薄くして消す、の3つの動きを TypeScript で作る方法です。前の動きの止め方、fill と commitStyles の違い、useEffect でのちらつ ...

Reactで、canvasの中のボールをrequestAnimationFrameで動かす方法です。canvasの要素とボールの位置をuseRefに持ち、useEffectで始めたループをcancelAnimationFrameで止め ...

useEffectでfetchすると、検索語を速く打ち替えたときに古い応答が後から届き、表示を上書きすることがあります。片付け関数でAbortControllerのabort()を呼ぶと、古いリクエストが中止され、入力どおりの結果が残 ...