画面のカードなど、一部の要素だけを PNG にして保存させる方法です。スクリーンショットを撮って切り抜く手間を、ボタン1つで省きたいときに使えます。ref で要素を受け取り、html-to-image の toBlob で画像にします ...

フォルダとファイルのような階層を、React でツリー表示する部品を作りました。パスの一覧から入れ子のデータを作る方法、開いているフォルダを Set で持つ理由、role=”tree” の付け方、矢印キーでの操 ...

タブを ←→・Home・End で切り替えられるように、React と TypeScript で作りました。Tab キーで止まるタブを1つにする tabindex の付け方、ref の配列でフォーカスを動かす書き方、Enter で切り ...

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

送信ボタンを続けて押しても、注文が1件だけ作られるようにする方法です。送信中にボタンを無効にする書き方、refで止める書き方、formのactionの場合と、サーバー側でIdempotency-Keyを使う方法を確かめました。 ...

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

Reactでstateを更新した直後の行では、画面（DOM）はまだ古いままです。flushSyncで包むと、次の行に進む前に画面が更新されます。スクロールと印刷の例で確かめ、エフェクトの中で呼んだときの警告と描画の回数も調べました。

useStateの値を変えるとコンポーネントは描画し直されますが、useRefの値を変えても描画は起きません。クリックの回数とタイマーのIDを例に、描画の回数を数えて違いを確かめ、画面に出す値はuseState、出さない値はuseRe ...