Reactでファイルをアップロードするとき、送った量を XMLHttpRequest の upload に届く progress イベントで受け取り、progress 要素に表示する方法です。中止と後片付け、送り終えたあとの処理待ちの ...

WebSocketの接続、受信、送信、切れたときのつなぎ直しを、Reactのカスタムフック1つにまとめる方法です。つなぎ直しが止まらなくなる書き方や、外したあとに接続が残る書き方との違いを、検証環境で接続の数を数えて確かめました。

自作のモーダルを閉じると、フォーカスはページの先頭に飛びます。開く前の要素を覚えて、閉じたときに戻すフックの書き方と、autoFocus で覚える要素がずれる落とし穴、元のボタンが消えたときの戻し先を、検証環境で確かめて紹介します。

aria-liveやrole=”status”の付いた領域は、中身が変わるとスクリーンリーダーに伝わります。Reactでは、領域を最初から置いておき、中の文だけを変えるのが基本です。同じ文が続くときの対処も、C ...

Viteで作ったReactのアプリを、Playwright Testで本物のブラウザから操作してテストしました。開発サーバーの自動起動、役割とラベルでの要素の探し方、表示が変わるまで待つexpect、APIの差し替え、失敗したときのレ ...

TanStack Table の useReactTable と getSortedRowModel で、見出しをクリックすると並べ替わる表を作りました。クリックごとの並び方の切り替わり、Shift を押して複数の列で並べる方法、日本 ...

React Routerのデータモードでは、ルートにactionを書くと、Formで送信した入力をrequest.formData()で受け取れます。入力の誤りを400で返して表示する方法と、保存後のリダイレクトと一覧の読み直しを、検 ...

一覧の絞り込みの条件をURLのクエリに置くと、再読み込みやURLの共有、ブラウザの「戻る」で条件が元に戻ります。React RouterのuseSearchParamsでの読み書き、検索欄の履歴の残し方、入力欄のカーソルが飛ぶ問題と、 ...

親が描き直されるたびに一緒に描き直される子は、memoで包むと、propsが前と同じあいだは描き直されなくなります。その場で書いたオブジェクトや関数を渡すと効かなくなる理由とその直し方、JSXのchildrenでも効かなくなることを、 ...

Reactのボタンの状態ごとの見た目を、Storybookのストーリーとして書いて一覧にしました。Controlsでのpropsの切り替え、自動で作られるドキュメントのページ、play関数とVitestでのテストを、TypeScrip ...