入力したまま保存していない内容を、うっかり捨てないための確認の出し方です。再読み込みやタブを閉じる操作はbeforeunloadで、アプリの中の画面移動はReact RouterのuseBlockerで止める方法を、検証環境で確かめま ...

ReactでServer-Sent Eventsの通知を受け取る方法です。名前付きイベントの受け取り方、つなぎ直しとLast-Event-IDでの取りこぼし防止、同じオリジンへの接続が6本で止まる制限を検証環境で確かめました。 ...

同じサイトを複数のタブで開いているとき、片方のタブで変えた状態を、BroadcastChannelでほかのタブにも反映する方法です。チャンネルを閉じ忘れたときの動きや、あとから開いたタブに値を渡す方法を、検証環境で確かめました。

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

ReactでPopover APIを使い、ボタンの下にメニューを出す方法です。ドロップダウンメニューを作るときに使えます。popoverとpopoverTargetを付けるだけで開閉でき、外側のクリックやEscで閉じます。項目を選んだ ...

Reactの画面で金額や数を「￥1,235」のようにカンマ区切りで出したいときは、Intl.NumberFormatが使えます。「1.2万」のような短い表記や割合、増減の符号も出せます。書式の使い回し方と、全角の「￥」など文字列で比べ ...

コマンドやURLの横に置く「コピー」ボタンを、Reactのカスタムフックとnavigator.clipboard.writeTextで作る方法です。「コピーしました」の表示を2秒で戻す仕組みと、コピーできないときの扱いも確かめました。 ...

Vite で作った React の画面を、vite-plugin-pwa の Service Worker でオフラインでも開けるようにする方法です。画面のファイルと API のデータがいつ保存されるか、オフラインの表示、新しい版への ...

Reactのフォームで、バリデーションのエラーを入力中は出さず、欄を離れたら出し、直した瞬間に消したいときの方法です。エラーの代わりに「欄に触れたか」と「送信したか」をstateに持ちます。画面がずれてボタンが押せなくなる問題の対策も ...

React 19.3のViewTransitionで、一覧と詳細の切り替えに動きを付ける方法です。startTransitionの中で切り替えるとクロスフェードし、addTransitionTypeで進む・戻るの向きを変えたスライドに ...