ダウンロード中にプログレスバーで進み具合を見せたいときに使える方法です。fetch の本文を getReader() で少しずつ読み、受け取った量と Content-Length から進み具合を progress 要素に表示します。C ...

2秒ごとにサーバーへ問い合わせる画面で、別のタブを見ているあいだは問い合わせを止め、戻った瞬間に1回問い合わせ直すフックを作りました。setInterval のままの書き方や、TanStack Query の設定による違いも、Chro ...

選んだ複数のファイルを、ブラウザの中で1つの ZIP にまとめて保存させる方法です。JSZip でフォルダ分けして ZIP を作り、進み具合を表示します。既定では圧縮されないこと、同じ名前が上書きされること、取得の失敗への備えも確かめ ...

入力しながら結果が出る検索欄に、デバウンスを入れるカスタムフックを TypeScript で作りました。サーバーへのリクエストが1件にまとまること、古い結果の取り消し、空欄や検索中の表示、日本語の変換中の扱いを、Chrome for ...

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