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

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

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で進む・戻るの向きを変えたスライドに ...

同じReactのコンポーネントを、広い列では横並びに、狭い場所では縦並びにする方法です。レスポンシブなページで、同じ部品を幅の違う場所に置きたいときに使えます。置き場所の要素にcontainer-typeを付け、@containerで ...

OS がダークモードかどうかを、React のコンポーネントで true/false として受け取るカスタムフックの作り方です。matchMedia と useSyncExternalStore を使い、設定の切り替えへの追従、use ...